@makolabs/ripple 0.0.1-dev.37 → 0.0.1-dev.39
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.
|
@@ -20,12 +20,6 @@
|
|
|
20
20
|
|
|
21
21
|
const menubar: MenuBar = getContext('menubar');
|
|
22
22
|
|
|
23
|
-
$effect(() => {
|
|
24
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
25
|
-
menubar.collapsed;
|
|
26
|
-
resetIsActive();
|
|
27
|
-
});
|
|
28
|
-
|
|
29
23
|
const navGroupClasses = $derived(
|
|
30
24
|
cn(
|
|
31
25
|
`items-center gap-x-3 p-1.5 rounded-md w-full cursor-pointer text-default-400 text-sm/6 text-left font-medium`,
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import NavGroup from './NavGroup.svelte';
|
|
3
|
-
import NavItem from './NavItem.svelte';
|
|
4
2
|
import { setContext } from 'svelte';
|
|
5
3
|
import type { MenuBar, NavigationItem, SidebarProps, ParentItem, LinkItem } from '../../index.js';
|
|
6
4
|
import clsx from 'clsx';
|
|
7
|
-
import { cn } from '../../helper/cls.js';
|
|
8
5
|
import { isRouteActive } from '../../helper/nav.svelte.js';
|
|
9
6
|
|
|
10
7
|
let { items = [], logo }: SidebarProps = $props();
|
|
@@ -27,7 +24,7 @@
|
|
|
27
24
|
|
|
28
25
|
if ('children' in item) {
|
|
29
26
|
const parentItem = item as ParentItem;
|
|
30
|
-
let anyChildActive =
|
|
27
|
+
let anyChildActive = parentItem.active;
|
|
31
28
|
|
|
32
29
|
const updatedChildren = parentItem.children.map((child) => {
|
|
33
30
|
const childActive = isRouteActive(child.href, true);
|
|
@@ -36,7 +33,6 @@
|
|
|
36
33
|
}
|
|
37
34
|
return { ...child, active: childActive };
|
|
38
35
|
});
|
|
39
|
-
|
|
40
36
|
return { ...parentItem, active: anyChildActive, children: updatedChildren };
|
|
41
37
|
}
|
|
42
38
|
|
|
@@ -50,80 +46,119 @@
|
|
|
50
46
|
|
|
51
47
|
// Reactively compute the active states based on the current route
|
|
52
48
|
const navigationItems = $derived(items.map((item) => processNavigationItem(item)));
|
|
49
|
+
$inspect(navigationItems)
|
|
53
50
|
|
|
54
51
|
const sidebarClasses = $derived(
|
|
55
|
-
clsx(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
'w-16': menubar.collapsed,
|
|
60
|
-
'w-16 xl:w-72 shrink-0': !menubar.collapsed
|
|
61
|
-
}
|
|
62
|
-
)
|
|
52
|
+
clsx(`min-h-screen flex flex-col bg-gradient-to-b from-gray-900 to-default-900 h-full`, {
|
|
53
|
+
'w-16': menubar.collapsed,
|
|
54
|
+
'w-16 xl:w-64 shrink-0': !menubar.collapsed
|
|
55
|
+
})
|
|
63
56
|
);
|
|
64
57
|
|
|
65
58
|
const logoTextClasses = $derived(
|
|
66
|
-
clsx('text-xl font-
|
|
59
|
+
clsx('text-xl font-bold text-white', {
|
|
60
|
+
'xl:block': !menubar.collapsed,
|
|
61
|
+
hidden: menubar.collapsed
|
|
62
|
+
})
|
|
67
63
|
);
|
|
68
64
|
|
|
69
65
|
const logoWrapperClasses = $derived(
|
|
70
|
-
clsx(
|
|
71
|
-
'
|
|
72
|
-
|
|
66
|
+
clsx(
|
|
67
|
+
'flex items-center h-16 flex-shrink-0 px-4 bg-gradient-to-r from-gray-900 to-default-900/50 border-b border-white/10',
|
|
68
|
+
{
|
|
69
|
+
'justify-between': !menubar.collapsed,
|
|
70
|
+
'justify-center': menubar.collapsed
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
73
|
);
|
|
74
74
|
</script>
|
|
75
75
|
|
|
76
76
|
<div class={sidebarClasses}>
|
|
77
77
|
<div class={logoWrapperClasses}>
|
|
78
78
|
<div class="flex items-center gap-x-1">
|
|
79
|
-
{#if logo.src}
|
|
79
|
+
{#if logo.src && !menubar.collapsed}
|
|
80
80
|
<img src={logo.src} alt={logo.title} class="size-8 shrink-0" />
|
|
81
81
|
{/if}
|
|
82
|
-
{#if logo.title}
|
|
82
|
+
{#if logo.title && !menubar.collapsed}
|
|
83
83
|
<h1 class={logoTextClasses}>{logo.title}</h1>
|
|
84
84
|
{/if}
|
|
85
85
|
</div>
|
|
86
|
-
<button
|
|
86
|
+
<button
|
|
87
|
+
onclick={toggle}
|
|
88
|
+
class="hidden cursor-pointer text-white xl:block"
|
|
89
|
+
aria-label="Toggle Sidebar"
|
|
90
|
+
>
|
|
87
91
|
{@render ToggleIcon()}
|
|
88
92
|
</button>
|
|
89
93
|
</div>
|
|
90
|
-
|
|
91
|
-
|
|
94
|
+
|
|
95
|
+
<div class="flex flex-1 flex-col overflow-y-auto bg-gradient-to-b from-transparent to-black/20">
|
|
96
|
+
<nav class="flex-1 space-y-6 px-2 py-4">
|
|
92
97
|
{#each navigationItems as item, index (index)}
|
|
93
98
|
{#if 'type' in item && item.type === 'horizontal-divider'}
|
|
94
|
-
<li class="my-
|
|
99
|
+
<li class="my-2 border-t border-white/10"></li>
|
|
95
100
|
{:else if 'children' in item}
|
|
96
|
-
<
|
|
97
|
-
{#
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
101
|
+
<div>
|
|
102
|
+
{#if !menubar.collapsed}
|
|
103
|
+
<h3 class="text-default-200 px-3 text-xs font-semibold tracking-wider uppercase">
|
|
104
|
+
{item.label}
|
|
105
|
+
</h3>
|
|
106
|
+
{/if}
|
|
107
|
+
<div class={menubar.collapsed ? '' : 'mt-2 space-y-1'}>
|
|
108
|
+
{#each item.children as child (child.label)}
|
|
109
|
+
<button
|
|
110
|
+
class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {child.active
|
|
111
|
+
? 'bg-default-500/20'
|
|
112
|
+
: ''} {menubar.collapsed ? 'justify-center' : ''}"
|
|
113
|
+
class:text-white={child.active}
|
|
114
|
+
class:text-gray-300={!child.active}
|
|
115
|
+
onclick={() => (window.location.href = child.href)}
|
|
116
|
+
title={menubar.collapsed ? child.label : ''}
|
|
117
|
+
>
|
|
118
|
+
{#if child.Icon}
|
|
119
|
+
{@const Icon = child.Icon}
|
|
120
|
+
<Icon
|
|
121
|
+
class="h-5 w-5 flex-shrink-0 {child.active
|
|
122
|
+
? 'text-default-200'
|
|
123
|
+
: 'text-gray-400'} {menubar.collapsed ? '' : 'mr-3'}"
|
|
124
|
+
/>
|
|
125
|
+
{/if}
|
|
126
|
+
{#if !menubar.collapsed}
|
|
127
|
+
<span class="truncate">{child.label}</span>
|
|
128
|
+
{/if}
|
|
129
|
+
</button>
|
|
130
|
+
{/each}
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
110
133
|
{:else if 'href' in item}
|
|
111
|
-
<
|
|
112
|
-
{
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
{
|
|
119
|
-
|
|
134
|
+
<button
|
|
135
|
+
class="group hover:bg-default-500/10 flex w-full cursor-pointer items-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-150 ease-in-out hover:text-white {item.active
|
|
136
|
+
? 'bg-default-500/20'
|
|
137
|
+
: ''} {menubar.collapsed ? 'justify-center' : ''}"
|
|
138
|
+
class:text-white={item.active}
|
|
139
|
+
class:text-gray-300={!item.active}
|
|
140
|
+
onclick={() => (window.location.href = item.href)}
|
|
141
|
+
title={menubar.collapsed ? item.label : ''}
|
|
142
|
+
>
|
|
143
|
+
{#if item.Icon}
|
|
144
|
+
{@const Icon = item.Icon}
|
|
145
|
+
<Icon
|
|
146
|
+
class="h-5 w-5 flex-shrink-0 {item.active
|
|
147
|
+
? 'text-default-200'
|
|
148
|
+
: 'text-gray-400'} {menubar.collapsed ? '' : 'mr-3'}"
|
|
149
|
+
/>
|
|
150
|
+
{/if}
|
|
151
|
+
{#if !menubar.collapsed}
|
|
152
|
+
<span class="truncate">{item.label}</span>
|
|
153
|
+
{/if}
|
|
154
|
+
</button>
|
|
120
155
|
{/if}
|
|
121
156
|
{/each}
|
|
122
|
-
</
|
|
123
|
-
</
|
|
157
|
+
</nav>
|
|
158
|
+
</div>
|
|
124
159
|
</div>
|
|
125
160
|
|
|
126
|
-
{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-default-
|
|
161
|
+
{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-default-200')}
|
|
127
162
|
<svg
|
|
128
163
|
xmlns="http://www.w3.org/2000/svg"
|
|
129
164
|
width="0.8em"
|