fix: BottomNav and BottomNavItem activeUrl

Author: shinokada

src/lib/bottom-navigation/BottomNav.svelte

@@ -1,19 +1,26 @@
 <script lang="ts">
   import { setContext } from "svelte";
   import { twMerge } from "tailwind-merge";
+  import { writable } from 'svelte/store';
   import { type BottomNavProps as Props, type BottomNavContextType, bottomNav } from "./index";
 
-  let { children, header, position = "fixed", navType = "default", outerClass, innerClass, activeClass, ...restProps }: Props = $props();
+  let { children, header, position = "fixed", navType = "default", outerClass, innerClass, activeClass, activeUrl = '', ...restProps }: Props = $props();
 
   const activeCls = twMerge("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass);
 
+  const activeUrlStore = writable('');
+  setContext('activeUrl', activeUrlStore);
   setContext("navType", navType);
   setContext<BottomNavContextType>("bottomNavType", { activeClass: activeCls });
 
   // $inspect('position: ', position);
   const { outer, inner } = bottomNav({ position, navType });
   const outerCls = $derived(outer({ class: outerClass }));
   const innerCls = $derived(inner({ class: innerClass }));
+
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  })
 </script>
 
 <div {...restProps} class={outerCls}>

src/lib/bottom-navigation/BottomNavItem.svelte

@@ -7,15 +7,20 @@
 
   const navType: BottomNavVariantType = getContext("navType");
   const context = getContext<BottomNavContextType>("bottomNavType") ?? {};
-  // console.log("context", context);
-  let currentUrl = $state("");
+  
   let active: boolean = $state(false);
+
+  const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = $state('');
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
   // let btnCls: string = $state('');
   // let spanCls: string = $state('');
   const { base, span } = bottomNavItem({ navType, appBtnPosition });
   $effect(() => {
-    currentUrl = window.location.pathname;
-    active = href === currentUrl;
+    active = navUrl ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
   });
 
   let btnCls = $derived(twMerge(base({ class: btnClass }), active && (activeClass ?? context.activeClass)));

src/routes/components/bottom-navigation/examples/ApplicationBar.svelte

@@ -1,13 +1,19 @@
 <script>
   import { BottomNav, BottomNavItem, Skeleton, ImagePlaceholder } from "$lib";
   import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid, PlusOutline } from "flowbite-svelte-icons";
+  import { page } from '$app/stores';
+
+  let activeUrl = $state($page.url.pathname);
+  $effect(() => {
+    activeUrl = $page.url.pathname;
+  })
 </script>
 
 <div class="relative flex flex-col p-6">
   <Skeleton class="py-4" />
   <ImagePlaceholder class="pb-20" />
 
-  <BottomNav position="absolute" navType="application" innerClass="grid-cols-5">
+  <BottomNav {activeUrl} position="absolute" navType="application" innerClass="grid-cols-5">
     <BottomNavItem btnName="Home" appBtnPosition="left" btnClass="static">
       <HomeSolid id="home" class="mb-1 h-6 w-6 text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-500" />
     </BottomNavItem>

src/routes/components/bottom-navigation/examples/IconColor.svelte

@@ -3,18 +3,19 @@
   import { AdjustmentsVerticalSolid, HomeSolid, WalletSolid, UserCircleSolid } from "flowbite-svelte-icons";
   let svgClass = "mb-1 text-pink-500 dark:text-pink-400 group-hover:text-pink-600 dark:group-hover:text-pink-500";
   let svgActiveClass = "mb-1 text-green-500 dark:text-green-500 group-hover:text-green-700 dark:group-hover:text-green-700";
-  let activeUrl = $state("");
+  import { page } from '$app/stores';
 
-  $effect(() => {
-    activeUrl = window.location.pathname;
-  });
+let activeUrl = $state($page.url.pathname);
+$effect(() => {
+  activeUrl = $page.url.pathname;
+})
 </script>
 
 <div class="relative flex flex-col p-6">
   <Skeleton class="py-4" />
   <ImagePlaceholder class="pb-20" />
 
-  <BottomNav position="absolute" innerClass="grid-cols-4">
+  <BottomNav {activeUrl} position="absolute" innerClass="grid-cols-4">
     <BottomNavItem btnName="Home" href="/">
       <HomeSolid class={activeUrl === "/" ? svgActiveClass : svgClass} />
     </BottomNavItem>

src/routes/components/bottom-navigation/examples/LinkAndActiveClass.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
   import { Skeleton, ImagePlaceholder, BottomNav, BottomNavItem } from "$lib";
   import { AdjustmentsVerticalSolid, HomeSolid, WalletSolid, UserCircleSolid } from "flowbite-svelte-icons";
+  import { page } from '$app/stores';
+
+let activeUrl = $state($page.url.pathname);
+$effect(() => {
+  activeUrl = $page.url.pathname;
+})
 </script>
 
 <div class="relative flex flex-col p-6">
   <Skeleton class="py-4" />
   <ImagePlaceholder class="pb-20" />
 
-  <BottomNav position="absolute" innerClass="grid-cols-4">
+  <BottomNav {activeUrl} position="absolute" innerClass="grid-cols-4">
     <BottomNavItem btnName="Home" href="/">
       <HomeSolid />
     </BottomNavItem>

src/routes/components/bottom-navigation/examples/OverwritingActiveClass.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
   import { Skeleton, ImagePlaceholder, BottomNav, BottomNavItem } from "$lib";
   import { AdjustmentsVerticalSolid, HomeSolid, WalletSolid, UserCircleSolid } from "flowbite-svelte-icons";
+  import { page } from '$app/stores';
+
+let activeUrl = $state($page.url.pathname);
+$effect(() => {
+  activeUrl = $page.url.pathname;
+})
 </script>
 
 <div class="relative flex flex-col p-6">
   <Skeleton class="py-4" />
   <ImagePlaceholder class="pb-20" />
 
-  <BottomNav position="absolute" innerClass="grid-cols-4" activeClass="font-bold text-green-500 hover:text-green-900 dark:hover:text-green-700 dark:text-green-300">
+  <BottomNav {activeUrl} position="absolute" innerClass="grid-cols-4" activeClass="font-bold text-green-500 hover:text-green-900 dark:hover:text-green-700 dark:text-green-300">
     <BottomNavItem btnName="Home" href="/">
       <HomeSolid />
     </BottomNavItem>