Skip to content

Commit 00a12af

Browse files
shinokadashinokada
committed
fix: Nav activeUrl
1 parent 1c73f3b commit 00a12af

File tree

13 files changed

+55
-42
lines changed

13 files changed

+55
-42
lines changed

‎src/app.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<html lang="en" class="dark">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<!-- Google fonts -->
8-
<link rel="preconnect" href="https://fonts.googleapis.com" />
9-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
1111

1212
%sveltekit.head%
1313
</head>

‎src/lib/nav/NavLi.svelte‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,24 @@
1010
const context = getContext<navbarType>("navbarContext");
1111
breakPoint = context.breakPoint ?? "md";
1212
closeNav = context.closeNav ?? closeNav;
13-
let currentUrl = $state("");
14-
let isActive = $derived(currentUrl === href);
13+
const activeUrlStore = getContext('activeUrl') as { subscribe: (callback: (value: string) => void) => void };
14+
15+
let navUrl = $state('');
16+
activeUrlStore.subscribe((value) => {
17+
navUrl = value;
18+
});
19+
20+
// let currentUrl = $state();
21+
let isActive = $derived(navUrl ? href === navUrl : false);
1522
$effect(() => {
16-
currentUrl = window.location.pathname;
23+
$inspect('navUrl: ', navUrl);
1724
});
1825
1926
const { base, link } = $derived(navLi({ active: isActive, breakPoint }));
2027
</script>
2128

2229
<li class={base({ class: className })}>
23-
<a {href} onclick={closeNav} {...restProps} aria-current={currentUrl === href} class={link({ class: aClass })}>
30+
<a {href} onclick={closeNav} {...restProps} aria-current={isActive} class={link({ class: aClass })}>
2431
{@render children()}
2532
</a>
2633
</li>

‎src/lib/nav/NavUl.svelte‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
<script lang="ts">
2-
import { getContext } from "svelte";
2+
import { getContext, setContext } from "svelte";
33
import type { navbarType } from "$lib/types";
4+
import { writable, type Writable } from 'svelte/store';
45
import { type NavUlProps as Props, navUl } from ".";
56
6-
let { children, class: className, ...restProps }: Props = $props();
7+
let { children, activeUrl = '', class: className, ...restProps }: Props = $props();
78
89
let breakPoint: navbarType["breakPoint"];
910
const context = getContext<navbarType>("navbarContext");
1011
breakPoint = context.breakPoint ?? "md";
1112
1213
const base = $derived(navUl({ breakPoint, className }));
14+
const activeUrlStore = writable('');
15+
$effect(() => {
16+
activeUrlStore.set(activeUrl);
17+
})
18+
setContext('activeUrl', activeUrlStore);
1319
</script>
1420

1521
<ul {...restProps} class={base}>

