added beginning of whitelist system

web/components/layout/Navbar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="bg-neutral-800 border-b border-b-gray-700 flex items-center px-5">
+    <h1 class="text-primary text-2xl font-bold">Polarcraft</h1>
+    <Button outline class="ml-auto" @click="logout">Logout</Button>
+  </div>
+</template>
+
+<script setup>
+const logout = async () => {
+  try {
+    await useFetch('/api/auth/logout')
+
+    navigateTo('/login')
+  } catch (err) {
+    console.log(err)
+    alert(err.statusMessage)
+  }
+}
+</script>

web/components/layout/Sidebar.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="bg-neutral-800 text-gray-300 px-2 pt-5 pb-14 flex flex-col">
+    <NuxtLink to="/" class="sidebar-item">
+      <Icon size="1.5em" name="ph:house" class="mr-3" />
+      Home
+    </NuxtLink>
+    <NuxtLink to="/whitelist" class="sidebar-item">
+      <Icon size="1.5em" name="ph:shield-check" class="mr-3" />
+      Whitelist
+    </NuxtLink>
+    <NuxtLink to="/" class="sidebar-item">
+      <Icon size="1.5em" name="ph:users-three" class="mr-3" />
+      Team
+    </NuxtLink>
+    <NuxtLink to="/" class="sidebar-item">
+      <Icon size="1.5em" name="ph:storefront" class="mr-3" />
+      Player stores
+    </NuxtLink>
+    <NuxtLink to="/" class="sidebar-item">
+      <Icon size="1.5em" name="ph:storefront" class="mr-3" />
+      Donation store
+    </NuxtLink>
+    <div v-if="user && user.admin" class="mt-auto">
+      <h2 class="ml-2 text-gray-400">Adminstration</h2>
+      <NuxtLink to="/admin/users" class="sidebar-item">
+        <Icon size="1.5em" name="ph:users-three" class="mr-3" />
+        Users
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const user = useState('user')
+</script>