From 06ad60e917dcabf826444ad403efa0d559f1527d Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Fri, 22 Nov 2024 19:43:37 -0500
Subject: [PATCH] Factor out TopBar.

---
 src/App.vue               | 82 +-----------------------------------
 src/components/TopBar.vue | 87 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 89 insertions(+), 80 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4a21749..7dd4952 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,83 +1,14 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import OverlayBadge from 'primevue/overlaybadge';
 import Sidebar from "@/components/Sidebar.vue";
-
-const route = useRoute();
-const page_title = ref();
-
-watch(() => route.meta, (newVal, oldVal) => {
-  page_title.value = newVal.title;
-})
+import TopBar from "@/components/TopBar.vue";
 </script>
 
 <template>
   <div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
     <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">
-          <a
-            v-styleclass="{
-                            selector: '#app-sidebar-5',
-                            enterFromClass: 'hidden',
-                            enterActiveClass: 'animate-fadeinleft',
-                            leaveToClass: 'hidden',
-                            leaveActiveClass: 'animate-fadeoutleft',
-                            hideOnOutsideClick: true
-                        }"
-            class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-2"
-          >
-            <i class="pi pi-bars text-4xl" />
-          </a>
-          <span class="title">{{ page_title }}</span>
-        </div>
-        <a
-          v-styleclass="{
-                        selector: '@next',
-                        enterFromClass: 'hidden',
-                        enterActiveClass: 'animate-fadein',
-                        leaveToClass: 'hidden',
-                        leaveActiveClass: 'animate-fadeout',
-                        hideOnOutsideClick: true
-                    }"
-          class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100"
-        >
-          <i class="pi pi-ellipsis-v text-2xl" />
-        </a>
-        <ul
-          class="list-none p-0 m-0 hidden lg:flex lg:items-center select-none lg:flex-row bg-surface-0 dark:bg-surface-950 border lg:border-0 border-surface right-0 top-full z-10 shadow lg:shadow-none absolute lg:static"
-          id="header-icons"
-        >
-          <li>
-            <a>
-              <i class="pi pi-inbox mr-2 lg:mr-0" />
-              <span class="block lg:hidden font-medium">Inbox</span>
-            </a>
-          </li>
-          <li>
-            <a>
-              <OverlayBadge severity="danger" class="mr-2 lg:mr-0">
-                <i class="pi pi-bell" />
-              </OverlayBadge>
-              <span class="block lg:hidden font-medium">Notifications</span>
-            </a>
-          </li>
-          <li class="border-t border-surface lg:border-t-0">
-            <a class="flex p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors">
-              <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-4 lg:mr-0 w-8 h-8" />
-              <div class="block lg:hidden">
-                <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
-                <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </header>
+      <TopBar></TopBar>
       <div class="p-0 sm:p-4">
         <div class="border-2 border-dashed border-surface rounded-border bg-surface-0 dark:bg-surface-950 flex-auto">
           <RouterView />
@@ -88,13 +19,4 @@ watch(() => route.meta, (newVal, oldVal) => {
 </template>
 
 <style scoped lang="scss">
-.title {
-  font-size: 160%;
-}
-#header-icons li a {
-  @apply flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors;
-  i {
-    @apply text-base lg:!text-2xl leading-none;
-  }
-}
 </style>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index e69de29..a28de11 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import OverlayBadge from "primevue/overlaybadge";
+
+import { useRoute } from 'vue-router';
+const route = useRoute();
+const page_title = ref();
+
+watch(() => route.meta, (newVal, oldVal) => {
+  page_title.value = newVal.title;
+})
+</script>
+<template>
+  <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">
+      <a
+        v-styleclass="{
+                            selector: '#app-sidebar-5',
+                            enterFromClass: 'hidden',
+                            enterActiveClass: 'animate-fadeinleft',
+                            leaveToClass: 'hidden',
+                            leaveActiveClass: 'animate-fadeoutleft',
+                            hideOnOutsideClick: true
+                        }"
+        class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 mr-4 mt-2"
+      >
+        <i class="pi pi-bars text-4xl" />
+      </a>
+      <span class="title">{{ page_title }}</span>
+    </div>
+    <a
+      v-styleclass="{
+                        selector: '@next',
+                        enterFromClass: 'hidden',
+                        enterActiveClass: 'animate-fadein',
+                        leaveToClass: 'hidden',
+                        leaveActiveClass: 'animate-fadeout',
+                        hideOnOutsideClick: true
+                    }"
+      class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100"
+    >
+      <i class="pi pi-ellipsis-v text-2xl" />
+    </a>
+    <ul
+      class="list-none p-0 m-0 hidden lg:flex lg:items-center select-none lg:flex-row bg-surface-0 dark:bg-surface-950 border lg:border-0 border-surface right-0 top-full z-10 shadow lg:shadow-none absolute lg:static"
+      id="header-icons"
+    >
+      <li>
+        <a>
+          <i class="pi pi-inbox mr-2 lg:mr-0" />
+          <span class="block lg:hidden font-medium">Inbox</span>
+        </a>
+      </li>
+      <li>
+        <a>
+          <OverlayBadge severity="danger" class="mr-2 lg:mr-0">
+            <i class="pi pi-bell" />
+          </OverlayBadge>
+          <span class="block lg:hidden font-medium">Notifications</span>
+        </a>
+      </li>
+      <li class="border-t border-surface lg:border-t-0">
+        <a class="flex p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors">
+          <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-4 lg:mr-0 w-8 h-8" />
+          <div class="block lg:hidden">
+            <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
+            <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </header>
+</template>
+
+<style scoped>
+.title {
+  font-size: 160%;
+}
+#header-icons li a {
+  @apply flex p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer duration-150 transition-colors;
+  i {
+    @apply text-base lg:!text-2xl leading-none;
+  }
+}
+</style>