@makolabs/ripple 0.0.1-dev.7 → 0.0.1-dev.70

package/dist/layout/sidebar/Sidebar.svelte

@@ -1,16 +1,7 @@
 <script lang="ts">
-	import NavGroup from './NavGroup.svelte';
-	import NavItem from './NavItem.svelte';
 	import { setContext } from 'svelte';
-	import type {
-		MenuBar,
-		NavigationItem,
-		SidebarProps,
-		ParentItem,
-		LinkItem
-	} from './sidebar.js';
+	import type { MenuBar, NavigationItem, SidebarProps, ParentItem, LinkItem } from '../../index.js';
 	import clsx from 'clsx';
-	import { cn } from '../../helper/cls.js';
 	import { isRouteActive } from '../../helper/nav.svelte.js';
 
 	let { items = [], logo }: SidebarProps = $props();
@@ -33,16 +24,15 @@
 
 		if ('children' in item) {
 			const parentItem = item as ParentItem;
-			let anyChildActive = false;
+			let anyChildActive = parentItem.active;
 
 			const updatedChildren = parentItem.children.map((child) => {
-				const childActive = isRouteActive(child.href);
+				const childActive = isRouteActive(child.href, true);
 				if (childActive) {
 					anyChildActive = true;
 				}
 				return { ...child, active: childActive };
 			});
-
 			return { ...parentItem, active: anyChildActive, children: updatedChildren };
 		}
 
@@ -56,90 +46,129 @@
 
 	// Reactively compute the active states based on the current route
 	const navigationItems = $derived(items.map((item) => processNavigationItem(item)));
+	$inspect(navigationItems)
 
 	const sidebarClasses = $derived(
-		clsx(
-			`flex min-h-screen max-h-screen overflow-y-auto flex-col gap-y-1 overflow-y-auto
-			border-r border-gray-800 bg-gray-900 px-3 duration-300 sticky top-0`,
-			{
-				'w-16': menubar.collapsed,
-				'w-16 xl:w-72 shrink-0': !menubar.collapsed
-			}
-		)
+		clsx(`min-h-screen flex flex-col bg-gradient-to-b from-gray-900 to-default-900 h-full`, {
+			'w-16': menubar.collapsed,
+			'w-16 xl:w-64 shrink-0': !menubar.collapsed
+		})
 	);
 
 	const logoTextClasses = $derived(
-		clsx('text-xl font-semibold hidden text-white', { 'xl:block': !menubar.collapsed })
+		clsx('text-xl font-bold text-white', {
+			'xl:block': !menubar.collapsed,
+			hidden: menubar.collapsed
+		})
 	);
 
 	const logoWrapperClasses = $derived(
-		clsx('flex shrink-0 items-center justify-between mt-3 flex-col', {
-			'xl:mt-0 xl:h-16 flex-row': !menubar.collapsed
-		})
+		clsx(
+			'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',
+			{
+				'justify-between': !menubar.collapsed,
+				'justify-center': menubar.collapsed
+			}
+		)
 	);
 </script>
 
 <div class={sidebarClasses}>
 	<div class={logoWrapperClasses}>
 		<div class="flex items-center gap-x-1">
