root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Menu fixes

Browse Source
This commit is contained in:
root
2026-01-02 21:30:06 +01:00
parent 49af17c0e3
commit ce69598175
2 changed files with 61 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/layout/navbar/NavbarLinks.vue
View File

@@ -1,13 +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>
<router-link to="/contact" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Contact</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>

44
src/components/layout/navbar/NavbarMobileMenu.vue
View File

@@ -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,20 +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>
<router-link to="/contact" 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-envelope w-5 text-center"></i> Contact
<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 -->
@@ -132,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;