[FEAT] Menu fixes

src/components/layout/navbar/NavbarLinks.vue

@@ -1,12 +1,38 @@
 <template>
-  <div class="flex items-center gap-4 text-sm font-medium text-gray-600 dark:text-gray-400">
-    <router-link to="/" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Home</router-link>
-    <router-link to="/blog" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Blog</router-link>
-    <router-link to="/about" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About</router-link>
-    <router-link to="/faq" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">FAQ</router-link>
+  <div class="flex items-center gap-1">
+    <router-link
+      v-for="link in links"
+      :key="link.path"
+      :to="link.path"
+      class="px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200"
+      :class="[
+        isActive(link.path)
+          ? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400'
+          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400'
+      ]"
+    >
+      {{ link.name }}
+    </router-link>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { RouterLink } from 'vue-router';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const links = [
+  { name: 'Home', path: '/' },
+  { name: 'Blog', path: '/blog' },
+  { name: 'About', path: '/about' },
+  { name: 'FAQ', path: '/faq' },
+  { name: 'Contact', path: '/contact' },
+];
+
+const isActive = (path: string) => {
+  if (path === '/') {
+    return route.path === '/';
+  }
+  return route.path.startsWith(path);
+};
 </script>

src/components/layout/navbar/NavbarMobileMenu.vue

@@ -7,7 +7,7 @@
     leave-from-class="transform opacity-100 translate-y-0"
     leave-to-class="transform opacity-0 -translate-y-2"
   >
-    <div v-show="isOpen" class="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white/95 dark:bg-gray-950/95 backdrop-blur-xl absolute top-16 left-0 w-full z-40 shadow-lg">
+    <div v-show="isOpen" class="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white/95 dark:bg-gray-950/95 backdrop-blur-xl absolute top-16 left-0 w-full z-40 shadow-lg max-h-[calc(100vh-4rem)] overflow-y-auto">
       <div class="px-2 pt-2 pb-3 space-y-1">
         <!-- User Profile (Mobile) -->
         <div v-if="authStore.user" class="px-3 py-3 mb-2 border-b border-gray-200 dark:border-gray-800">
@@ -34,17 +34,19 @@
             Login / Register
           </button>
         </div>
-        <router-link to="/" class="flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">
-          <i class="fas fa-home w-5 text-center"></i> Home
-        </router-link>
-        <router-link to="/blog" class="flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">
-          <i class="fas fa-newspaper w-5 text-center"></i> Blog
-        </router-link>
-        <router-link to="/about" class="flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">
-          <i class="fas fa-info-circle w-5 text-center"></i> About
-        </router-link>
-        <router-link to="/faq" class="flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">
-          <i class="fas fa-question-circle w-5 text-center"></i> FAQ
+        <router-link
+          v-for="link in links"
+          :key="link.path"
+          :to="link.path"
+          class="flex items-center gap-3 px-3 py-3 rounded-md text-base font-medium transition-all duration-200"
+          :class="[
+            isActive(link.path)
+              ? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400'
+              : 'text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400'
+          ]"
+          @click="$emit('close')"
+        >
+          <i :class="link.icon" class="w-5 text-center"></i> {{ link.name }}
         </router-link>
 
         <!-- Project Actions -->
@@ -129,6 +131,21 @@
   const route = useRoute();
   const isEditorActive = computed(() => route.name === 'editor');
 
+  const links = [
+    { name: 'Home', path: '/', icon: 'fas fa-home' },
+    { name: 'Blog', path: '/blog', icon: 'fas fa-newspaper' },
+    { name: 'About', path: '/about', icon: 'fas fa-info-circle' },
+    { name: 'FAQ', path: '/faq', icon: 'fas fa-question-circle' },
+    { name: 'Contact', path: '/contact', icon: 'fas fa-envelope' },
+  ];
+
+  const isActive = (path: string) => {
+    if (path === '/') {
+      return route.path === '/';
+    }
+    return route.path.startsWith(path);
+  };
+
   defineProps<{
     isOpen: boolean;
     isSaving?: boolean;