Skip to content

Commit 39c6fb3

Browse files
shinokadashinokada
committed
fix: Dropdown and DropdownLi for activeUrl
1 parent 2393acf commit 39c6fb3

16 files changed

+90
-31
lines changed

‎src/lib/dropdown/Dropdown.svelte‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,18 @@
22
import { type DropdownProps as Props, dropdown } from "./";
33
import { fly } from "svelte/transition";
44
import type { ParamsType } from "$lib/types";
5+
import { setContext } from 'svelte';
6+
import { writable } from 'svelte/store';
57
6-
let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params, transition = fly, ...restProps }: Props = $props();
8+
let { children, dropdownStatus = $bindable(), closeDropdown, class: className, backdropClass, params, transition = fly, activeUrl = '', ...restProps }: Props = $props();
79
810
const { base, backdrop } = $derived(dropdown());
11+
const activeUrlStore = writable('');
12+
setContext('activeUrl', activeUrlStore);
13+
14+
$effect(() => {
15+
activeUrlStore.set(activeUrl ?? '');
16+
})
917
</script>
1018

1119
<!-- Dropdown menu -->

‎src/lib/dropdown/DropdownLi.svelte‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
<script lang="ts">
2+
import { getContext } from 'svelte';
23
import { type DropdownLiProps as Props, dropdownli } from "./";
34
45
let { aClass, children, href, activeClass, liClass, ...restProps }: Props = $props();
56
6-
let currentUrl = $state("");
7+
const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
8+
let sidebarUrl = $state('');
9+
activeUrlStore.subscribe((value) => {
10+
// console.log('value: ', value)
11+
sidebarUrl = value;
12+
});
13+
let active = $state(false);
714
$effect(() => {
8-
currentUrl = window.location.pathname;
15+
active = sidebarUrl ? href === sidebarUrl : false;
916
});
1017
1118
const { anchor, activeAnchor } = $derived(dropdownli());
1219
</script>
1320

