chore: refactor website nav menu

Author: hamed-shirbandi

src/2-Clients/WebApp/Pages/Website/Shared/NavMenu.razor

@@ -1,4 +1,5 @@
 @inject ApplicationSettings ApplicationSettings
+@inject IJSRuntime JSRuntime
 
 <nav class="navbar navbar-expand-lg">
     <div class="container">
@@ -7,19 +8,32 @@
             @ApplicationSettings.Localized.Name
         </a>
 
-        <!-- Desktop menu (hidden on mobile) -->
-        <div class="d-none d-lg-block">
-            <ul class="navbar-nav ms-auto">
+        <!-- Mobile menu button and language selector -->
+        <div class="d-lg-none d-flex align-items-center">
+            <SelectLanguage BtnCssClass="btn btn-outline-light border-0 me-2"
+                            ShowIcon="true"
+                            ShowShortName="true"
+                            ShowSelectedItem="true"
+                            IconCssClass="text-secondary fs-5"
+                            WrapperCssClass="language-selector-mobile" />
+            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
+
+        <!-- Single Navigation Menu - Works for both desktop and mobile -->
+        <div class="navbar-nav-container">
+            <ul class="navbar-nav responsive-nav" id="singleNavMenu">
                 <li class="nav-item">
-                    <a class="nav-link" href="#home">@WebAppLocalizer[WebAppResource.Nav_Home]</a>
+                    <a class="nav-link" href="#home" data-bs-dismiss="offcanvas" data-scroll-to-section="true">@WebAppLocalizer[WebAppResource.Nav_Home]</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#pricing">@WebAppLocalizer[WebAppResource.Nav_Pricing]</a>
+                    <a class="nav-link" href="#pricing" data-bs-dismiss="offcanvas" data-scroll-to-section="true">@WebAppLocalizer[WebAppResource.Nav_Pricing]</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#">@WebAppLocalizer[WebAppResource.Nav_Contact]</a>
+                    <a class="nav-link" href="#" data-bs-dismiss="offcanvas">@WebAppLocalizer[WebAppResource.Nav_Contact]</a>
                 </li>
-                <li class="nav-item me-2">
+                <li class="nav-item language-selector-desktop">
                     <SelectLanguage BtnCssClass="btn btn-outline-light border-0"
                                     ShowIcon="true"
                                     ShowShortName="true"
@@ -28,7 +42,7 @@
                                     SelectedItemCssClass="text-secondary ms-1"
                                     WrapperCssClass="language-selector" />
                 </li>
-                <li class="nav-item ms-2">
+                <li class="nav-item dashboard-btn">
                     @if (CurrentUser.IsAuthenticated())
                     {
                         <a class="btn btn-warning-gradient" href="/dashboard">
@@ -46,19 +60,6 @@
                 </li>
             </ul>
         </div>
-
-        <!-- Mobile menu button and language selector -->
-        <div class="d-lg-none d-flex align-items-center">
-            <SelectLanguage BtnCssClass="btn btn-outline-light border-0 me-2"
-                            ShowIcon="true"
-                            ShowShortName="true"
-                            ShowSelectedItem="true"
-                            IconCssClass="text-secondary fs-5"
-                            WrapperCssClass="language-selector-mobile" />
-            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-        </div>
     </div>
 </nav>
 
@@ -72,21 +73,18 @@
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body">
-        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-            <li class="nav-item">
-                <a class="nav-link" href="#home" data-bs-dismiss="offcanvas">@WebAppLocalizer[WebAppResource.Nav_Home]</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="#pricing" data-bs-dismiss="offcanvas">@WebAppLocalizer[WebAppResource.Nav_Pricing]</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="#" data-bs-dismiss="offcanvas">@WebAppLocalizer[WebAppResource.Nav_Contact]</a>
-            </li>
-            <li class="nav-item mt-3">
-                <a class="btn btn-outline-primary-gradient w-100 mb-2" href="/dashboard" data-bs-dismiss="offcanvas">
-                    <i class="bi bi-box-arrow-in-right"></i> @WebAppLocalizer[WebAppResource.Nav_Dashboard]
-                </a>
-            </li>
+        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3" id="offcanvasNavMenu">
+            <!-- Navigation items will be cloned here by JavaScript -->
         </ul>
     </div>
 </div>
+
+@code {
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await JSRuntime.InvokeVoidAsync("setupSingleNavMenu");
+        }
+    }
+}

src/2-Clients/WebApp/wwwroot/website/css/app.css

