Enhance application structure: Add runtime configuration for environment variables, integrate new dependencies for Cloudinary and UI components, and refactor member management features including improved forms and member dashboard. Update styles and layout for better user experience.

app/components/AppNavigation.vue

@@ -0,0 +1,102 @@
+<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>