Factor out sidebar.

src/App.vue

@@ -2,8 +2,8 @@
 import { RouterView } from 'vue-router'
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import Navigation from "@/components/Navigation.vue";
 import OverlayBadge from 'primevue/overlaybadge';
+import Sidebar from "@/components/Sidebar.vue";
 
 const route = useRoute();
 const page_title = ref();
@@ -15,23 +15,7 @@ watch(() => route.meta, (newVal, oldVal) => {
 
 <template>
   <div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
-    <aside id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-36 lg:w-28 select-none">
+    <Sidebar></Sidebar>
-      <div class="flex flex-col h-full">
-        <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
-          Designer
-        </div>
-        <Navigation></Navigation>
-        <div class="mt-auto">
-          <hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
-          <a class="m-4 nav-item">
-            <img
-              alt="user avatar"
-              src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" />
-            <span class="font-medium inline lg:hidden">Amy Elsner</span>
-          </a>
-        </div>
-      </div>
-    </aside>
     <main class="min-h-screen flex flex-col relative flex-auto">
       <header class="flex justify-between items-center px-4 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
         <div class="flex">

src/assets/nav-items.css

@@ -0,0 +1,6 @@
+.nav-item {
+  @apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
+  span {
+    @apply font-medium inline text-base lg:text-xs lg:block;
+  }
+}

src/components/Navigation.vue

@@ -39,13 +39,8 @@
   </nav>
 </template>
 <style scoped>
+@import "@/assets/nav-items.css";
 .nav-icon {
   @apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
 }
-.nav-item {
-  @apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
-  span {
-    @apply font-medium inline text-base lg:text-xs lg:block;
-  }
-}
 </style>

src/components/Sidebar.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import Navigation from "@/components/Navigation.vue";
+</script>
+
+<template>
+  <aside id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-36 lg:w-28 select-none">
+    <div class="flex flex-col h-full">
+      <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
+        Designer
+      </div>
+      <Navigation></Navigation>
+      <div class="mt-auto">
+        <hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
+        <a class="m-4 nav-item">
+          <img
+            alt="user avatar"
+            src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" />
+          <span class="font-medium inline lg:hidden">Amy Elsner</span>
+        </a>
+      </div>
+    </div>
+  </aside>
+</template>
+<style scoped>
+@import "@/assets/nav-items.css";
+</style>