feat: Added sidebar

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>