fix: Sidebar activeUrl. docs: Navbar examples

Author: shinokada

src/lib/nav/NavUl.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext, setContext } from "svelte";
   import type { navbarType } from "$lib/types";
-  import { writable, type Writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import { type NavUlProps as Props, navUl } from ".";
 
   let { children, activeUrl = '', class: className, ...restProps }: Props = $props();

src/lib/sidebar/Sidebar.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { fly } from "svelte/transition";
+  import { writable } from 'svelte/store';
   import { sineIn } from "svelte/easing";
   import { type SidebarProps as Props, sidebar, type SidebarCtxType } from ".";
 
-  let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, class: className, ...restProps }: Props = $props();
+  let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = '', class: className, ...restProps }: Props = $props();
 
   const breakpointValues = {
     sm: 640,
@@ -16,6 +17,12 @@
 
   let isLargeScreen = $state(false);
 
+  const activeUrlStore = writable('');
+  setContext('activeUrl', activeUrlStore);
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  });
+
   function checkScreenSize() {
     isLargeScreen = window.innerWidth >= breakpointValues[breakpoint];
   }

src/lib/sidebar/SidebarItem.svelte

@@ -3,20 +3,26 @@
   import { twMerge } from "tailwind-merge";
   import { type SidebarCtxType, type SidebarItemProps as Props } from "./";
 
-  let { iconSlot, subtext, href, label, spanClass = "ms-3", activeClass, nonActiveClass, aClass, active, class: className, ...restProps }: Props = $props();
+  let { iconSlot, subtext, href, label, spanClass = "ms-3", activeClass, nonActiveClass, aClass, class: className, ...restProps }: Props = $props();
 
   const context = getContext<SidebarCtxType>("sidebarContext") ?? {};
-  let currentUrl = $state("");
+  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
+
+  let sidebarUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    sidebarUrl = value;
+  });
+  let active = $state();
 
   $effect(() => {
-    currentUrl = window.location.pathname;
+    active = sidebarUrl ? href === sidebarUrl : false;
   });
 
