fix: Navbar transition

Author: shinokada

.changeset/breezy-beers-drive.md

@@ -0,0 +1,5 @@
+---
+'svelte-5-ui-lib': patch
+---
+
+fix: Navbar transition

src/lib/nav/NavUl.svelte

@@ -12,8 +12,11 @@
   let { children, class: ulclass, ...attributes }: Props = $props();
 
   let breakPoint: navbarType['breakPoint'];
+  let navStatus: navbarType['navStatus'];
   const context = getContext<navbarType>('navbarContext');
   breakPoint = context.breakPoint ?? 'md';
+  navStatus = context.navStatus;
+
   const ulBreaks = {
     md: 'md:mt-0 md:flex-row md:space-x-8 md:border-0 md:p-0 md:dark:bg-gray-900',
     lg: 'lg:mt-0 lg:flex-row lg:space-x-8 lg:border-0 lg:p-0 lg:dark:bg-gray-900',

src/lib/nav/Navbar.svelte

@@ -12,8 +12,7 @@
     children: Snippet;
     toggleNav?: () => void;
     closeNav?: () => void;
-    openMainMenu?: boolean;
-    navStatus?: boolean;
+    navStatus?: boolean | undefined;
     fluid?: boolean;
     brand?: Snippet;
     breakPoint?: navbarType['breakPoint'];
@@ -29,7 +28,6 @@
     children,
     toggleNav,
     closeNav = () => {},
-    openMainMenu = true,
     navStatus,
     fluid,
     brand,
@@ -44,7 +42,8 @@
   }: Props = $props();
 
   setContext<navbarType>('navbarContext', {
-    breakPoint: breakPoint,
+    navStatus,
+    breakPoint,
     activeClass: twMerge(
       'block py-2 px-3 text-white bg-primary-700 rounded   dark:text-white',
       activeClass
@@ -98,39 +97,47 @@
     {#if brand}
       {@render brand()}
     {/if}
-    {#if openMainMenu}
-      <button
-        onclick={toggleNav}
-        type="button"
-        class={btnCls}
-        aria-controls="navbar-default"
+    <button
+      onclick={toggleNav}
+      type="button"
+      class={btnCls}
+      aria-controls="navbar-default"
+    >
+      <span class="sr-only">Open main menu</span>
+      <svg
+        class="h-5 w-5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 17 14"
       >
-        <span class="sr-only">Open main menu</span>
-        <svg
-          class="h-5 w-5"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 17 14"
-        >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M1 1h15M1 7h15M1 13h15"
-          />
-        </svg>
-      </button>
-    {/if}
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M1 1h15M1 7h15M1 13h15"
+        />
+      </svg>
+    </button>
+    {#if navStatus}
     <div
-      class="{navDisplay} {divChildrenCls}"
+      class="block {divChildrenCls}"
       transition:slide={slideParams}
       role="button"
       tabindex="0"
     >
       {@render children()}
     </div>
+    {:else}
+      <div
+        class="hidden {divChildrenCls}"
+        role="button"
+        tabindex="0"
+      >
+        {@render children()}
+      </div>
+    {/if}
   </div>
 </nav>
 

src/lib/types.ts

@@ -152,6 +152,7 @@ export interface ButtonClassesTypes {
 }
 
 export type navbarType = {
+  navStatus: boolean | undefined;
   breakPoint: 'md' | 'lg' | 'xl' | 'xxl';
   activeClass: string | undefined | null;
   nonActiveClass: string | undefined | null;