‎src/lib/nav/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ interface NavBrandProps extends HTMLAnchorAttributes {
3939
interface NavUlProps extends HTMLAttributes<HTMLUListElement> {
4040
children: Snippet;
4141
class?: string;
42+
activeUrl?: string;
4243
}
4344

4445
interface NavLiProps extends HTMLAnchorAttributes {

‎src/routes/+layout.svelte‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,14 @@
1515
let navStatus = $state(false);
1616
let toggleNav = nav.toggle;
1717
let closeNav = nav.close;
18-
let currentUrl = $state($page.url.pathname);
19-
const hasPath = (key: string) => currentUrl.includes(key);
18+
let activeUrl = $state($page.url.pathname);
19+
const hasPath = (key: string) => activeUrl.includes(key);
2020
let pageStatus = $derived(hasPath("pages"));
2121
let componentStatus = $derived(hasPath("components"));
22-
// $inspect("currentUrl: ", currentUrl);
23-
// $inspect("pageStatus: ", pageStatus);
24-
// $inspect("componentStatus: ", componentStatus);
2522
2623
$effect(() => {
2724
navStatus = nav.isOpen;
28-
currentUrl = $page.url.pathname;
25+
activeUrl = $page.url.pathname;
2926
isOpen = sidebarUi.isOpen;
3027
// pageStatus = hasPath("pages");
3128
// componentStatus = hasPath("components");
@@ -40,6 +37,8 @@
4037
4138
$effect(() => {
4239
metaTags = $page.data.pageMetaTags ? deepMerge($page.data.layoutMetaTags, $page.data.pageMetaTags) : data.layoutMetaTags;
40+
activeUrl = $page.url.pathname;
41+
$inspect("activeUrl in layout: ", activeUrl);
4342
});
4443
</script>
4544

@@ -67,7 +66,7 @@
6766
<Darkmode class="hidden sm:block" />
6867
</div>
6968
{/snippet}
70-
<NavUl class="md:space-x-6 lg:space-x-8">
69+
<NavUl class="md:space-x-6 lg:space-x-8" {activeUrl}>
7170
<NavLi href="/pages/coverage">Coverage</NavLi>
7271
<NavLi href="/pages/about">About</NavLi>
7372
<NavLi class="sm:hidden" href="https://github.com/shinokada/svelte-5-ui-lib">Repo</NavLi>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,9 @@
105105
<H2>Interactive Avatar Bilder</H2>
106106
<CodeWrapper>
107107
<div class="mb-4 flex h-36 justify-center">
108-
<Avatar src="/images/profile-picture-1.webp" cornerStyle={isRounded ? "rounded" : undefined} {border} {stacked} class={avatarClass} size={avatarSize} />
109-
<Avatar src="/images/profile-picture-2.webp" cornerStyle={isRounded ? "rounded" : undefined} {border} {stacked} class={avatarClass} size={avatarSize} />
110-
<Avatar src="/images/profile-picture-3.webp" cornerStyle={isRounded ? "rounded" : undefined} {border} {stacked} class={avatarClass} size={avatarSize} />
108+
<Avatar src="/images/profile-picture-1.webp" alt="Profile picture 1" cornerStyle={isRounded ? "rounded" : undefined} {border} {stacked} class={avatarClass} size={avatarSize} />
109+
<Avatar src="/images/profile-picture-2.webp" alt="Profile picture 2" cornerStyle={isRounded ? "rounded" : undefined} {border} {stacked} class={avatarClass} size={avatarSize} />
110+
<Avatar src="/images/profile-picture-3.webp" alt="Profile picture 3" cornerStyle={isRounded ? "rounded" : undefined} {border} {stacked} class={avatarClass} size={avatarSize} />
111111
</div>
112112
<div class="mb-4 flex flex-wrap space-x-4">
113113
<Label class="mb-4 w-full font-bold">Size</Label>

‎src/routes/components/avatar/examples/AvatarText.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</script>
44

55
<div class="flex items-center space-x-4 rtl:space-x-reverse">
6-
<Avatar src="/images/profile-picture-1.webp" cornerStyle="rounded" />
6+
<Avatar src="/images/profile-picture-1.webp" alt="Profile picture 1" cornerStyle="rounded" />
77
<div class="space-y-1 font-medium dark:text-white">
88
<div>Jese Leos</div>
99
<div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>

‎src/routes/components/avatar/examples/AvatarWithTooltip.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
</script>
44

55
<div class="flex justify-center gap-8">
6-
<Avatar id="jese" cornerStyle="rounded" src="/images/profile-picture-1.webp" />
6+
<Avatar id="jese" cornerStyle="rounded" alt="Jese Leos" src="/images/profile-picture-1.webp" />
77
<Tooltip triggeredBy="#jese">Jese Leos</Tooltip>
8-
<Avatar id="robert" cornerStyle="rounded" src="/images/profile-picture-2.webp" />
8+
<Avatar id="robert" cornerStyle="rounded" alt="Robert Gouth" src="/images/profile-picture-2.webp" />
99
<Tooltip triggeredBy="#robert">Robert Gouth</Tooltip>
10-
<Avatar id="bonnie" cornerStyle="rounded" src="/images/profile-picture-3.webp" />
10+
<Avatar id="bonnie" cornerStyle="rounded" alt="Bonnie Green" src="/images/profile-picture-3.webp" />
1111
<Tooltip triggeredBy="#bonnie">Bonnie Green</Tooltip>
1212
</div>

‎src/routes/components/avatar/examples/DotIndicator.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
</script>
44

55
<div class="flex justify-center gap-4">
6-
<Avatar src="/images/profile-picture-3.webp" dot={{ color: "red" }} />
7-
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: "top-right", color: "red" }} cornerStyle="rounded" />
8-
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: "bottom-right", color: "green" }} />
9-
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: "bottom-right" }} cornerStyle="rounded" />
6+
<Avatar src="/images/profile-picture-3.webp" alt="Profile picture 1" dot={{ color: "red" }} />
7+
<Avatar src="/images/profile-picture-3.webp" alt="Profile picture 2" dot={{ placement: "top-right", color: "red" }} cornerStyle="rounded" />
8+
<Avatar src="/images/profile-picture-5.webp" alt="Profile picture 3" dot={{ placement: "bottom-right", color: "green" }} />
9+
<Avatar src="/images/profile-picture-5.webp" alt="Profile picture 4" dot={{ placement: "bottom-right" }} cornerStyle="rounded" />
1010
<Avatar dot={{}} />
1111
</div>

‎src/routes/components/avatar/examples/Placeholder.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
</script>
44

55
<div class="flex justify-center gap-4">
6-
<Avatar />
7-
<Avatar cornerStyle="rounded" />
8-
<Avatar border />
9-
<Avatar cornerStyle="rounded" border />
6+
<Avatar alt="placeholder" />
7+
<Avatar cornerStyle="rounded" alt="rounded placeholder" />
8+
<Avatar border alt="bordered placeholder" />
9+
<Avatar cornerStyle="rounded" border alt="rounded bordered placeholder" />
1010
</div>

0 commit comments

Comments
 (0)