fix: make header sticky

Author: qwerzl

app/app.vue

@@ -26,6 +26,8 @@ useHead({
 
 <template>
   <ConfigProvider :use-id="useIdFunction">
+    <NuxtLoadingIndicator />
+    <VitePwaManifest />
     <div v-if="!isClerkLoaded || isEnspireLoading" class="absolute z-100 h-screen w-screen bg-background">
       <div class="h-full w-full flex flex-col items-center justify-center space-y-6">
         <div class="flex justify-center space-x-1">
@@ -39,8 +41,6 @@ useHead({
     </div>
     <div>
       <NuxtLayout class="z-10">
-        <NuxtLoadingIndicator />
-        <VitePwaManifest />
         <NuxtPage />
       </NuxtLayout>
     </div>

app/components/custom/sidebar.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
 import type { AllClubs } from '@@/types/api/user/all_clubs'
-import {
-  ChevronRight,
-  ChevronsUpDown,
-} from 'lucide-vue-next'
 import { useClerk, useUser } from 'vue-clerk'
 
 const { user } = useUser()
@@ -270,7 +266,7 @@ const sidebarData = ref({
       </SidebarFooter>
       <SidebarRail />
     </Sidebar>
-    <SidebarInset>
+    <SidebarInset class="h-full flex">
       <slot />
     </SidebarInset>
   </SidebarProvider>

app/layouts/default.vue

@@ -19,14 +19,14 @@ if (clubs.value) {
 
 <template>
   <CustomSidebar>
-    <header class="group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 h-16 flex shrink-0 items-center gap-2 transition-[width,height] ease-linear">
+    <header class="group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 sticky top-0 z-20 h-14 flex shrink-0 items-center gap-2 bg-background transition-[width,height] ease-linear">
       <div class="flex items-center gap-2 px-4">
         <SidebarTrigger class="-ml-1" />
         <Separator orientation="vertical" class="mr-2 h-4" />
         <CustomBreadcrumb />
       </div>
     </header>
-    <ScrollArea class="h-full w-full px-4 pt-8 lg:px-8">
+    <ScrollArea class="z-10 w-full flex-1 px-4 pt-6 lg:px-8">
       <div class="pb-24">
         <main>
           <slot />