@lavalogic/scoria 0.40.4 → 0.40.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<svelte:options runes />
|
|
2
2
|
|
|
3
3
|
<script lang="ts">
|
|
4
|
+
import { page } from '$app/state';
|
|
4
5
|
import { Colour } from '../../scss/colours.js';
|
|
5
6
|
import { Size } from '../../Types/Internal/Size.js';
|
|
6
7
|
import Icon from '../Icon.svelte';
|
|
@@ -9,6 +10,21 @@
|
|
|
9
10
|
import ServiceMenuItem from './ServiceMenuItem.svelte';
|
|
10
11
|
|
|
11
12
|
const { title, items, icon }: NavServiceMenuListProps = $props();
|
|
13
|
+
|
|
14
|
+
// Only the single most-specific item is active: the longest item path that
|
|
15
|
+
// the current URL matches. Without this a nested route (e.g.
|
|
16
|
+
// /reports/manage-reports) would also light up its parent item (/reports).
|
|
17
|
+
const activePath = $derived.by(() => {
|
|
18
|
+
const pathname = page.url.pathname;
|
|
19
|
+
let best: string | null = null;
|
|
20
|
+
for (const { item } of items) {
|
|
21
|
+
const path = item.path;
|
|
22
|
+
if (path && pathname.includes(path) && (best === null || path.length > best.length)) {
|
|
23
|
+
best = path;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return best;
|
|
27
|
+
});
|
|
12
28
|
</script>
|
|
13
29
|
|
|
14
30
|
<div
|
|
@@ -35,7 +51,10 @@
|
|
|
35
51
|
role="list"
|
|
36
52
|
>
|
|
37
53
|
{#each items as { item } (item.label)}
|
|
38
|
-
<ServiceMenuItem
|
|
54
|
+
<ServiceMenuItem
|
|
55
|
+
{item}
|
|
56
|
+
selected={item.path != null && item.path === activePath}
|
|
57
|
+
/>
|
|
39
58
|
{/each}
|
|
40
59
|
</div>
|
|
41
60
|
</div>
|