-  let aCls = $derived((active ?? currentUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
+  let aCls = $derived((active ?? sidebarUrl === href) ? (activeClass ?? context.activeClass) : (nonActiveClass ?? context.nonActiveClass));
 </script>
 
 <li class={className}>
-  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={active ?? currentUrl === href} class={twMerge(aCls, aClass)}>
+  <a onclick={context.closeSidebar} {...restProps} {href} aria-current={active ?? sidebarUrl === href} class={twMerge(aCls, aClass)}>
     {#if iconSlot}
       {@render iconSlot()}
     {/if}

src/lib/sidebar/index.ts

@@ -17,6 +17,7 @@ type SidebarCtxType = {
   nonActiveClass?: string;
   isSingle?: boolean;
   selected?: Writable<object>;
+  activeUrl?: string;
 };
 
 type BreakpointType = "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
@@ -38,6 +39,7 @@ interface SidebarProps extends HTMLAttributes<HTMLElement> {
   transition?: TransitionFunc;
   backdrop?: boolean;
   backdropClass?: string;
+  activeUrl?: string;
 }
 
 interface SidebarButtonProps extends HTMLButtonAttributes {
@@ -95,7 +97,6 @@ interface SidebarItemProps extends HTMLAnchorAttributes {
   activeClass?: string;
   nonActiveClass?: string;
   aClass?: string;
-  active?: boolean;
 }
 
 export { Sidebar, sidebar, type SidebarProps, SidebarDropdownWrapper, sidebardropdownwrapper, type SidebarDropdownWrapperProps, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarCtxType, SidebarButton, sidebarbutton, type SidebarButtonProps, SidebarCta, sidebarcta, type SidebarCtaProps, SidebarBrand, sitebarbrand, type SidebarBrandProps, type BreakpointType, type PosisionType };

src/routes/+layout.svelte

@@ -75,7 +75,7 @@
   </Navbar>
 </header>
 <div class="lg:flex" id="sidebar">
-  <Sidebar isSingle {isOpen} {closeSidebar} breakpoint="lg" activeClass="flex items-center p-1 text-base font-normal text-white dark:hover:text-white hover:text-gray-900 bg-primary-700 dark:bg-primary-700 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" nonActiveClass="p-1 hover:bg-gray-200" divClass="dark:bg-gray-900 bg-gray-50" class="top-[62px] h-screen dark:bg-gray-900">
+  <Sidebar {activeUrl} isSingle {isOpen} {closeSidebar} breakpoint="lg" activeClass="flex items-center p-1 text-base font-normal text-white dark:hover:text-white hover:text-gray-900 bg-primary-700 dark:bg-primary-700 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" nonActiveClass="p-1 hover:bg-gray-200" divClass="dark:bg-gray-900 bg-gray-50" class="top-[62px] h-screen dark:bg-gray-900">
     <SidebarGroup>
       <SidebarDropdownWrapper label="GETTING STARTED" isOpen={pageStatus} svgClass="me-4" btnClass="p-1">
         <SidebarItem label="About" href="/pages/about" />

src/routes/components/navbar/examples/BackgroundColor.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { Navbar, NavBrand, NavUl, NavLi, uiHelpers } from "$lib";
+  import { page } from '$app/stores';
+  let activeUrl = $state($page.url.pathname);
   let nav = uiHelpers();
   let navStatus = $state(false);
   let toggleNav = nav.toggle;
   let closeNav = nav.close;
   $effect(() => {
     navStatus = nav.isOpen;
+    activeUrl = $page.url.pathname;
   });
 </script>
 
@@ -16,7 +19,7 @@
     </NavBrand>
   {/snippet}
 
-  <NavUl>
+  <NavUl {activeUrl}>
     <NavLi href="/">Home</NavLi>
     <NavLi href="/components/navbar">Navbar</NavLi>
     <NavLi href="/components/footer">Footer</NavLi>

src/routes/components/navbar/examples/Breakpoint.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { Navbar, NavBrand, NavUl, NavLi, uiHelpers } from "$lib";
+  import { page } from '$app/stores';
+  let activeUrl = $state($page.url.pathname);
   let nav = uiHelpers();
   let navStatus = $state(false);
   let toggleNav = nav.toggle;
   let closeNav = nav.close;
   $effect(() => {
     navStatus = nav.isOpen;
+    activeUrl = $page.url.pathname;
   });
 </script>
 
@@ -16,7 +19,7 @@
     </NavBrand>
   {/snippet}
 
-  <NavUl>
+  <NavUl {activeUrl}>
     <NavLi href="/">Home</NavLi>
     <NavLi href="/components/navbar">Navbar</NavLi>
     <NavLi href="/components/footer">Footer</NavLi>

src/routes/components/navbar/examples/CtaButton.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { Navbar, NavBrand, NavUl, NavLi, uiHelpers, Button, NavHamburger } from "$lib";
+  import { page } from '$app/stores';
+  let activeUrl = $state($page.url.pathname);
   let nav = uiHelpers();
   let navStatus = $state(false);
   let toggleNav = nav.toggle;
   $effect(() => {
     navStatus = nav.isOpen;
+    activeUrl = $page.url.pathname;
   });
 </script>
 
@@ -20,7 +23,7 @@
       <NavHamburger {toggleNav} />
     </div>
   {/snippet}
-  <NavUl class="order-1">
+  <NavUl class="order-1" {activeUrl}>
     <NavLi href="/">Home</NavLi>
     <NavLi href="/components/navbar">Navbar</NavLi>
     <NavLi href="/components/footer">Footer</NavLi>

src/routes/components/navbar/examples/Default.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { Navbar, NavBrand, NavUl, NavLi, uiHelpers } from "$lib";
+  import { page } from '$app/stores';
+  let activeUrl = $state($page.url.pathname);
   let nav = uiHelpers();
   let navStatus = $state(false);
   let toggleNav = nav.toggle;
   let closeNav = nav.close;
   $effect(() => {
     navStatus = nav.isOpen;
+    activeUrl = $page.url.pathname;
   });
 </script>
 
@@ -16,7 +19,7 @@
     </NavBrand>
   {/snippet}
 
-  <NavUl>
+  <NavUl {activeUrl}>
     <NavLi href="/">Home</NavLi>
     <NavLi href="/components/navbar">Navbar</NavLi>
     <NavLi href="/components/footer">Footer</NavLi>

src/routes/components/navbar/examples/Dropdown.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { Navbar, NavBrand, NavUl, NavLi, uiHelpers, Dropdown, DropdownUl, DropdownLi } from "$lib";
+  import { page } from '$app/stores';
+  let activeUrl = $state($page.url.pathname);
   import { ChevronDownOutline } from "flowbite-svelte-icons";
   // for navbar
   let nav = uiHelpers();
@@ -13,6 +15,7 @@
   $effect(() => {
     navStatus = nav.isOpen;
     dropdownStatus = dropdown.isOpen;
+    activeUrl = $page.url.pathname;
   });
 </script>
 
@@ -24,7 +27,7 @@
       </NavBrand>
     {/snippet}
 
-    <NavUl>
+    <NavUl {activeUrl}>
       <NavLi href="/">Home</NavLi>
       <NavLi href="/components/navbar">Navbar</NavLi>
       <NavLi onclick={dropdown.toggle} class="cursor-pointer">