From 221ada41e28d69b309f2fcd271930cbb57388a4a Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Fri, 22 Nov 2024 19:38:29 -0500
Subject: [PATCH] Factor out sidebar.

---
 src/App.vue                   | 20 ++------------------
 src/assets/nav-items.css      |  6 ++++++
 src/components/Navigation.vue |  7 +------
 src/components/Sidebar.vue    | 26 ++++++++++++++++++++++++++
 src/components/TopBar.vue     |  0
 5 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/nav-items.css
 create mode 100644 src/components/TopBar.vue

diff --git a/src/App.vue b/src/App.vue
index 9d46699..4a21749 100644
--- a/src/App.vue
+++ b/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">
-      <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>
+    <Sidebar></Sidebar>
     <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">
diff --git a/src/assets/nav-items.css b/src/assets/nav-items.css
new file mode 100644
index 0000000..53a0057
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 5f64d8d..7707ae3 100644
--- a/src/components/Navigation.vue
+++ b/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>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index e69de29..03b3dbf 100644
--- a/src/components/Sidebar.vue
+++ b/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>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
new file mode 100644
index 0000000..e69de29