feat: Added sidebar

webv2/components/body/Sidebar.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="h-screen fixed top-0 left-0 w-56 flex flex-col bg-gray-800 border-r border-gray-700 px-2 gap-y-1">
+    <h1 class="font-bold text-primary-500 text-2xl text-center my-5" to="/">Polarcraft S5</h1>
+    <NuxtLink class="text-lg flex items-center w-full rounded bg-black hover:bg-opacity-20 bg-opacity-0 hover:cursor-pointer p-2">
+      <Icon size="1.5em" name="heroicons:chart-pie" class="mr-2" />
+      Dashboard
+    </NuxtLink>
+    <NuxtLink class="text-lg flex items-center w-full rounded bg-black hover:bg-opacity-20 bg-opacity-0 hover:cursor-pointer p-2">
+      <Icon size="1.5em" name="heroicons:chart-pie" class="mr-2" />
+      Dashboard
+    </NuxtLink>
+  </div>
+</template>

webv2/layouts/default.vue

@@ -1,5 +1,33 @@
 <template>
-  <div>
-    <NuxtPage />
+  <div class="flex min-h-screen w-full overflow-y-auto">
+    <Transition>
+      <BodySidebar v-if="showSidebar" />
+    </Transition>
+    <div class="w-full px-5 transition-all duration-300 ease-in-out" :class="{ 'ms-56': showSidebar }">
+      <div class="mx-auto w-full max-w-[92rem]">
+        <div class="my-5 text-xl font-bold">
+          <Icon size="1.6em" :name="!showSidebar ? 'heroicons:bars-3-center-left' : 'heroicons:chevron-left'" class="text-primary-500 mr-3 hover:cursor-pointer" @click="showSidebar = !showSidebar" />
+          {{ route.meta.title.split(' | ')[0] }}
+        </div>
+        <NuxtPage class="" />
+      </div>
+    </div>
   </div>
 </template>
+
+<script setup>
+const route = useRoute()
+const showSidebar = ref(false)
+</script>
+
+<style>
+.v-enter-active,
+.v-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.v-leave-to,
+.v-enter-from {
+  transform: translateX(-100%);
+}
+</style>

webv2/nuxt.config.ts

@@ -8,7 +8,8 @@ export default defineNuxtConfig({
     plugins: ['~/server/index.ts']
   },
   modules: [
-    '@nuxthq/ui'
+    '@nuxthq/ui',
+    'nuxt-icon'
   ],
   runtimeConfig: {
     discordClientId: '',

webv2/package-lock.json

@@ -19,7 +19,8 @@
         "@types/node": "^18",
         "eslint": "^8.41.0",
         "eslint-plugin-tailwindcss": "^3.12.1",
-        "nuxt": "^3.5.2"
+        "nuxt": "^3.5.2",
+        "nuxt-icon": "^0.4.1"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1243,6 +1244,21 @@
         "local-pkg": "^0.4.3"
       }
     },
+    "node_modules/@iconify/vue": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
+      "integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -9287,6 +9303,16 @@
         }
       }
     },
+    "node_modules/nuxt-icon": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.4.1.tgz",
+      "integrity": "sha512-QTpxewOgLfdPx2uwHhoU5XQ4AtQ9N31ifbwnbn4Sx5NM+W2slNfGq1eEKmUl0CpSUAhGEdKbzd5CjA3c7dVa1Q==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/vue": "^4.1.1",
+        "@nuxt/kit": "^3.5.0"
+      }
+    },
     "node_modules/nypm": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.2.0.tgz",
@@ -14396,6 +14422,15 @@
         "local-pkg": "^0.4.3"
       }
     },
+    "@iconify/vue": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
+      "integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "^2.0.0"
+      }
+    },
     "@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -20362,6 +20397,16 @@
         "vue-router": "^4.2.2"
       }
     },
+    "nuxt-icon": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.4.1.tgz",
+      "integrity": "sha512-QTpxewOgLfdPx2uwHhoU5XQ4AtQ9N31ifbwnbn4Sx5NM+W2slNfGq1eEKmUl0CpSUAhGEdKbzd5CjA3c7dVa1Q==",
+      "dev": true,
+      "requires": {
+        "@iconify/vue": "^4.1.1",
+        "@nuxt/kit": "^3.5.0"
+      }
+    },
     "nypm": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.2.0.tgz",

webv2/package.json

@@ -16,7 +16,8 @@
     "@types/node": "^18",
     "eslint": "^8.41.0",
     "eslint-plugin-tailwindcss": "^3.12.1",
-    "nuxt": "^3.5.2"
+    "nuxt": "^3.5.2",
+    "nuxt-icon": "^0.4.1"
   },
   "dependencies": {
     "@types/jsonwebtoken": "^9.0.2",

webv2/pages/index.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
-    Index
+    <div>
+      {{ user.username }}
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
-  middleware: ['auth']
+  middleware: ['auth'],
+  title: 'Dashboard | Polarcraft'
 })
 
 const user = useState('user')