WIP: Place topbar above sidebars

this time using margins, requires no modification of the original sidebar components

src/App.vue

@@ -6,7 +6,7 @@ import './app.css'
   <TopBar />
   <NavSidebar>
     <TransactionSidebar>
-      <main min-h-0 overflow-scroll>
+      <main mt-topbar min-h-0 overflow-scroll>
         <RouterView />
       </main>
     </TransactionSidebar>

src/components/NavSidebar.vue

@@ -30,7 +30,7 @@ const isMobile = useMediaQuery('(max-width: 768px)')
 <template>
   <SidebarProvider cookie-name="nav-sidebar" keyboard-shortcut="m">
     <Sidebar collapsible="icon">
-      <SidebarContent>
+      <SidebarContent mt-topbar>
         <SidebarGroup>
           <SidebarMenu>
             <template v-for="item in navItems" :key="item.title">

src/components/TopBar.vue

 <template>
-  <div h-14 b-b bg-background>
+  <div h-topbar fixed z-20 w-full b-b bg-background>
     <div flex justify-center gap-2 p-2>
       <GlobalSearch />
       <UserNav />

src/components/TransactionSidebar.vue

@@ -4,7 +4,7 @@
       <slot />
     </SidebarInset>
     <Sidebar collapsible="icon" side="right">
-      <SidebarHeader>
+      <SidebarHeader mt-topbar>
         Placeholder
       </SidebarHeader>
       <SidebarContent>

uno.config.ts

@@ -2,6 +2,8 @@ import { defineConfig, presetAttributify, presetUno } from 'unocss'
 import { presetAnimations } from 'unocss-preset-animations'
 import { presetShadcn } from 'unocss-preset-shadcn'
 
+const TOPBAR_HEIGHT = '3.5rem'
+
 export default defineConfig({
   presets: [
     presetUno(),
@@ -23,6 +25,10 @@ export default defineConfig({
     // Required for shadcn-vue's Sidebar
     spacing: {
       4: '1rem',
+      topbar: TOPBAR_HEIGHT,
+    },
+    height: {
+      topbar: TOPBAR_HEIGHT,
     },
   },
 })