-			{#if logo.src}
+			{#if logo.src && !menubar.collapsed}
 				<img src={logo.src} alt={logo.title} class="size-8 shrink-0" />
 			{/if}
-			{#if logo.title}
+			{#if logo.title && !menubar.collapsed}
 				<h1 class={logoTextClasses}>{logo.title}</h1>
 			{/if}
 		</div>
-		<button onclick={toggle} class="hidden cursor-pointer xl:block" aria-label="Toggle Sidebar">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="0.8em"
-				height="0.8em"
-				viewBox="0 0 24 24"
-				class="size-6 shrink-0 text-gray-600"
-			>
-				<path
-					fill="currentColor"
-					d="M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993zh18zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993zl18-.002zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993zh18z"
-				/>
-			</svg>
+		<button
+			onclick={toggle}
+			class="hidden cursor-pointer text-white xl:block"
+			aria-label="Toggle Sidebar"
+		>
+			{@render ToggleIcon()}
 		</button>
 	</div>
-	<nav class="flex flex-1 flex-col">
-		<ul role="list" class="flex flex-1 flex-col gap-y-1">
+
+	<div class="flex flex-1 flex-col overflow-y-auto bg-gradient-to-b from-transparent to-black/20">
+		<nav class="flex-1 space-y-6 px-2 py-4">
 			{#each navigationItems as item, index (index)}
 				{#if 'type' in item && item.type === 'horizontal-divider'}
-					<li class="my-3 border-t border-gray-700"></li>
+					<li class="my-2 border-t border-white/10"></li>
 				{:else if 'children' in item}
-					<NavGroup active={item.active}>
-						{#snippet labelArea(classes)}
-							{#if item.Icon}
-								{@const Icon = item.Icon}
-								<Icon class="size-6 shrink-0 text-gray-600" />
-							{/if}
-							<span class={cn(classes)}>{item.label}</span>
-						{/snippet}
-						{#each item.children as child (child.label)}
-							<NavItem href={child.href} active={child.active}>
-								{#if child.Icon}
-									{@const Icon = child.Icon}
-									<Icon class="size-6 shrink-0 text-gray-600" />
-								{/if}
-								<span class="truncate">{child.label}</span>
-							</NavItem>
-						{/each}
-					</NavGroup>
+					<div>
+						{#if !menubar.collapsed}
+							<h3 class="text-default-200 px-3 text-xs font-semibold tracking-wider uppercase">
+								{item.label}
+							</h3>
+						{/if}
+						<div class={menubar.collapsed ? '' : 'mt-2 space-y-1'}>
+							{#each item.children as child (child.label)}
+								<button
+									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
+										? 'bg-default-500/20'
+										: ''} {menubar.collapsed ? 'justify-center' : ''}"
+									class:text-white={child.active}
+									class:text-gray-300={!child.active}
+									onclick={() => (window.location.href = child.href)}
+									title={menubar.collapsed ? child.label : ''}
+								>
+									{#if child.Icon}
+										{@const Icon = child.Icon}
+										<Icon
+											class="h-5 w-5 flex-shrink-0 {child.active
+												? 'text-default-200'
+												: 'text-gray-400'} {menubar.collapsed ? '' : 'mr-3'}"
+										/>
+									{/if}
+									{#if !menubar.collapsed}
+										<span class="truncate">{child.label}</span>
+									{/if}
+								</button>
+							{/each}
+						</div>
+					</div>
 				{:else if 'href' in item}
-					<NavItem href={item.href} active={item.active}>
-						{#snippet children(classes)}
-							{#if item.Icon}
-								{@const Icon = item.Icon}
-								<Icon class="size-6 shrink-0 text-gray-600" />
-							{/if}
-							<span class={cn(classes)}>{item.label}</span>
-						{/snippet}
-					</NavItem>
+					<button
+						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
+							? 'bg-default-500/20'
+							: ''} {menubar.collapsed ? 'justify-center' : ''}"
+						class:text-white={item.active}
+						class:text-gray-300={!item.active}
+						onclick={() => (window.location.href = item.href)}
+						title={menubar.collapsed ? item.label : ''}
+					>
+						{#if item.Icon}
+							{@const Icon = item.Icon}
+							<Icon
+								class="h-5 w-5 flex-shrink-0 {item.active
+									? 'text-default-200'
+									: 'text-gray-400'} {menubar.collapsed ? '' : 'mr-3'}"
+							/>
+						{/if}
+						{#if !menubar.collapsed}
+							<span class="truncate">{item.label}</span>
+						{/if}
+					</button>
 				{/if}
 			{/each}
-		</ul>
-	</nav>
+		</nav>
+	</div>
 </div>
+
+{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-default-200')}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="0.8em"
+		height="0.8em"
+		viewBox="0 0 24 24"
+		class={classes}
+	>
+		<path
+			fill="currentColor"
+			d="M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993zh18zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993zl18-.002zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993zh18z"
+		/>
+	</svg>
+{/snippet}

package/dist/layout/sidebar/Sidebar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SidebarProps } from './sidebar.js';
+import type { SidebarProps } from '../../index.js';
 declare const Sidebar: import("svelte").Component<SidebarProps, {}, "">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;