login functionality + home page mock

2026-01-15 23:26:14 +00:00
parent 1d08dd6a0c
commit fd0fc20b7d
9 changed files with 401 additions and 28 deletions
@@ -0,0 +1,68 @@
+<script setup>
+import { useAuthStore } from "~/stores/auth-store.js";
+
+const authStore = useAuthStore();
+const isDark = ref(false);
+const router = useRouter();
+
+function toggleDark() {
+  isDark.value = !isDark.value;
+  if (isDark.value) {
+    document.documentElement.classList.add('dark');
+    localStorage.theme = 'dark';
+  } else {
+    document.documentElement.classList.remove('dark');
+    localStorage.theme = 'light';
+  }
+}
+
+function logout() {
+  authStore.logout()
+  router.push("/auth/login");
+}
+
+onMounted(() => {
+  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    isDark.value = true;
+    document.documentElement.classList.add('dark');
+  }
+});
+</script>
+<template>
+  <nav
+    class="sticky top-0 z-50 flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-100">
+
+    <div class="flex items-center gap-6">
+      <nuxt-link to="/" class="text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors duration-200"
+        active-class="text-blue-600 font-bold">
+        Home
+      </nuxt-link>
+    </div>
+
+    <div class="flex items-center gap-4">
+      <button @click="toggleDark" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700">
+        <span v-if="isDark">☀️</span>
+        <span v-else>🌙</span>
+      </button>
+
+      <template v-if="authStore?.token">
+        <label class="py-2 text-sm font-semibold">{{ authStore?.user.name }}</label>
+        <button @click.prevent="logout"
+          class="px-4 py-2 text-sm font-semibold text-red-800 bg-red-100 hover:bg-red-200 rounded-lg transition-all duration-200">
+          Logout
+        </button>
+      </template>
+
+      <template v-else>
+        <nuxt-link to="/auth/login"
+          class="px-5 py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm transition-all">
+          Login
+        </nuxt-link>
+      </template>
+    </div>
+  </nav>
+
+  <main class="max-w-7xl mx-auto">
+    <slot />
+  </main>
+</template>