1421
<li class={liClass}>
1522
{#if href}
16-
<a {href} {...restProps} class={currentUrl === href ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
23+
<a {href} {...restProps} class={active ? activeAnchor({ class: activeClass }) : anchor({ class: aClass })}>
1724
{@render children()}
1825
</a>
1926
{:else}

‎src/lib/dropdown/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
2020
backdropClass?: string;
2121
params?: ParamsType;
2222
transition?: TransitionFunc;
23+
activeUrl?: string;
2324
}
2425

2526
interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {

‎src/routes/components/dropdown/+page.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@
1414
import { blur, fly, slide, scale } from "svelte/transition";
1515
import type { FlyParams, BlurParams, SlideParams, ScaleParams } from "svelte/transition";
1616
import { sineIn, linear } from "svelte/easing";
17+
import { page } from '$app/stores';
18+
let activeUrl = $state($page.url.pathname);
19+
$effect(() => {
20+
activeUrl = $page.url.pathname;
21+
});
1722
1823
let dropdownDividerHeaderFooter = uiHelpers();
1924
let dropdownDividerHeaderFooterStatus = $state(false);
@@ -136,7 +141,7 @@
136141
<ChevronDownOutline class="ms-2 h-5 w-5 text-white dark:text-white" />
137142
</Button>
138143
<div class="relative h-96">
139-
<Dropdown${propsString} dropdownStatus={dropdownAStatus} closeDropdown={closeDropdownA} class="absolute -left-[150px] top-[40px]">${headerContent}
144+
<Dropdown {activeUrl}${propsString} dropdownStatus={dropdownAStatus} closeDropdown={closeDropdownA} class="absolute -left-[150px] top-[40px]">${headerContent}
140145
<DropdownUl>
141146
<DropdownLi href="/">Dashboard</DropdownLi>${dividerContent}
142147
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
@@ -182,7 +187,7 @@
182187
<ChevronDownOutline class="ms-2 h-5 w-5 text-white dark:text-white" />
183188
</Button>
184189
<div class="relative h-96">
185-
<Dropdown dropdownStatus={dropdownDividerHeaderFooterStatus} closeDropdown={closeDropdownDividerHeaderFooter} transition={currentTransition.transition} params={currentTransition.params} class="absolute -left-[150px] top-[40px]">
190+
<Dropdown {activeUrl} dropdownStatus={dropdownDividerHeaderFooterStatus} closeDropdown={closeDropdownDividerHeaderFooter} transition={currentTransition.transition} params={currentTransition.params} class="absolute -left-[150px] top-[40px]">
186191
{#if headerStatus}
187192
<DropdownHeader>
188193
<div>Bonnie Green</div>

‎src/routes/components/dropdown/examples/ActiveLink.svelte‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
import { sineIn } from "svelte/easing";
33
import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from "$lib";
44
import { ChevronDownOutline } from "flowbite-svelte-icons";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
7+
$effect(() => {
8+
activeUrl = $page.url.pathname;
9+
});
510
let dropdownB = uiHelpers();
611
let dropdownBStatus = $state(false);
712
let closeDropdownB = dropdownB.close;
@@ -16,7 +21,7 @@
1621
<ChevronDownOutline class="ms-2 h-5 w-5 text-white dark:text-white" />
1722
</Button>
1823
<div class="relative">
19-
<Dropdown dropdownStatus={dropdownBStatus} closeDropdown={closeDropdownB} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -left-[150px] top-[40px]">
24+
<Dropdown {activeUrl} dropdownStatus={dropdownBStatus} closeDropdown={closeDropdownB} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -left-[150px] top-[40px]">
2025
<DropdownUl>
2126
<DropdownLi href="/">Dashboard</DropdownLi>
2227
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>

‎src/routes/components/dropdown/examples/AvatarWithName.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<script lang="ts">
22
import { sineIn } from "svelte/easing";
33
import { Button, Dropdown, DropdownHeader, DropdownFooter, DropdownUl, DropdownLi, uiHelpers, Avatar } from "$lib";
4+
import { page } from '$app/stores';
5+
let activeUrl = $state($page.url.pathname);
6+
$effect(() => {
7+
activeUrl = $page.url.pathname;
8+
});
49
let dropdownAvatar = uiHelpers();
510
let dropdownAvatarStatus = $state(false);
611
let closeDropdownAvatar = dropdownAvatar.close;
@@ -15,15 +20,15 @@
1520
Bonnie Green
1621
</Button>
1722
<div class="relative">
18-
<Dropdown dropdownStatus={dropdownAvatarStatus} closeDropdown={closeDropdownAvatar} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -left-[160px] top-[50px]">
23+
<Dropdown {activeUrl} dropdownStatus={dropdownAvatarStatus} closeDropdown={closeDropdownAvatar} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -left-[160px] top-[50px]">
1924
<DropdownHeader class="px-4 py-2">
2025
<span class="block text-sm text-gray-900 dark:text-white">Bonnie Green</span>
2126
<span class="block truncate text-sm font-medium">[email protected]</span>
2227
</DropdownHeader>
2328
<DropdownUl>
2429
<DropdownLi href="/">Dashboard</DropdownLi>
2530
<DropdownLi href="/components/drawer">Drawer</DropdownLi>
26-
<DropdownLi href="/components/footer">Footer</DropdownLi>
31+
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
2732
<DropdownLi href="/components">Alert</DropdownLi>
2833
</DropdownUl>
2934
<DropdownFooter class="px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600">Sign out</DropdownFooter>

‎src/routes/components/dropdown/examples/MenuIcon.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
import { sineIn } from "svelte/easing";
33
import { Dropdown, DropdownUl, DropdownLi, uiHelpers } from "$lib";
44
import { DotsVerticalOutline } from "flowbite-svelte-icons";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
7+
$effect(() => {
8+
activeUrl = $page.url.pathname;
9+
});
510
let dropdownIcon = uiHelpers();
611
let dropdownIconStatus = $state(false);
712
let closeDropdownIcon = dropdownIcon.close;
@@ -13,11 +18,11 @@
1318
<div class="flex h-40 items-start justify-center">
1419
<DotsVerticalOutline onclick={dropdownIcon.toggle} class="dots-menu dark:text-white" />
1520
<div class="relative">
16-
<Dropdown dropdownStatus={dropdownIconStatus} closeDropdown={closeDropdownIcon} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -left-[90px] top-[20px]">
21+
<Dropdown {activeUrl} dropdownStatus={dropdownIconStatus} closeDropdown={closeDropdownIcon} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -left-[90px] top-[20px]">
1722
<DropdownUl>
1823
<DropdownLi href="/">Dashboard</DropdownLi>
1924
<DropdownLi href="/components/drawer">Drawer</DropdownLi>
20-
<DropdownLi href="/components/footer">Footer</DropdownLi>
25+
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
2126
<DropdownLi href="/components">Alert</DropdownLi>
2227
</DropdownUl>
2328
</Dropdown>

‎src/routes/components/dropdown/examples/PlacementBottom.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
import { sineIn } from "svelte/easing";
33
import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from "$lib";
44
import { ChevronDownOutline } from "flowbite-svelte-icons";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
7+
$effect(() => {
8+
activeUrl = $page.url.pathname;
9+
});
510
let dropdownBottom = uiHelpers();
611
let dropdownBottomStatus = $state(false);
712
let closeDropdownBottom = dropdownBottom.close;
@@ -13,11 +18,11 @@
1318
<div class="flex h-[360px] items-start justify-center">
1419
<Button onclick={dropdownBottom.toggle}>Dropdown bottom<ChevronDownOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button>
1520
<div class="relative">
16-
<Dropdown dropdownStatus={dropdownBottomStatus} closeDropdown={closeDropdownBottom} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -left-[190px] top-[40px]">
21+
<Dropdown {activeUrl} dropdownStatus={dropdownBottomStatus} closeDropdown={closeDropdownBottom} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -left-[190px] top-[40px]">
1722
<DropdownUl>
1823
<DropdownLi href="/">Dashboard</DropdownLi>
1924
<DropdownLi href="/components/drawer">Drawer</DropdownLi>
20-
<DropdownLi href="/components/footer">Footer</DropdownLi>
25+
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
2126
<DropdownLi href="/components">Alert</DropdownLi>
2227
</DropdownUl>
2328
</Dropdown>

‎src/routes/components/dropdown/examples/PlacementLeft.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
import { sineIn } from "svelte/easing";
33
import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from "$lib";
44
import { ChevronLeftOutline } from "flowbite-svelte-icons";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
7+
$effect(() => {
8+
activeUrl = $page.url.pathname;
9+
});
510
let dropdownLeft = uiHelpers();
611
let dropdownLeftStatus = $state(false);
712
let closeDropdownLeft = dropdownLeft.close;
@@ -13,11 +18,11 @@
1318
<div class="flex h-[160px] items-center justify-center">
1419
<Button onclick={dropdownLeft.toggle}><ChevronLeftOutline class="me-2 h-6 w-6 text-white dark:text-white" />Dropdown left</Button>
1520
<div class="relative">
16-
<Dropdown dropdownStatus={dropdownLeftStatus} closeDropdown={closeDropdownLeft} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -top-[80px] right-[175px]">
21+
<Dropdown {activeUrl} dropdownStatus={dropdownLeftStatus} closeDropdown={closeDropdownLeft} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -top-[80px] right-[175px]">
1722
<DropdownUl>
1823
<DropdownLi href="/">Dashboard</DropdownLi>
1924
<DropdownLi href="/components/drawer">Drawer</DropdownLi>
20-
<DropdownLi href="/components/footer">Footer</DropdownLi>
25+
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
2126
<DropdownLi href="/components">Alert</DropdownLi>
2227
</DropdownUl>
2328
</Dropdown>

‎src/routes/components/dropdown/examples/PlacementRight.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
import { sineIn } from "svelte/easing";
33
import { Button, Dropdown, DropdownUl, DropdownLi, uiHelpers } from "$lib";
44
import { ChevronRightOutline } from "flowbite-svelte-icons";
5+
import { page } from '$app/stores';
6+
let activeUrl = $state($page.url.pathname);
7+
$effect(() => {
8+
activeUrl = $page.url.pathname;
9+
});
510
let dropdownRight = uiHelpers();
611
let dropdownRightStatus = $state(false);
712
let closeDropdownRight = dropdownRight.close;
@@ -13,11 +18,11 @@
1318
<div class="flex h-[160px] items-center justify-center">
1419
<Button onclick={dropdownRight.toggle}>Dropdown right<ChevronRightOutline class="ms-2 h-6 w-6 text-white dark:text-white" /></Button>
1520
<div class="relative">
16-
<Dropdown dropdownStatus={dropdownRightStatus} closeDropdown={closeDropdownRight} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -top-[80px] left-[10px]">
21+
<Dropdown {activeUrl} dropdownStatus={dropdownRightStatus} closeDropdown={closeDropdownRight} params={{ y: 0, duration: 200, easing: sineIn }} class="absolute -top-[80px] left-[10px]">
1722
<DropdownUl>
1823
<DropdownLi href="/">Dashboard</DropdownLi>
1924
<DropdownLi href="/components/drawer">Drawer</DropdownLi>
20-
<DropdownLi href="/components/footer">Footer</DropdownLi>
25+
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
2126
<DropdownLi href="/components">Alert</DropdownLi>
2227
</DropdownUl>
2328
</Dropdown>

0 commit comments

Comments
 (0)