@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/layout/Sidenav.svelte

@@ -1,4 +1,17 @@
 <script lang="ts" module>
+	import type { ButtonVariant } from '../ui/ButtonVariant.js';
+
+	export interface SidenavItemAction {
+		/** SVG icon to display in the action button */
+		iconSvg: string;
+		/** Accessible label, also shown as a tooltip on hover */
+		label?: string;
+		/** Visual style variant for the action button */
+		variant?: ButtonVariant;
+		/** Click handler; receives the item the action belongs to and the event */
+		onclick?: (item: SidenavItem, event: MouseEvent) => void;
+	}
+
 	export interface SidenavItem {
 		label: string;
 		href?: string;
@@ -6,6 +19,8 @@
 		active?: boolean;
 		items?: SidenavItem[];
 		onclick?: () => void;
+		/** Action buttons shown on the right of the item (e.g. edit, delete) */
+		actions?: SidenavItemAction[];
 	}
 
 	export interface SidenavSection {
@@ -15,69 +30,83 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from "svelte";
-	import Icon from "../icon/Icon.svelte";
-	import Textbox from "../form/Textbox.svelte";
-	import ActionIcon from "../ui/ActionIcon.svelte";
-	import Drawer from "../ui/Drawer.svelte";
-	import { iconChevronRight, iconSearch, iconX } from "../icon/index.js";
-	import { slide } from "svelte/transition";
-	import { viewportState } from "../theme.svelte.js";
-
-	interface Props {
+	import type { Snippet } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Textbox from '../form/Textbox.svelte';
+	import ActionIcon from '../ui/ActionIcon.svelte';
+	import Drawer from '../ui/Drawer.svelte';
+	import { iconChevronRight, iconSearch, iconX } from '../icon/index.js';
+	import { slide } from 'svelte/transition';
+	import { viewportState } from '../theme.svelte.js';
+	import Link from '../ui/Link.svelte';
+
+	export interface SidenavProps {
+		/** Navigation sections to display */
 		sections?: SidenavSection[];
+		/** Sections pinned to the bottom of the sidenav */
 		bottomSections?: SidenavSection[];
+		/** Whether the sidenav is in collapsed (icon-only) mode */
 		collapsed?: boolean;
+		/** Width of the expanded sidenav */
 		width?: string;
+		/** Width when collapsed */
 		collapsedWidth?: string;
+		/** Additional CSS classes */
 		class?: string;
+		/** Custom header content */
 		header?: Snippet;
+		/** Custom footer content */
 		footer?: Snippet;
+		/** Enable search/filter for navigation items */
 		searchable?: boolean;
+		/** Placeholder text for search input */
 		searchPlaceholder?: string;
+		/** Callback when a navigation item is clicked */
 		onItemClick?: (item: SidenavItem) => void;
-		// Responsive props
+		/** When item action buttons are shown: on hover/focus or always visible.
+		 * Note: in the mobile drawer they are always visible (touch has no hover). */
+		actionsVisible?: 'hover' | 'always';
+		/** Enable responsive behavior (drawer on mobile) */
 		responsive?: boolean;
+		/** Breakpoint (px) below which mobile mode activates */
 		mobileBreakpoint?: number;
+		/** Whether the mobile drawer is open (bindable) */
 		mobileOpen?: boolean;
+		/** Title shown in mobile drawer header */
 		mobileTitle?: string;
-		mobileDrawerPosition?: "left" | "right";
+		/** Position of the mobile drawer */
+		mobileDrawerPosition?: 'left' | 'right';
 	}
 
 	let {
 		sections = [],
 		bottomSections = [],
 		collapsed = false,
-		width = "260px",
-		collapsedWidth = "60px",
-		class: className = "",
+		width = '260px',
+		collapsedWidth = '60px',
+		class: className = '',
 		header,
 		footer,
 		searchable = false,
-		searchPlaceholder = "Search...",
+		searchPlaceholder = 'Search...',
 		onItemClick,
+		actionsVisible = 'hover',
 		// Responsive props
 		responsive = false,
 		mobileBreakpoint = 768,
 		mobileOpen = $bindable(false),
-		mobileTitle = "",
-		mobileDrawerPosition = "left",
-	}: Props = $props();
+		mobileTitle = '',
+		mobileDrawerPosition = 'left'
+	}: SidenavProps = $props();
 
-	let searchQuery = $state("");
+	let searchQuery = $state('');
 
 	// Track if we're in mobile mode using viewportState
-	const isMobile = $derived(
-		responsive && viewportState.isBelow(mobileBreakpoint),
-	);
+	const isMobile = $derived(responsive && viewportState.isBelow(mobileBreakpoint));
 
 	// Auto-close drawer when resizing to desktop
 	$effect(() => {
-		if (
-			responsive &&
-			!viewportState.isBelow(mobileBreakpoint) &&
-			mobileOpen
-		) {
+		if (responsive && !viewportState.isBelow(mobileBreakpoint) && mobileOpen) {
 			mobileOpen = false;
 		}
 	});
@@ -89,11 +118,7 @@
 		const lowerText = text.toLowerCase();
 
 		let queryIndex = 0;
-		for (
-			let i = 0;
-			i < lowerText.length && queryIndex < lowerQuery.length;
-			i++
-		) {
+		for (let i = 0; i < lowerText.length && queryIndex < lowerQuery.length; i++) {
 			if (lowerText[i] === lowerQuery[queryIndex]) {
 				queryIndex++;
 			}
@@ -112,12 +137,7 @@
 						// Check if item matches
 						if (fuzzyMatch(searchQuery, item.label)) return true;
 						// Check if any sub-item matches
-						if (
-							item.items?.some((sub) =>
-								fuzzyMatch(searchQuery, sub.label),
-							)
-						)
-							return true;
+						if (item.items?.some((sub) => fuzzyMatch(searchQuery, sub.label))) return true;
 						return false;
 					})
 					.map((item) => {
@@ -125,9 +145,7 @@
 						if (item.items) {
 							return {
 								...item,
-								items: item.items.filter((sub) =>
-									fuzzyMatch(searchQuery, sub.label),
-								),
+								items: item.items.filter((sub) => fuzzyMatch(searchQuery, sub.label))
 							};
 						}
 						return item;
@@ -142,7 +160,7 @@
 	let filteredBottomSections = $derived(filterSections(bottomSections));
 
 	function clearSearch() {
-		searchQuery = "";
+		searchQuery = '';
 	}
 
 	let expandedSections: Set<string> = $state(new Set());
@@ -175,7 +193,7 @@
 		}
 	}
 
-	function handleLinkClick(item: SidenavItem) {
+	function handleNavItemClick(item: SidenavItem) {
 		onItemClick?.(item);
 		item.onclick?.();
 		// Close drawer on mobile after navigation
@@ -190,8 +208,119 @@
 		// Close drawer after clicking an item
 		mobileOpen = false;
 	}
+
+	function handleActionClick(action: SidenavItemAction, item: SidenavItem, e: MouseEvent) {
+		// Keep the action independent of the item's own navigation/expand behaviour
+		e.stopPropagation();
+		action.onclick?.(item, e);
+	}
 </script>
 
+{#snippet itemActions(item: SidenavItem)}
+	{#if item.actions && item.actions.length > 0 && !collapsed}
+		<span class="nav-actions" class:always={actionsVisible === 'always'}>
+			{#each item.actions as action}
+				<ActionIcon
+					svg={action.iconSvg}
+					size="0.875rem"
+					variant={action.variant ?? 'secondary-subtle'}
+					tooltip={action.label}
+					onclick={(e) => handleActionClick(action, item, e)}
+				/>
+			{/each}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet sectionList(sects: SidenavSection[])}
+	{#each sects as section}
+		{#if section.title && !collapsed}
+			<div class="section-title">{section.title}</div>
+		{/if}
+		<ul class="nav-list">
+			{#each section.items as item}
+				<li class="nav-item">
+					<div class="nav-item-row" class:active={item.active}>
+						{#if item.href && !(item.items && item.items.length > 0)}
+							<Link
+								href={item.href}
+								class="nav-link {item.active ? 'active' : ''}"
+								onclick={() => handleNavItemClick(item)}
+							>
+								{#if item.iconSvg}
+									<Icon svg={item.iconSvg} size="1.25em" />
+								{/if}
+								{#if !collapsed}
+									<span class="nav-label">{item.label}</span>
+								{/if}
+							</Link>
+						{:else}
+							<button
+								type="button"
+								class="nav-link"
+								class:active={item.active}
+								class:has-children={item.items && item.items.length > 0}
+								title={collapsed ? item.label : undefined}
+								onclick={(e) => handleItemClick(item, e)}
+							>
+								{#if item.iconSvg}
+									<Icon svg={item.iconSvg} size="1.25em" />
+								{/if}
+								{#if !collapsed}
+									<span class="nav-label">{item.label}</span>
+									{#if item.items && item.items.length > 0}
+										<Icon
+											svg={iconChevronRight}
+											size="0.75em"
+											class="chevron {isExpanded(item.label) ? 'expanded' : ''}"
+										/>
+									{/if}
+								{/if}
+							</button>
+						{/if}
+						{@render itemActions(item)}
+					</div>
+					{#if item.items && item.items.length > 0 && isExpanded(item.label) && !collapsed}
+						<ul class="sub-nav-list" transition:slide={{ duration: 200 }}>
+							{#each item.items as subItem}
+								<li class="sub-nav-item">
+									<div class="nav-item-row" class:active={subItem.active}>
+										{#if subItem.href}
+											<Link
+												href={subItem.href}
+												class="sub-nav-link {subItem.active ? 'active' : ''}"
+												onclick={() => handleNavItemClick(subItem)}
+											>
+												{#if subItem.iconSvg}
+													<Icon svg={subItem.iconSvg} size="1em" />
+												{/if}
+												<span class="nav-label">{subItem.label}</span>
+											</Link>
+										{:else}
+											<button
+												type="button"
+												class="sub-nav-link"
+												class:active={subItem.active}
+												onclick={() => handleNavItemClick(subItem)}
+											>
+												{#if subItem.iconSvg}
+													<Icon svg={subItem.iconSvg} size="1em" />
+												{/if}
+												<span class="nav-label">{subItem.label}</span>
+											</button>
+										{/if}
+										{@render itemActions(subItem)}
+									</div>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/each}
+{/snippet}
+
 {#if !isMobile}
 	<!-- Desktop: Regular Sidenav -->
 	<aside
@@ -229,249 +358,12 @@
 		{/if}
 
 		<nav class="sidenav-content">
-			{#each filteredSections as section}
-				{#if section.title && !collapsed}
-					<div class="section-title">{section.title}</div>
-				{/if}
-				<ul class="nav-list">
-					{#each section.items as item}
-						<li class="nav-item">
-							{#if item.href && !(item.items && item.items.length > 0)}
-								<a
-									href={item.href}
-									class="nav-link"
-									class:active={item.active}
-									title={collapsed ? item.label : undefined}
-									onclick={() => handleLinkClick(item)}
-								>
-									{#if item.iconSvg}
-										<Icon
-											svg={item.iconSvg}
-											size="1.25em"
-										/>
-									{/if}
-									{#if !collapsed}
-										<span class="nav-label"
-											>{item.label}</span
-										>
-									{/if}
-								</a>
-							{:else}
-								<button
-									type="button"
-									class="nav-link"
-									class:active={item.active}
-									class:has-children={item.items &&
-										item.items.length > 0}
-									title={collapsed ? item.label : undefined}
-									onclick={(e) => handleItemClick(item, e)}
-								>
-									{#if item.iconSvg}
-										<Icon
-											svg={item.iconSvg}
-											size="1.25em"
-										/>
-									{/if}
-									{#if !collapsed}
-										<span class="nav-label"
-											>{item.label}</span
-										>
-										{#if item.items && item.items.length > 0}
-											<Icon
-												svg={iconChevronRight}
-												size="0.75em"
-												class="chevron {isExpanded(
-													item.label,
-												)
-													? 'expanded'
-													: ''}"
-											/>
-										{/if}
-									{/if}
-								</button>
-								{#if item.items && item.items.length > 0 && isExpanded(item.label) && !collapsed}
-									<ul
-										class="sub-nav-list"
-										transition:slide={{ duration: 200 }}
-									>
-										{#each item.items as subItem}
-											<li class="sub-nav-item">
-												{#if subItem.href}
-													<a
-														href={subItem.href}
-														class="sub-nav-link"
-														class:active={subItem.active}
-														onclick={() =>
-															handleLinkClick(
-																subItem,
-															)}
-													>
-														{#if subItem.iconSvg}
-															<Icon
-																svg={subItem.iconSvg}
-																size="1em"
-															/>
-														{/if}
-														<span
-															>{subItem.label}</span
-														>
-													</a>
-												{:else}
-													<button
-														type="button"
-														class="sub-nav-link"
-														class:active={subItem.active}
-														onclick={() =>
-															handleLinkClick(
-																subItem,
-															)}
-													>
-														{#if subItem.iconSvg}
-															<Icon
-																svg={subItem.iconSvg}
-																size="1em"
-															/>
-														{/if}
-														<span
-															>{subItem.label}</span
-														>
-													</button>
-												{/if}
-											</li>
-										{/each}
-									</ul>
-								{/if}
-							{/if}
-						</li>
-					{/each}
-				</ul>
-			{/each}
+			{@render sectionList(filteredSections)}
 		</nav>
 
 		{#if filteredBottomSections.length > 0}
 			<nav class="sidenav-bottom">
-				{#each filteredBottomSections as section}
-					{#if section.title && !collapsed}
-						<div class="section-title">{section.title}</div>
-					{/if}
-					<ul class="nav-list">
-						{#each section.items as item}
-							<li class="nav-item">
-								{#if item.href && !(item.items && item.items.length > 0)}
-									<a
-										href={item.href}
-										class="nav-link"
-										class:active={item.active}
-										title={collapsed
-											? item.label
-											: undefined}
-										onclick={() => handleLinkClick(item)}
-									>
-										{#if item.iconSvg}
-											<Icon
-												svg={item.iconSvg}
-												size="1.25em"
-											/>
-										{/if}
-										{#if !collapsed}
-											<span class="nav-label"
-												>{item.label}</span
-											>
-										{/if}
-									</a>
-								{:else}
-									<button
-										type="button"
-										class="nav-link"
-										class:active={item.active}
-										class:has-children={item.items &&
-											item.items.length > 0}
-										title={collapsed
-											? item.label
-											: undefined}
-										onclick={(e) =>
-											handleItemClick(item, e)}
-									>
-										{#if item.iconSvg}
-											<Icon
-												svg={item.iconSvg}
-												size="1.25em"
-											/>
-										{/if}
-										{#if !collapsed}
-											<span class="nav-label"
-												>{item.label}</span
-											>
-											{#if item.items && item.items.length > 0}
-												<Icon
-													svg={iconChevronRight}
-													size="0.75em"
-													class="chevron {isExpanded(
-														item.label,
-													)
-														? 'expanded'
-														: ''}"
-												/>
-											{/if}
-										{/if}
-									</button>
-									{#if item.items && item.items.length > 0 && isExpanded(item.label) && !collapsed}
-										<ul
-											class="sub-nav-list"
-											transition:slide={{ duration: 200 }}
-										>
-											{#each item.items as subItem}
-												<li class="sub-nav-item">
-													{#if subItem.href}
-														<a
-															href={subItem.href}
-															class="sub-nav-link"
-															class:active={subItem.active}
-															onclick={() =>
-																handleLinkClick(
-																	subItem,
-																)}
-														>
-															{#if subItem.iconSvg}
-																<Icon
-																	svg={subItem.iconSvg}
-																	size="1em"
-																/>
-															{/if}
-															<span
-																>{subItem.label}</span
-															>
-														</a>
-													{:else}
-														<button
-															type="button"
-															class="sub-nav-link"
-															class:active={subItem.active}
-															onclick={() =>
-																handleLinkClick(
-																	subItem,
-																)}
-														>
-															{#if subItem.iconSvg}
-																<Icon
-																	svg={subItem.iconSvg}
-																	size="1em"
-																/>
-															{/if}
-															<span
-																>{subItem.label}</span
-															>
-														</button>
-													{/if}
-												</li>
-											{/each}
-										</ul>
-									{/if}
-								{/if}
-							</li>
-						{/each}
-					</ul>
-				{/each}
+				{@render sectionList(filteredBottomSections)}
 			</nav>
 		{/if}
 
@@ -492,6 +384,7 @@
 		{sections}
 		{bottomSections}
 		{width}
+		actionsVisible="always"
 		onItemClick={handleDrawerItemClick}
 	>
 		{#snippet header()}
@@ -513,12 +406,13 @@
 		flex-direction: column;
 		width: var(--sidenav-width);
 		min-width: var(--sidenav-width);
-		height: 100%;
-		background-color: var(--pui-paper-body-bg);
+		background-color: var(--paper-body-bg);
+		border-right: 1px solid var(--border-color);
 		transition:
-			width var(--pui-transition-fast) var(--pui-ease-in-out),
-			min-width var(--pui-transition-fast) var(--pui-ease-in-out);
+			width 0.2s ease,
+			min-width 0.2s ease;
 		overflow: hidden;
+		height: var(--page-content-height);
 	}
 
 	.sidenav.collapsed {
@@ -527,14 +421,14 @@
 	}
 
 	.sidenav-header {
-		padding: var(--pui-spacing-4);
-		border-bottom: 1px solid var(--pui-border-default);
+		padding: 1rem;
+		border-bottom: 1px solid var(--border-color);
 		flex-shrink: 0;
 	}
 
 	.sidenav-search {
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
-		border-bottom: 1px solid var(--pui-border-default);
+		padding: 0.5rem 0.75rem;
+		border-bottom: 1px solid var(--border-color);
 		flex-shrink: 0;
 	}
 
@@ -544,7 +438,7 @@
 
 	.sidenav-search :global(.search-clear-btn) {
 		position: absolute;
-		right: var(--pui-spacing-1);
+		right: 0.25rem;
 		top: 50%;
 		transform: translateY(-50%);
 	}
@@ -557,25 +451,27 @@
 
 	.sidenav-bottom {
 		flex-shrink: 0;
-		border-top: 1px solid var(--pui-border-default);
-		padding: var(--pui-spacing-2) 0;
+		border-top: 1px solid var(--border-color);
+		padding: 0.5rem 0;
 	}
 
 	.sidenav-footer {
-		padding: var(--pui-spacing-4);
-		border-top: 1px solid var(--pui-border-default);
+		padding: 1rem;
+		border-top: 1px solid var(--border-color);
 		flex-shrink: 0;
 	}
 
 	.section-title {
-		padding: var(--pui-spacing-3) var(--pui-spacing-4) var(--pui-spacing-2);
+		padding: 0.75rem 1rem 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: var(--pui-text-muted);
-		border-top: 1px solid var(--pui-border-default);
-		border-bottom: 1px solid var(--pui-border-default);
+		color: var(--text-muted, #6b7280);
+		border-top: 1px solid var(--border-color);
+		border-bottom: 1px solid var(--border-color);
 	}
-
+	
 	.section-title:first-child {
 		border-top: none;
 	}
@@ -590,44 +486,63 @@
 		margin: 0;
 	}
 
-	.nav-link {
+	/* Row wraps the nav link/button together with its action buttons. The row (not the
+	   link) carries the hover/active background so it spans the full width, including the
+	   action-button area. */
+	.nav-item-row {
+		display: flex;
+		align-items: center;
+		transition: background-color 0.15s ease;
+	}
+
+	.nav-item-row :global(.nav-link),
+	.nav-item-row button.nav-link,
+	.nav-item-row :global(.sub-nav-link),
+	.nav-item-row button.sub-nav-link {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.nav-item :global(.nav-link),
+	.nav-item button.nav-link {
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-3);
+		gap: 0.75rem;
 		width: 100%;
-		padding: var(--pui-spacing-2_5) var(--pui-spacing-4);
-		color: var(--pui-text-primary);
+		padding: 0.625rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--text-color);
 		background: none;
 		border: none;
 		text-decoration: none;
 		cursor: pointer;
-		transition:
-			background-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			color var(--pui-transition-fast) var(--pui-ease-in-out);
+		transition: color 0.15s ease;
 		text-align: left;
 	}
 
-	.collapsed .nav-link {
+	.collapsed .nav-item :global(.nav-link),
+	.collapsed .nav-item button.nav-link {
 		justify-content: center;
-		padding: var(--pui-spacing-3);
+		padding: 0.75rem;
 	}
 
-	.nav-link:hover {
-		background-color: var(--pui-bg-hover);
+	.nav-item > .nav-item-row:hover {
+		background-color: rgba(var(--ui-primary-rgbc), 0.08);
 	}
 
-	:global(.dark) .nav-link:hover {
-		background-color: var(--pui-bg-hover);
+	:global(.dark) .nav-item > .nav-item-row:hover {
+		background-color: rgba(var(--ui-primary-rgbc), 0.2);
 	}
 
-	.nav-link.active {
-		background-color: var(--pui-bg-active);
-		border-left: 3px solid var(--pui-color-secondary);
+	.nav-item > .nav-item-row.active {
+		background-color: rgba(var(--ui-accent-rgbc), 0.2);
+		border-left: 3px solid var(--ui-accent);
 	}
 
-	:global(.dark) .nav-link.active {
-		background-color: var(--pui-bg-active);
-		border-left: 3px solid var(--pui-color-primary);
+	:global(.dark) .nav-item > .nav-item-row.active {
+		background-color: rgba(var(--ui-primary-rgbc), 0.3);
+		border-left: 3px solid var(--ui-primary);
 	}
 
 	.nav-label {
@@ -637,8 +552,27 @@
 		text-overflow: ellipsis;
 	}
 
+	/* Action buttons: revealed on hover/focus by default, or always when opted in */
+	.nav-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+		flex-shrink: 0;
+		padding-right: 0.5rem;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.15s ease;
+	}
+
+	.nav-actions.always,
+	.nav-item-row:hover .nav-actions,
+	.nav-item-row:focus-within .nav-actions {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
 	.nav-link :global(.chevron) {
-		transition: transform var(--pui-transition-fast) var(--pui-ease-in-out);
+		transition: transform 0.2s ease;
 		flex-shrink: 0;
 	}
 
@@ -650,49 +584,54 @@
 		list-style: none;
 		margin: 0;
 		padding: 0;
-		background-color: var(--pui-bg-subtle);
+		background-color: rgba(var(--ui-primary-rgbc), 0.03);
 	}
 
 	:global(.dark) .sub-nav-list {
-		background-color: var(--pui-bg-subtle);
+		background-color: rgba(0, 0, 0, 0.2);
 	}
 
 	.sub-nav-item {
 		margin: 0;
 	}
 
-	.sub-nav-link {
+	.sub-nav-item :global(.sub-nav-link),
+	.sub-nav-item button.sub-nav-link {
 		display: flex;
 		align-items: center;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
 		width: 100%;
-		padding: var(--pui-spacing-2) var(--pui-spacing-4) var(--pui-spacing-2)
-			var(--pui-spacing-11);
-		color: var(--pui-text-primary);
+		padding: 0.5rem 1rem 0.5rem 2.75rem;
+		font-size: 0.8125rem;
+		font-weight: 400;
+		color: var(--text-color);
 		background: none;
 		border: none;
 		text-decoration: none;
 		cursor: pointer;
-		transition:
-			background-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			color var(--pui-transition-fast) var(--pui-ease-in-out);
+		transition: color 0.15s ease;
 		text-align: left;
 	}
 
-	.sub-nav-link:hover {
-		background-color: var(--pui-bg-hover);
+	.sub-nav-item > .nav-item-row:hover {
+		background-color: rgba(var(--ui-primary-rgbc), 0.08);
+	}
+
+	:global(.dark) .sub-nav-item > .nav-item-row:hover {
+		background-color: rgba(var(--ui-primary-rgbc), 0.2);
 	}
 
-	:global(.dark) .sub-nav-link:hover {
-		background-color: var(--pui-bg-hover);
+	.sub-nav-item > .nav-item-row.active {
+		border-left: 3px solid var(--ui-accent);
 	}
 
-	.sub-nav-link.active {
-		border-left: 3px solid var(--pui-color-secondary);
+	:global(.dark) .sub-nav-item > .nav-item-row.active {
+		border-left: 3px solid var(--ui-primary);
 	}
 
-	:global(.dark) .sub-nav-link.active {
-		border-left: 3px solid var(--pui-color-primary);
+	.sub-nav-item > .nav-item-row.active :global(.sub-nav-link),
+	.sub-nav-item > .nav-item-row.active button.sub-nav-link {
+		font-weight: 500;
 	}
 
 	/* Scrollbar styling */
@@ -705,8 +644,8 @@
 	}
 
 	.sidenav-content::-webkit-scrollbar-thumb {
-		background-color: var(--pui-color-gray-600);
-		border-radius: var(--pui-radius-sm);
+		background-color: #343434;
+		border-radius: 3px;
 		border: none;
 	}
 </style>