@makolabs/ripple 0.0.1-dev.76 → 0.0.1-dev.77
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,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { setContext } from 'svelte';
|
|
2
|
+
import { setContext, onMount } from 'svelte';
|
|
3
3
|
import type { MenuBar, NavigationItem, SidebarProps, ParentItem, LinkItem } from '../../index.js';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { isRouteActive } from '../../helper/nav.svelte.js';
|
|
@@ -10,6 +10,24 @@
|
|
|
10
10
|
});
|
|
11
11
|
setContext('menubar', menubar);
|
|
12
12
|
|
|
13
|
+
// Track screen size for responsive behavior
|
|
14
|
+
let isSmallScreen = $state(false);
|
|
15
|
+
|
|
16
|
+
function updateCollapseState() {
|
|
17
|
+
if (typeof window !== 'undefined') {
|
|
18
|
+
isSmallScreen = window.innerWidth < 1280; // xl breakpoint
|
|
19
|
+
if (isSmallScreen && !menubar.collapsed) {
|
|
20
|
+
menubar.collapsed = true;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
onMount(() => {
|
|
26
|
+
updateCollapseState();
|
|
27
|
+
window.addEventListener('resize', updateCollapseState);
|
|
28
|
+
return () => window.removeEventListener('resize', updateCollapseState);
|
|
29
|
+
});
|
|
30
|
+
|
|
13
31
|
function toggle() {
|
|
14
32
|
menubar.collapsed = !menubar.collapsed;
|
|
15
33
|
}
|
|
@@ -46,20 +64,16 @@
|
|
|
46
64
|
|
|
47
65
|
// Reactively compute the active states based on the current route
|
|
48
66
|
const navigationItems = $derived(items.map((item) => processNavigationItem(item)));
|
|
49
|
-
$inspect(navigationItems)
|
|
67
|
+
$inspect(navigationItems);
|
|
50
68
|
|
|
51
69
|
const sidebarClasses = $derived(
|
|
52
|
-
clsx(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
clsx('text-xl font-bold text-white', {
|
|
60
|
-
'xl:block': !menubar.collapsed,
|
|
61
|
-
hidden: menubar.collapsed
|
|
62
|
-
})
|
|
70
|
+
clsx(
|
|
71
|
+
`min-h-screen flex flex-col bg-gradient-to-b from-gray-900 to-default-900 h-full shrink-0`,
|
|
72
|
+
{
|
|
73
|
+
'w-16': menubar.collapsed,
|
|
74
|
+
'w-64': !menubar.collapsed
|
|
75
|
+
}
|
|
76
|
+
)
|
|
63
77
|
);
|
|
64
78
|
|
|
65
79
|
const logoWrapperClasses = $derived(
|
|
@@ -80,12 +94,16 @@
|
|
|
80
94
|
<img src={logo.src} alt={logo.title} class="size-8 shrink-0" />
|
|
81
95
|
{/if}
|
|
82
96
|
{#if logo.title && !menubar.collapsed}
|
|
83
|
-
<h1 class=
|
|
97
|
+
<h1 class="text-xl font-bold text-white">{logo.title}</h1>
|
|
84
98
|
{/if}
|
|
85
99
|
</div>
|
|
86
100
|
<button
|
|
87
101
|
onclick={toggle}
|
|
88
|
-
class="
|
|
102
|
+
class="cursor-pointer text-white {isSmallScreen
|
|
103
|
+
? 'block'
|
|
104
|
+
: menubar.collapsed
|
|
105
|
+
? 'block'
|
|
106
|
+
: 'hidden xl:block'}"
|
|
89
107
|
aria-label="Toggle Sidebar"
|
|
90
108
|
>
|
|
91
109
|
{@render ToggleIcon()}
|