fix: mobile navbar layout overflow

- Separate desktop and mobile navigation structures
- Move language switcher and GitHub button into mobile menu
- Only show hamburger button on mobile
- Add smooth slide-down animation for mobile menu
- Fix z-index and positioning for mobile overlay

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Kosthi

src/components/vue/NavBar.vue

@@ -154,10 +154,9 @@ onUnmounted(() => {
         <img src="/RushDB.png" alt="RushDB Logo" class="nav-logo-img" />
         <span>&ensp;RushDB</span>
       </a>
-      <div class="nav-actions">
-        <button class="nav-toggle" type="button" :aria-label="t('nav.openMenu')" @click="toggleNavMenu">
-          <span class="nav-toggle-bars" aria-hidden="true"></span>
-        </button>
+
+      <!-- Desktop navigation -->
+      <div class="nav-actions nav-desktop">
         <ul class="nav-links">
           <li>
             <a href="#about" :class="{ active: activeSection === 'about' }">{{ t('nav.about') }}</a>
@@ -195,6 +194,53 @@ onUnmounted(() => {
           {{ t('nav.github') }}
         </a>
       </div>
+
+      <!-- Mobile hamburger button -->
+      <button class="nav-toggle" type="button" :aria-label="t('nav.openMenu')" @click="toggleNavMenu">
+        <span class="nav-toggle-bars" aria-hidden="true"></span>
+      </button>
+
+      <!-- Mobile menu -->
+      <div class="nav-mobile-menu" :class="{ open: isMenuOpen }">
+        <ul class="nav-mobile-links">
+          <li>
+            <a href="#about" :class="{ active: activeSection === 'about' }" @click="closeNavMenu">{{ t('nav.about') }}</a>
+          </li>
+          <li>
+            <a href="#achievements" :class="{ active: activeSection === 'achievements' }" @click="closeNavMenu">{{ t('nav.achievements') }}</a>
+          </li>
+          <li>
+            <a href="#projects" :class="{ active: activeSection === 'projects' }" @click="closeNavMenu">{{ t('nav.projects') }}</a>
+          </li>
+          <li>
+            <a href="#members" :class="{ active: activeSection === 'members' }" @click="closeNavMenu">{{ t('nav.members') }}</a>
+          </li>
+          <li>
+            <a :href="`/${lang}/blog/`" class="nav-blog-link">{{ t('nav.blog') }}</a>
+          </li>
+        </ul>
+
+        <div class="nav-mobile-actions">
+          <div class="language-switcher mobile-lang" :class="{ show: isLanguageOpen }">
+            <div class="language-trigger" @click="toggleLanguageSwitcher">{{ languageLabel }}</div>
+            <div class="language-dropdown">
+              <button
+                v-for="(label, langKey) in languages"
+                :key="langKey"
+                class="lang-btn"
+                :class="{ active: lang === langKey }"
+                :data-lang="langKey"
+                @click="switchLanguage(langKey as Lang)"
+              >
+                {{ label }}
+              </button>
+            </div>
+          </div>
+          <a class="nav-cta mobile-cta" href="https://github.com/RushDB-Lab" target="_blank" rel="noopener noreferrer">
+            {{ t('nav.github') }}
+          </a>
+        </div>
+      </div>
     </div>
   </nav>
 </template>

src/styles/global.css

@@ -2272,42 +2272,132 @@
           display: inline-flex;
         }
 
-        .nav-links {
-          display: flex;
+        /* Hide desktop nav on mobile */
+        .nav-desktop {
+          display: none;
+        }
+
+        /* Mobile hamburger button */
+        .nav-toggle {
+          order: 1;
+          margin-left: auto;
+        }
+
+        /* Mobile menu */
+        .nav-mobile-menu {
           position: fixed;
-          top: 80px;
+          top: 70px;
           left: 12px;
           right: 12px;
-          padding: 10px;
-          gap: 0.25rem;
-          flex-direction: column;
-          background: rgba(8, 12, 28, 0.86);
-          border: 1px solid rgba(234, 242, 255, 0.12);
+          padding: 16px;
+          background: rgba(8, 12, 28, 0.95);
+          border: 1px solid rgba(240, 246, 255, 0.12);
           border-radius: 16px;
           backdrop-filter: blur(20px);
           transform: translateY(-10px);
           opacity: 0;
           pointer-events: none;
-          transition: opacity 0.2s ease, transform 0.2s ease;
+          transition: opacity 0.25s ease, transform 0.25s ease;
+          z-index: 999;
+          max-height: calc(100vh - 100px);
+          overflow-y: auto;
         }
 
-        .navbar.menu-open .nav-links {
+        .nav-mobile-menu.open {
           opacity: 1;
           transform: translateY(0);
           pointer-events: auto;
         }
 
-        .nav-links a {
+        .nav-mobile-links {
+          list-style: none;
+          padding: 0;
+          margin: 0 0 16px 0;
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .nav-mobile-links a {
           display: block;
-          padding: 12px 14px;
+          padding: 12px 16px;
           border-radius: 12px;
-          background: rgba(234, 242, 255, 0.03);
-          border: 1px solid rgba(234, 242, 255, 0.06);
+          background: rgba(240, 246, 255, 0.03);
+          border: 1px solid rgba(240, 246, 255, 0.06);
+          color: var(--text-2);
+          text-decoration: none;
+          font-weight: 600;
+          transition: all 0.2s ease;
         }
 
-        .nav-links a:hover {
+        .nav-mobile-links a:hover,
+        .nav-mobile-links a.active {
           background: rgba(34, 211, 238, 0.08);
           border-color: rgba(34, 211, 238, 0.22);
+          color: var(--text);
+        }
+
+        .nav-mobile-actions {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          padding-top: 16px;
+          border-top: 1px solid rgba(240, 246, 255, 0.1);
+        }
+
+        .mobile-lang {
+          width: 100%;
+        }
+
+        .mobile-lang .language-trigger {
+          width: 100%;
+          justify-content: center;
+        }
+
+        .mobile-lang .language-dropdown {
+          position: relative;
+          top: 8px;
+          left: 0;
+          right: 0;
+          margin-top: 0;
+          transform: none;
+          opacity: 0;
+          max-height: 0;
+          overflow: hidden;
+          transition: all 0.25s ease;
+        }
+
+        .mobile-lang.show .language-dropdown {
+          opacity: 1;
+          max-height: 200px;
+        }
+
+        .mobile-cta {
+          width: 100%;
+          justify-content: center;
+          text-align: center;
+        }
+
+        /* Hide original nav-links on mobile */
+        .nav-links {
+          display: none !important;
+        }
+      }
+
+      /* Show mobile menu structure only on mobile */
+      @media (min-width: 981px) {
+        .nav-toggle {
+          display: none;
+        }
+
+        .nav-mobile-menu {
+          display: none;
+        }
+
+        .nav-desktop {
+          display: flex;
+          align-items: center;
+          gap: 2rem;
         }
       }