Fix divider when bottom is empty

appwrite · Jan 16, 2025 · e2c54c3 · e2c54c3
1 parent ee61f74
commit e2c54c3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/v2/pink-sb/src/lib/bottom-sheet/Default.svelte b/v2/pink-sb/src/lib/bottom-sheet/Default.svelte
@@ -4,6 +4,7 @@
     export let isOpen = false;
     export let useSlots = false;
     export let sheetContainerRef: undefined | HTMLDivElement;
+    export let showDivider = true;
     let isDisappearing: null | boolean = null;
 
     function setIfDisappearing(isOpenState: boolean) {
@@ -35,7 +36,7 @@
             <div class="content">
                 <slot name="top" />
             </div>
-            <Divider />
+            {#if showDivider}<Divider />{/if}
             <div class="content">
                 <slot name="bottom" />
             </div>
@@ -127,7 +128,7 @@
         animation: slideOut 0.2s ease-in-out forwards;
     }
 
-    .content {
+    .content:has(:nth-child(2)) {
         padding: var(--gap-xxs, 4px);
     }
 </style>
diff --git a/v2/pink-sb/src/lib/bottom-sheet/SheetMenu.svelte b/v2/pink-sb/src/lib/bottom-sheet/SheetMenu.svelte
@@ -6,6 +6,7 @@
     export let isOpen = false;
     let sheetContainerRef: HTMLDivElement;
     let activeMenu = menu;
+    let showDivider = true;
 
     function navigateSubMenu(subMenu: SheetMenu) {
         if (sheetContainerRef) {
@@ -20,9 +21,11 @@
         } else {
             activeMenu = subMenu;
         }
+        showDivider = activeMenu.bottom !== undefined;
     }
 
     function restoreMenu(isOpenState: boolean) {
+        showDivider = activeMenu.bottom !== undefined;
         if (!isOpenState) {
             setTimeout(() => {
                 activeMenu = menu;
@@ -33,7 +36,9 @@
     $: restoreMenu(isOpen);
 </script>
 
-<BottomSheet.Default bind:isOpen useSlots={true} bind:sheetContainerRef>
+<BottomSheet.Default bind:isOpen useSlots={true} bind:sheetContainerRef bind:showDivider>
     <div slot="top"><SheetMenuBlock menu={activeMenu.top} {navigateSubMenu} /></div>
-    <div slot="bottom"><SheetMenuBlock menu={activeMenu.bottom} {navigateSubMenu} /></div>
+    <div slot="bottom">
+        {#if activeMenu.bottom}<SheetMenuBlock menu={activeMenu.bottom} {navigateSubMenu} />{/if}
+    </div>
 </BottomSheet.Default>