UPD: TopBar above sidebars

9bd94f04 · Robert Kossessa · f8059832 · 9bd94f04 · 9bd94f04 · 9bd94f04
Commit 9bd94f04 authored 3 months ago by Robert Kossessa
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
-<html lang="">
+<html lang="" h-screen>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NETVS</title>
  </head>
-  <body>
-    <div id="app"></div>
+  <body h-screen>
+    <div id="app" flex flex-col h-screen></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
 <template>
+  <TopBar />
  <NavSidebar>
    <TransactionSidebar>
-      <TopBar /> <!-- TODO: Put top bar above sidebars (requires sidebar modification, as they're intended to be screen height) -->
-      <main>
+      <main min-h-0 overflow-scroll>
        <RouterView />
      </main>
    </TransactionSidebar>

--- a/src/components/NavSidebar.vue
+++ b/src/components/NavSidebar.vue
 <template>
  <SidebarProvider cookie-name="nav-sidebar">
    <Sidebar collapsible="icon">
-      <SidebarHeader b-b h-14>
-        <h1 font-bold text-xl>
-          nextvs
-        </h1>
-      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>

--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
-<script setup lang="ts">
-// TODO: https://www.npmjs.com/package/eslint-plugin-no-relative-import-paths
-</script>
-
 <template>
-  <div flex gap-2 justify-center p-2 h-14 b-b-gray-2>
-    <GlobalSearch />
-    <UserNav />
-    <DarkModeToggle />
+  <div h-14 b-b bg-background>
+    <div flex gap-2 justify-center p-2>
+      <GlobalSearch />
+      <UserNav />
+      <DarkModeToggle />
+    </div>
  </div>
 </template>
--- a/src/components/ui/sidebar/Sidebar.vue
+++ b/src/components/ui/sidebar/Sidebar.vue
@@ -58,7 +58,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
    <!-- This is what handles the sidebar gap on desktop  -->
    <div
      :class="cn(
-        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
+        'duration-200 relative w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
        'group-data-[collapsible=offcanvas]:w-0',
        'group-data-[side=right]:rotate-180',
        variant === 'floating' || variant === 'inset'
@@ -68,7 +68,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
    />
    <div
      :class="cn(
-        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
+        'duration-200 fixed inset-y-0 z-10 hidden top-14 w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
        side === 'left'
          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',

--- a/src/components/ui/sidebar/SidebarInset.vue
+++ b/src/components/ui/sidebar/SidebarInset.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
  <main
    :class="cn(
-      'relative flex min-h-svh flex-1 flex-col bg-background',
+      'relative flex flex-1 flex-col bg-background',
      'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
      props.class,
    )"

--- a/src/components/ui/sidebar/SidebarProvider.vue
+++ b/src/components/ui/sidebar/SidebarProvider.vue
@@ -73,7 +73,7 @@ provideSidebarContext({
        '--sidebar-width': SIDEBAR_WIDTH,
        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
      }"
-      :class="cn('group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
+      :class="cn('group/sidebar-wrapper flex w-full min-h-0 text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar', props.class)"
    >
      <slot />
    </div>

--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
 <template>
-  <div>
+  <div v-for="i in 100" :key="i">
    Home Content
  </div>
 </template>