[FEAT] Menu improvements

src/components/layout/Navbar.vue

@@ -44,7 +44,16 @@
     </div>
 
     <!-- Mobile Menu -->
-    <NavbarMobileMenu :is-open="isMobileMenuOpen" @close="isMobileMenuOpen = false" @open-help="$emit('open-help')" @save-project="handleQuickSave" @open-save-modal="openSaveModal" @open-new-project-modal="isNewProjectModalOpen = true" @open-project-list="isProjectListOpen = true" />
+    <NavbarMobileMenu
+      :is-open="isMobileMenuOpen"
+      @close="isMobileMenuOpen = false"
+      @open-help="$emit('open-help')"
+      @save-project="handleQuickSave"
+      @open-save-modal="openSaveModal"
+      @open-new-project-modal="isNewProjectModalOpen = true"
+      @open-project-list="isProjectListOpen = true"
+      @open-auth-modal="isAuthModalOpen = true"
+    />
   </nav>
   <AuthModal :is-open="isAuthModalOpen" @close="isAuthModalOpen = false" />
   <ProjectList :is-open="isProjectListOpen" @close="isProjectListOpen = false" @open-project="handleOpenProject" />

src/components/layout/navbar/NavbarLinks.vue

@@ -1,6 +1,6 @@
 <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">Generator</router-link>
+    <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>

src/components/layout/navbar/NavbarMobileMenu.vue

@@ -9,15 +9,47 @@
   >
     <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 class="px-2 pt-2 pb-3 space-y-1">
-        <router-link to="/" class="block px-3 py-2 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')">Generator</router-link>
+        <!-- User Profile (Mobile) -->
-        <router-link to="/blog" class="block px-3 py-2 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')">Blog</router-link>
+        <div v-if="authStore.user" class="px-3 py-3 mb-2 border-b border-gray-200 dark:border-gray-800">
-        <router-link to="/about" class="block px-3 py-2 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')">About</router-link>
+          <div class="flex items-center gap-3 mb-3">
-        <router-link to="/faq" class="block px-3 py-2 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')">FAQ</router-link>
+            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-white font-bold text-base flex items-center justify-center shadow-md">
-        <router-link to="/faq" class="block px-3 py-2 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')">FAQ</router-link>
+              {{ userInitials }}
+            </div>
+            <div class="overflow-hidden">
+              <p class="text-xs text-gray-500 dark:text-gray-400 uppercase font-semibold tracking-wider mb-0.5">Signed in as</p>
+              <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ authStore.user.email }}</p>
+            </div>
+          </div>
+          <button @click="handleLogout" class="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-base font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"><i class="fas fa-sign-out-alt w-5 text-center"></i> Sign out</button>
+        </div>
+
+        <div v-else class="px-3 py-3 mb-2 border-b border-gray-200 dark:border-gray-800">
+          <button
+            @click="
+              $emit('open-auth-modal');
+              $emit('close');
+            "
+            class="w-full btn btn-primary flex justify-center items-center gap-2"
+          >
+            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>
 
         <!-- Project Actions -->
-        <div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 px-3">
+        <div v-if="authStore.user" class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2">
-          <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Project</p>
+          <p class="px-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Project</p>
 
           <button
             v-if="isEditorActive"
@@ -62,7 +94,7 @@
           </button>
         </div>
 
-        <div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 flex gap-4 px-3">
+        <div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-5 flex gap-4 px-3">
           <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
             <i class="fab fa-github text-xl"></i>
           </a>
@@ -95,5 +127,18 @@
     isOpen: boolean;
   }>();
 
-  defineEmits(['close', 'open-help', 'save-project', 'open-save-modal', 'open-new-project-modal', 'open-project-list']);
+  defineEmits(['close', 'open-help', 'save-project', 'open-save-modal', 'open-new-project-modal', 'open-project-list', 'open-auth-modal']);
+
+  import { useAuthStore } from '@/stores/useAuthStore';
+  const authStore = useAuthStore();
+
+  const userInitials = computed(() => {
+    if (!authStore.user?.email) return '??';
+    return authStore.user.email.substring(0, 2).toUpperCase();
+  });
+
+  const handleLogout = () => {
+    authStore.logout();
+    // emit('close'); // Optional: close menu on logout? Maybe better to keep open so they can login again if they want.
+  };
 </script>

src/components/layout/navbar/NavbarSocials.vue

@@ -1,20 +1,27 @@
 <template>
   <div class="flex items-center gap-3">
-    <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" title="Source Code">
+    <Tooltip text="Source Code">
+      <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors">
         <i class="fab fa-github text-lg"></i>
       </a>
-    <a href="https://discord.gg/JTev3nzeDa" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-[#5865F2] dark:text-gray-400 dark:hover:text-[#5865F2] transition-colors" title="Discord Community">
+    </Tooltip>
+    <Tooltip text="Discord Community">
+      <a href="https://discord.gg/JTev3nzeDa" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-[#5865F2] dark:text-gray-400 dark:hover:text-[#5865F2] transition-colors">
         <i class="fab fa-discord text-lg"></i>
       </a>
-    <button @click="$emit('open-help')" class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400 transition-colors" title="Help">
+    </Tooltip>
+    <Tooltip text="Help">
+      <button @click="$emit('open-help')" class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400 transition-colors">
         <i class="fas fa-question-circle text-lg"></i>
       </button>
+    </Tooltip>
     <DarkModeToggle />
   </div>
 </template>
 
 <script setup lang="ts">
   import DarkModeToggle from '../../utilities/DarkModeToggle.vue';
+  import Tooltip from '../../utilities/Tooltip.vue';
 
   defineEmits(['open-help']);
 </script>