make usable admin panel

src/app/pages/admin.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="min-h-screen">
+    <div class="container mx-auto p-4">
+      <div class="flex">
+        <!-- Sidebar -->
+        <div class="w-64 bg-white dark:bg-neutral-700 rounded-lg p-4 mr-4">
+          <h2 class="text-xl font-bold dark:text-neutral-200 mb-4">
+            Admin Panel
+          </h2>
+          <ul class="space-y-2">
+            <li
+              v-for="(item, index) in menuItems"
+              :key="index"
+              :class="{ 'bg-gray-700': activeMenuItem?.id === item.id }"
+              class="font-medium dark:text-neutral-200 p-2 rounded cursor-pointer hover:bg-red-800 transition-colors duration-200"
+              @click="router.push(`/admin/${item.id}`)"
+            >
+              {{ item.name }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Main Content -->
+        <div
+          class="flex-1 bg-white dark:text-neutral-200 dark:bg-neutral-700 rounded-lg p-6"
+        >
+          <h1 class="text-3xl font-bold mb-6">{{ activeMenuItem?.name }}</h1>
+          <NuxtPage />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const authStore = useAuthStore();
+authStore.update();
+
+const router = useRouter();
+const route = useRoute();
+
+const menuItems = [
+  { id: 'user', name: 'User' },
+  { id: 'clients', name: 'Clients' },
+  { id: 'server', name: 'Server' },
+];
+
+const activeMenuItem = computed(() => {
+  return menuItems.find((item) => route.path === `/admin/${item.id}`);
+});
+</script>

src/app/pages/admin/clients.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="space-y-6">
+    <div class="flex items-center space-x-4">
+      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
+      <div>
+        <h3 class="text-xl font-semibold">John Doe</h3>
+        <p class="text-gray-400">john.doe@example.com</p>
+      </div>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-1">Username</label>
+        <input
+          v-model="username"
+          type="text"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Email</label>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const username = ref();
+const email = ref();
+</script>

src/app/pages/admin/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div>Admin Area</div>
+  <div class="space-y-6">This is a test</div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"></script>
-const authStore = useAuthStore();
-authStore.update();
-</script>

src/app/pages/admin/server.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="space-y-6">
+    <div class="flex items-center space-x-4">
+      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
+      <div>
+        <h3 class="text-xl font-semibold">John Doe</h3>
+        <p class="text-gray-400">john.doe@example.com</p>
+      </div>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-1">Username</label>
+        <input
+          v-model="username"
+          type="text"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Email</label>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const username = ref();
+const email = ref();
+</script>

src/app/pages/admin/user.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="space-y-6">
+    <div class="flex items-center space-x-4">
+      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
+      <div>
+        <h3 class="text-xl font-semibold">John Doe</h3>
+        <p class="text-gray-400">john.doe@example.com</p>
+      </div>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-1">Username</label>
+        <input
+          v-model="username"
+          type="text"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Email</label>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const username = ref();
+const email = ref();
+</script>

src/server/middleware/auth.ts

@@ -14,7 +14,7 @@ export default defineEventHandler(async (event) => {
     }
   }
 
-  if (url.pathname === '/admin') {
+  if (url.pathname.startsWith('/admin')) {
     if (!session.data.userId) {
       return sendRedirect(event, '/login', 302);
     }