@@ -28,6 +28,7 @@ html {
     overflow-x: hidden;
     width: 100%;
     max-width: 100%;
+    scroll-padding-top: 100px; /* Account for fixed navbar */
 }
 
 body {
@@ -121,6 +122,79 @@ html {
     width: 100%;
 }
 
+/* Responsive Navigation Styles */
+.navbar-nav-container {
+    display: flex;
+    align-items: center;
+}
+
+.responsive-nav {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Desktop Styles (lg and up) */
+@media (min-width: 992px) {
+    .navbar-nav-container {
+        margin-left: auto;
+    }
+    
+    .responsive-nav {
+        flex-direction: row;
+        gap: 0.5rem;
+    }
+    
+    .responsive-nav .nav-item {
+        margin: 0 0.25rem;
+    }
+    
+    .language-selector-desktop {
+        margin-right: 0.5rem;
+    }
+    
+    .dashboard-btn {
+        margin-left: 0.5rem;
+    }
+    
+    .dashboard-btn .btn {
+        padding: 0.75rem 2rem;
+        border-radius: 0.75rem;
+    }
+}
+
+/* Mobile Styles (below lg) */
+@media (max-width: 991.98px) {
+    .navbar-nav-container {
+        display: none;
+    }
+    
+    .responsive-nav {
+        flex-direction: column;
+        width: 100%;
+    }
+    
+    .responsive-nav .nav-item {
+        width: 100%;
+        margin: 0.5rem 0;
+    }
+    
+    .language-selector-desktop {
+        display: none;
+    }
+    
+    .dashboard-btn {
+        margin-top: 1rem;
+    }
+    
+    .dashboard-btn .btn {
+        width: 100%;
+        margin-bottom: 0.5rem;
+    }
+}
+
 .btn-primary-gradient {
     background: var(--gradient-primary);
     border: none;

src/2-Clients/WebApp/wwwroot/website/js/app.js

@@ -1,6 +1,68 @@
 // Modern SaaS Website JavaScript - Super Simple Animations
+
 document.addEventListener('DOMContentLoaded', function() {
 
+    // Handle navigation menu anchor link clicks using data attribute
+    function setupScrollToSectionLinks() {
+        const scrollLinks = document.querySelectorAll('.nav-link[data-scroll-to-section="true"]');
+        
+        scrollLinks.forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+                const href = this.getAttribute('href');
+                
+                // Skip empty hash
+                if (href === '#') return;
+                
+                // Update URL
+                window.location.hash = href;
+                
+                // Scroll to element
+                const target = document.querySelector(href);
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth' });
+                }
+            });
+        });
+    }
+    
+    // Setup scroll links when DOM is ready
+    setupScrollToSectionLinks();
+    
+    // Single Navigation Menu Setup - Clones nav items to offcanvas
+    window.setupSingleNavMenu = function() {
+        const singleNavMenu = document.getElementById('singleNavMenu');
+        const offcanvasNavMenu = document.getElementById('offcanvasNavMenu');
+        
+        if (singleNavMenu && offcanvasNavMenu) {
+            // Clone the navigation items
+            const navItems = singleNavMenu.querySelectorAll('.nav-item');
+            
+            navItems.forEach(item => {
+                // Skip language selector for mobile (it's already in the header)
+                if (item.classList.contains('language-selector-desktop')) {
+                    return;
+                }
+                
+                const clonedItem = item.cloneNode(true);
+                
+                // Add mobile-specific classes
+                if (clonedItem.classList.contains('dashboard-btn')) {
+                    clonedItem.classList.add('mt-3');
+                    const btn = clonedItem.querySelector('.btn');
+                    if (btn) {
+                        btn.classList.add('w-100', 'mb-2');
+                    }
+                }
+                
+                offcanvasNavMenu.appendChild(clonedItem);
+            });
+            
+            // Setup scroll links for cloned items
+            setupScrollToSectionLinks();
+        }
+    };
+    
     // Simple animation checker - runs on every scroll
     function checkAnimations() {
         const elements = document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in');
@@ -53,21 +115,6 @@ document.addEventListener('DOMContentLoaded', function() {
         updateParallax();
     }
 
-    // Smooth scrolling for anchor links (exclude dropdown toggles)
-    document.querySelectorAll('a[href^="#"]:not(.dropdown-toggle):not([data-bs-toggle])').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
-            const target = document.querySelector(this.getAttribute('href'));
-            if (target) {
-                const offsetTop = target.offsetTop - 80;
-                window.scrollTo({
-                    top: offsetTop,
-                    behavior: 'smooth'
-                });
-            }
-        });
-    });
-
     // Button hover effects
     function addHoverEffects() {
         document.querySelectorAll('.btn-primary-gradient, .btn-outline-primary-gradient').forEach(button => {