fix(web): sidebar overlap

packages/web/src/components/master-detail-sidebar-layout/ToggleSide.vue

@@ -1,13 +0,0 @@
-<template>
-  <FontAwesomeIcon
-    :icon="['fas', 'bars']"
-    :class="`m-auto ${isMobile?'':'hidden!'}`"
-    @click="toggleSidebar"
-  />
-</template>
-<script setup lang="ts">
-import { useSidebar } from '@memoh/ui'
-
-const { toggleSidebar, isMobile } = useSidebar()
-
-</script>

packages/web/src/components/master-detail-sidebar-layout/index.vue

@@ -1,38 +1,76 @@
 <template>
-  <div class="w-full mx-auto">
-    <div class="model-select">
-      <SidebarProvider   
-        class="min-h-[initial]! flex **:data-[sidebar=sidebar]:bg-transparent absolute inset-0"   
+  <SidebarProvider
+    class="min-h-[initial]! absolute inset-0"
+  >
+    <aside
+      class="hidden md:flex flex-col w-(--sidebar-width) border-r border-border shrink-0 h-full"
+      data-sidebar="sidebar"
+    >
+      <SidebarHeader>
+        <slot name="sidebar-header" />
+      </SidebarHeader>
+      <SidebarContent class="px-2 scrollbar-none">
+        <slot name="sidebar-content" />
+      </SidebarContent>
+      <SidebarFooter v-if="$slots['sidebar-footer']">
+        <slot name="sidebar-footer" />
+      </SidebarFooter>
+    </aside>
+
+    <section class="flex-1 min-w-0 h-full">
+      <slot name="detail" />
+    </section>
+
+    <div class="fixed right-4 top-0 h-12 z-1000 md:hidden flex items-center">
+      <FontAwesomeIcon
+        :icon="['fas', 'bars']"
+        class="cursor-pointer p-2"
+        @click="mobileOpen = !mobileOpen"
+      />
+    </div>
+
+    <Sheet
+      :open="mobileOpen"
+      @update:open="(v: boolean) => mobileOpen = v"
+    >
+      <SheetContent
+        data-sidebar="sidebar"
+        side="left"
+        class="bg-sidebar text-sidebar-foreground w-72 p-0 [&>button]:hidden"
       >
-        <Sidebar class="h-full relative top-0">
+        <SheetHeader class="sr-only">
+          <SheetTitle>Sidebar</SheetTitle>
+          <SheetDescription>Sidebar navigation</SheetDescription>
+        </SheetHeader>
+        <div class="flex h-full w-full flex-col">
           <SidebarHeader>
             <slot name="sidebar-header" />
           </SidebarHeader>
           <SidebarContent class="px-2 scrollbar-none">
             <slot name="sidebar-content" />
           </SidebarContent>
-          <SidebarFooter>
+          <SidebarFooter v-if="$slots['sidebar-footer']">
             <slot name="sidebar-footer" />
           </SidebarFooter>
-        </Sidebar>
-        <section class="flex-1 min-w-0 h-full">
-          <slot name="detail" />
-        </section>
-        <div class="fixed right-4 top-0 h-12 flex z-1000">        
-          <ToggleSide />
         </div>
-      </SidebarProvider>
-    </div>
-  </div>
+      </SheetContent>
+    </Sheet>
+  </SidebarProvider>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import {
-  Sidebar,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  SidebarProvider
+  SidebarProvider,
 } from '@memoh/ui'
-import ToggleSide from './ToggleSide.vue'
+
+const mobileOpen = ref(false)
 </script>