102 lines
No EOL
3.4 KiB
Vue
102 lines
No EOL
3.4 KiB
Vue
<template>
|
|
<nav class="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
|
|
<UContainer>
|
|
<div class="flex items-center justify-between py-4">
|
|
<!-- Logo/Brand -->
|
|
<NuxtLink to="/" class="flex items-center gap-2">
|
|
<div class="w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center">
|
|
<div class="w-4 h-4 bg-white rounded-sm" />
|
|
</div>
|
|
<div class="w-6 h-6 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
|
|
<span class="text-xl font-bold text-gray-900 dark:text-white ml-2">Ghost Guild</span>
|
|
</NuxtLink>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<NuxtLink
|
|
v-for="item in navigationItems"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
class="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium"
|
|
active-class="text-emerald-600 dark:text-emerald-400"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
<UButton
|
|
to="/login"
|
|
variant="outline"
|
|
size="sm"
|
|
class="ml-4"
|
|
>
|
|
Login
|
|
</UButton>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button
|
|
class="md:hidden p-2"
|
|
@click="toggleMobileMenu"
|
|
aria-label="Toggle menu"
|
|
>
|
|
<div class="space-y-1">
|
|
<div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ 'rotate-45 translate-y-1.5': mobileMenuOpen }" />
|
|
<div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ 'opacity-0': mobileMenuOpen }" />
|
|
<div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ '-rotate-45 -translate-y-1.5': mobileMenuOpen }" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation -->
|
|
<div
|
|
v-if="mobileMenuOpen"
|
|
class="md:hidden py-4 border-t border-gray-200 dark:border-gray-700"
|
|
>
|
|
<div class="flex flex-col space-y-3">
|
|
<NuxtLink
|
|
v-for="item in navigationItems"
|
|
:key="item.path"
|
|
:to="item.path"
|
|
class="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium py-2"
|
|
active-class="text-emerald-600 dark:text-emerald-400"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
<UButton
|
|
to="/login"
|
|
variant="outline"
|
|
size="sm"
|
|
class="mt-4 w-fit"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
Login
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const mobileMenuOpen = ref(false)
|
|
|
|
const navigationItems = [
|
|
{ label: 'Home', path: '/' },
|
|
{ label: 'About', path: '/about' },
|
|
{ label: 'Events', path: '/events' },
|
|
{ label: 'Members', path: '/members' },
|
|
{ label: 'Join', path: '/join' },
|
|
{ label: 'Contact', path: '/contact' },
|
|
]
|
|
|
|
const toggleMobileMenu = () => {
|
|
mobileMenuOpen.value = !mobileMenuOpen.value
|
|
}
|
|
|
|
// Close mobile menu when clicking outside
|
|
const closeMobileMenu = () => {
|
|
mobileMenuOpen.value = false
|
|
}
|
|
</script> |