zabi-components 6.0.0 → 7.0.0

package/dist/organisms/SidebarNavigation.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
     import Badge from "../atoms/Badge.svelte";
+    import Button from "../atoms/Button.svelte";
+    import IconButton from "../atoms/IconButton.svelte";
     import Input from "../atoms/Input.svelte";
-    import { Search, LogOut, Sun, Moon } from "@lucide/svelte";
+    import SidebarBrandHeader from "../molecules/SidebarBrandHeader.svelte";
+    import SidebarFooter from "../molecules/SidebarFooter.svelte";
+    import SidebarNavSection from "../molecules/SidebarNavSection.svelte";
+    import { Command, Search } from "@lucide/svelte";
+    import type { Snippet } from "svelte";
     import type { Component } from "svelte";
+    import type { ButtonVariant, SizeVariant } from "../types/variants.js";
 
     export interface SidebarNavigationItem {
         id: string;
@@ -12,14 +19,25 @@
         badgeText?: string | number;
         badgeCount?: number;
         group?: "primary" | "secondary";
+        /** Groups items under a section heading in the rail. */
+        section?: string;
+    }
+
+    interface NavSectionGroup {
+        sectionLabel: string | null;
+        items: SidebarNavigationItem[];
     }
 
     interface Props {
         mode?: "expanded" | "collapsed";
+        layout?: "rail" | "card";
         items?: SidebarNavigationItem[];
         currentPath?: string;
         ariaLabel?: string;
         className?: string;
+        logoSrc?: string;
+        logoAlt?: string;
+        brandName?: string;
         showProfile?: boolean;
         profileName?: string;
         profileEmail?: string;
@@ -28,6 +46,10 @@
         searchMode?: "input" | "button";
         searchPlaceholder?: string;
         searchValue?: string;
+        /** Trigger icon when search is a button or rail is collapsed; input mode keeps `Search` on the field. */
+        searchTriggerIcon?: Component<{ size?: number; class?: string }>;
+        searchTriggerVariant?: ButtonVariant;
+        searchTriggerSize?: SizeVariant;
         showLogout?: boolean;
         logoutLabel?: string;
         showThemeToggle?: boolean;
@@ -41,20 +63,25 @@
         onLogout?: () => void;
         onThemeToggle?: (nextIsLightMode: boolean) => void;
         onEmptyStateAction?: () => void;
-        /**
-         * Highlights a primary (e.g. category) row when the current route is a child
-         * of that section, while `currentPath` points at the leaf (e.g. a component).
-         */
+        onProfileClick?: (event?: MouseEvent) => void;
+        profilePanelOpen?: boolean;
+        profilePanelControlsId?: string;
+        profilePanel?: Snippet;
+        /** Parent nav href to highlight when `currentPath` is a deeper leaf (e.g. category row). */
         activePrimaryHref?: string;
     }
 
     let {
         mode = "expanded",
+        layout = "rail",
         items = [],
         currentPath = "",
         activePrimaryHref = "",
         ariaLabel = "Sidebar navigation",
         className = "",
+        logoSrc = "",
+        logoAlt = "",
+        brandName = "",
         showProfile = true,
         profileName = "Zabi",
         profileEmail = "hello@zabi.dev",
@@ -63,6 +90,9 @@
         searchMode = "input",
         searchPlaceholder = "Search...",
         searchValue = $bindable(""),
+        searchTriggerIcon = Command,
+        searchTriggerVariant = "outline",
+        searchTriggerSize = "sm",
         showLogout = true,
         logoutLabel = "Logout",
         showThemeToggle = true,
@@ -76,10 +106,19 @@
         onLogout,
         onThemeToggle,
         onEmptyStateAction,
+        onProfileClick,
+        profilePanelOpen = false,
+        profilePanelControlsId = "",
+        profilePanel,
         ...restProps
     }: Props = $props();
 
     const isCollapsed = $derived(mode === "collapsed");
+    const isCard = $derived(layout === "card");
+    const showBrandRow = $derived(
+        Boolean(logoSrc.trim() || brandName.trim()),
+    );
+
     const normalizedSearchTerm = $derived(searchValue.trim().toLowerCase());
     const primaryItems = $derived(
         items.filter((item) => item.group !== "secondary"),
@@ -87,11 +126,11 @@
     const secondaryItems = $derived(
         items.filter((item) => item.group === "secondary"),
     );
+
     function itemMatchesSearch(item: SidebarNavigationItem): boolean {
         return item.label.toLowerCase().includes(normalizedSearchTerm);
     }
 
-    /** Keep the current (and section) row visible even when it does not match the filter. */
     function itemPinnedBySelection(item: SidebarNavigationItem): boolean {
         if (currentPath === item.href) {
             return true;
@@ -119,36 +158,52 @@
         filteredPrimaryItems.length + filteredSecondaryItems.length > 0,
     );
 
+    function partitionBySection(
+        list: SidebarNavigationItem[],
+    ): NavSectionGroup[] {
+        const groups: NavSectionGroup[] = [];
+        for (const item of list) {
+            const label = item.section?.trim() || null;
+            const last = groups[groups.length - 1];
+            if (last && last.sectionLabel === label) {
+                last.items = [...last.items, item];
+            } else {
+                groups.push({ sectionLabel: label, items: [item] });
+            }
+        }
+        return groups;
+    }
+
+    const primarySectionGroups = $derived(
+        partitionBySection(filteredPrimaryItems),
+    );
+
+    const insetX = $derived(isCollapsed ? "px-2.5" : "px-4");
+
     const containerClasses = $derived.by(() => {
         const widthClass = isCollapsed ? "w-[104px]" : "w-[266px]";
-        const surfaceClasses = "bg-background border-border text-headline";
-        const baseClasses =
-            "flex h-full min-h-0 max-h-full flex-col overflow-hidden border-r py-6";
+        const railSurface = "border-r border-border bg-background text-headline";
+        const cardSurface =
+            "border-r border-border bg-background text-headline shadow-sm";
+        const surfaceClasses = isCard ? cardSurface : railSurface;
+        const verticalPad = isCard ? "py-4" : "py-5";
+        const baseClasses = `flex h-full min-h-0 max-h-full flex-col overflow-visible ${verticalPad}`;
 
         return `${baseClasses} ${widthClass} ${surfaceClasses} ${className}`.trim();
     });
 
-    const avatarClasses = $derived(
-        "size-14 rounded-2xl bg-action-primary text-action-primary flex items-center justify-center font-semibold text-base shrink-0",
+    const headerStackClasses = $derived(
+        `flex w-full shrink-0 flex-col gap-5 ${insetX}`,
     );
 
-    /** Search trigger (collapsed icon strip or button mode): matches nav item interaction tokens. */
-    const searchControlStates =
-        "text-nav-menu-item outline-none transition-colors duration-150 hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus";
-
-    const searchButtonClasses = $derived(
-        `flex min-h-11 w-full cursor-pointer items-center justify-center rounded-2xl border border-input-border bg-input px-0 py-2.5 ${searchControlStates}`,
-    );
-    const searchTriggerClasses = $derived.by(() => {
-        return isCollapsed
-            ? searchButtonClasses
-            : `flex min-h-11 w-full cursor-pointer items-center gap-3 rounded-2xl border border-input-border bg-input px-4 py-2.5 text-left ${searchControlStates}`;
-    });
     const iconContainerClasses = $derived(
         "flex size-6 shrink-0 items-center justify-center leading-none text-current",
     );
+    /** With `searchMode: "input"`, the field stays visible even if `onSearchClick` is set (e.g. Storybook). */
     const shouldRenderSearchButton = $derived(
-        isCollapsed || searchMode === "button" || Boolean(onSearchClick),
+        isCollapsed ||
+            searchMode === "button" ||
+            (Boolean(onSearchClick) && searchMode !== "input"),
     );
 
     function getTextToneClass(isMuted = false): string {
@@ -160,35 +215,18 @@
             currentPath === item.href ||
             (Boolean(activePrimaryHref) && item.href === activePrimaryHref);
         const layoutClasses = isCollapsed
-            ? "flex min-h-11 items-center justify-center px-0 py-2.5"
-            : "flex min-h-11 items-center gap-3 px-4 py-2.5";
+            ? "flex min-h-10 items-center justify-center px-0 py-2"
+            : "flex min-h-10 items-center gap-2.5 px-2.5 py-2";
         const structural =
-            "w-full cursor-pointer rounded-lg no-underline transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus";
+            "focus-ring focus-ring--nav w-full cursor-pointer rounded-lg no-underline transition-colors duration-150 outline-none";
 
         if (isActive) {
-            /* Current page: keep active surface on hover (do not apply inactive hover bg). */
             return `${structural} ${layoutClasses} bg-nav-menu-active text-inherit hover:bg-nav-menu-active hover:text-inherit active:opacity-90`;
         }
 
         return `${structural} ${layoutClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200`;
     }
 
-    function getControlButtonClasses(): string {
-        const baseClasses =
-            "w-full cursor-pointer rounded-lg text-nav-menu-item transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus";
-        const layoutClasses = isCollapsed
-            ? "flex min-h-11 items-center justify-center px-0 py-2.5"
-            : "flex min-h-11 items-center gap-3 px-4 py-2.5";
-
-        return `${baseClasses} ${layoutClasses}`;
-    }
-
-    const themeToggleContainerClasses = $derived(
-        isCollapsed
-            ? "flex w-full justify-center py-1"
-            : "flex w-full justify-start py-1",
-    );
-
     function handleNavigate(item: SidebarNavigationItem, event: MouseEvent) {
         if (onNavigate) {
             onNavigate(item, event);
@@ -201,19 +239,6 @@
         }
     }
 
-    function handleLogout() {
-        if (onLogout) {
-            onLogout();
-        }
-    }
-
-    function handleThemeToggle() {
-        isLightMode = !isLightMode;
-        if (onThemeToggle) {
-            onThemeToggle(isLightMode);
-        }
-    }
-
     function handleEmptyStateAction() {
         if (onEmptyStateAction) {
             onEmptyStateAction();
@@ -244,150 +269,186 @@
 </script>
 
 <nav class={containerClasses} aria-label={ariaLabel} {...restProps}>
-    <div class="flex w-full shrink-0 flex-col gap-6 px-2">
-        {#if showProfile}
-            <div class="flex w-full items-center gap-3">
-                <div class={avatarClasses} aria-hidden="true">
-                    {profileInitials}
-                </div>
-                {#if !isCollapsed}
-                    <div class="min-w-0">
-                        <p
-                            class="truncate text-base font-bold {getTextToneClass()}"
+    <div
+        class="flex min-h-0 w-full min-w-0 flex-1 flex-col"
+    >
+        <div class={`${headerStackClasses} pb-3`.trim()}>
+            {#if showBrandRow}
+                <SidebarBrandHeader
+                    collapsed={isCollapsed}
+                    {brandName}
+                    logoSrc={logoSrc.trim()}
+                    {logoAlt}
+                />
+            {/if}
+
+            {#if showSearch}
+                {#if shouldRenderSearchButton}
+                    {@const TriggerIcon = searchTriggerIcon}
+                    {#if isCollapsed}
+                        <span
+                            class="inline-flex"
+                            data-sidebar-flyout-anchor="search"
+                        >
+                            <IconButton
+                                variant={searchTriggerVariant}
+                                size={searchTriggerSize}
+                                label={searchPlaceholder}
+                                onclick={handleSearchClick}
+                            >
+                                <TriggerIcon size={18} />
+                            </IconButton>
+                        </span>
+                    {:else}
+                        <div
+                            class="w-full min-w-0"
+                            data-sidebar-flyout-anchor="search"
                         >
-                            {profileName}
-                        </p>
-                        <p class="truncate text-sm {getTextToneClass(true)}">
-                            {profileEmail}
-                        </p>
+                            <Button
+                                variant={searchTriggerVariant}
+                                size={searchTriggerSize}
+                                isFullWidth
+                                onclick={handleSearchClick}
+                            >
+                                <span class="flex w-full items-center justify-start gap-2.5">
+                                    <span class={iconContainerClasses} aria-hidden="true">
+                                        <TriggerIcon size={17} />
+                                    </span>
+                                    <span class="truncate text-sm text-inherit">
+                                        {searchValue || searchPlaceholder}
+                                    </span>
+                                </span>
+                            </Button>
+                        </div>
+                    {/if}
+                {:else}
+                    <div class="relative w-full">
+                        <span
+                            class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2"
+                            aria-hidden="true"
+                        >
+                            <Search size={17} class={getTextToneClass(true)} />
+                        </span>
+                        <Input
+                            type="search"
+                            bind:value={searchValue}
+                            placeholder={searchPlaceholder}
+                            aria-label={searchPlaceholder}
+                            class="focus-ring focus-ring--nav w-full min-w-0 min-h-10 rounded-xl border-transparent !bg-transparent py-2 pl-10 text-sm ring-1 ring-border/60 hover:!bg-nav-menu-hover focus:!bg-transparent"
+                        />
                     </div>
                 {/if}
-            </div>
-        {/if}
-
-        {#if showSearch}
-            {#if shouldRenderSearchButton}
-                <button
-                    type="button"
-                    class={searchTriggerClasses}
-                    onclick={handleSearchClick}
-                    aria-label={searchPlaceholder}
-                >
-                    <span
-                        class="truncate text-base text-inherit transition-colors"
-                    >
-                        {searchValue || searchPlaceholder}
-                    </span>
-                </button>
-            {:else}
-                <div class="relative w-full">
-                    <span
-                        class="pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2"
-                        aria-hidden="true"
-                    >
-                        <Search size={20} class={getTextToneClass(true)} />
-                    </span>
-                    <Input
-                        type="search"
-                        bind:value={searchValue}
-                        placeholder={searchPlaceholder}
-                        aria-label={searchPlaceholder}
-                        class="w-full min-w-0 rounded-2xl pl-12"
-                    />
-                </div>
             {/if}
-        {/if}
-    </div>
+        </div>
 
-    <div
-        class="flex min-h-0 flex-1 w-full flex-col gap-6 overflow-y-auto overflow-x-hidden overscroll-y-contain py-1"
-        role="region"
-        aria-label="Navigation links"
-    >
+        <div
+            class={`flex min-h-0 min-w-0 flex-1 flex-col gap-3 overflow-y-auto overflow-x-hidden overscroll-y-contain pt-4 pb-1.5 ${insetX}`}
+            role="region"
+            aria-label="Navigation links"
+        >
         {#if hasFilteredItems}
-            <ul
-                class="flex w-full flex-col gap-2 px-2"
-                aria-label="Primary navigation"
+            <div
+                class="flex w-full min-w-0 flex-col divide-y divide-border"
             >
-                {#each filteredPrimaryItems as item (item.id)}
-                    {@const Icon = item.icon}
-                    <li>
-                        <a
-                            href={item.href}
-                            class={getNavItemClasses(item)}
-                            onclick={(event) => handleNavigate(item, event)}
-                            aria-current={getAriaCurrent(item)}
-                            aria-label={isCollapsed ? item.label : undefined}
+                {#each primarySectionGroups as group, gi (`${gi}-${group.sectionLabel ?? "x"}`)}
+                    <div class="py-4 first:pt-1 last:pb-1">
+                        <SidebarNavSection
+                            title={group.sectionLabel ?? ""}
+                            sectionKey={`p-${gi}`}
+                            listAriaLabel={group.sectionLabel
+                                ? `${group.sectionLabel} navigation`
+                                : "Primary navigation"}
+                            collapsed={isCollapsed}
                         >
-                            {#if Icon}
-                                <span
-                                    class={iconContainerClasses}
-                                    aria-hidden="true"
-                                >
-                                    <Icon size={20} />
-                                </span>
-                            {/if}
-                            {#if !isCollapsed}
-                                <span
-                                    class="text-base leading-snug text-inherit"
-                                    >{item.label}</span
-                                >
-                            {/if}
-                            {#if !isCollapsed && getItemBadgeText(item) !== null}
-                                <span class="ml-auto">
-                                    <Badge
-                                        variant="default"
-                                        size="sm"
-                                        text={getItemBadgeText(item) ?? ""}
-                                    />
-                                </span>
-                            {/if}
-                        </a>
-                    </li>
+                            {#each group.items as item (item.id)}
+                                {@const Icon = item.icon}
+                                <li>
+                                    <a
+                                        href={item.href}
+                                        class={getNavItemClasses(item)}
+                                        onclick={(event) => handleNavigate(item, event)}
+                                        aria-current={getAriaCurrent(item)}
+                                        aria-label={isCollapsed ? item.label : undefined}
+                                    >
+                                        {#if Icon}
+                                            <span
+                                                class={iconContainerClasses}
+                                                aria-hidden="true"
+                                            >
+                                                <Icon size={18} />
+                                            </span>
+                                        {/if}
+                                        {#if !isCollapsed}
+                                            <span
+                                                class="text-sm font-medium leading-snug text-inherit"
+                                                >{item.label}</span
+                                            >
+                                        {/if}
+                                        {#if !isCollapsed && getItemBadgeText(item) !== null}
+                                            <span class="ml-auto">
+                                                <Badge
+                                                    variant="default"
+                                                    size="sm"
+                                                    text={getItemBadgeText(item) ?? ""}
+                                                />
+                                            </span>
+                                        {/if}
+                                    </a>
+                                </li>
+                            {/each}
+                        </SidebarNavSection>
+                    </div>
                 {/each}
-            </ul>
+            </div>
 
             {#if filteredSecondaryItems.length > 0}
-                <ul
-                    class="flex w-full flex-col gap-3 px-2"
-                    aria-label="Secondary navigation"
+                <div
+                    class="mt-3 border-t border-border pt-4"
+                    role="presentation"
                 >
-                    {#each filteredSecondaryItems as item (item.id)}
-                        {@const Icon = item.icon}
-                        <li>
-                            <a
-                                href={item.href}
-                                class={getNavItemClasses(item)}
-                                onclick={(event) => handleNavigate(item, event)}
-                                aria-current={getAriaCurrent(item)}
-                                aria-label={isCollapsed
-                                    ? item.label
-                                    : undefined}
-                            >
-                                {#if Icon}
-                                    <span
-                                        class={iconContainerClasses}
-                                        aria-hidden="true"
-                                    >
-                                        <Icon size={20} />
-                                    </span>
-                                {/if}
-                                {#if !isCollapsed}
-                                    <span
-                                        class="text-base leading-snug text-inherit"
-                                        >{item.label}</span
-                                    >
-                                {/if}
-                            </a>
-                        </li>
-                    {/each}
-                </ul>
+                    <SidebarNavSection
+                        sectionKey="secondary"
+                        listAriaLabel="Secondary navigation"
+                        collapsed={isCollapsed}
+                    >
+                        {#each filteredSecondaryItems as item (item.id)}
+                            {@const Icon = item.icon}
+                            <li>
+                                <a
+                                    href={item.href}
+                                    class={getNavItemClasses(item)}
+                                    onclick={(event) =>
+                                        handleNavigate(item, event)}
+                                    aria-current={getAriaCurrent(item)}
+                                    aria-label={isCollapsed
+                                        ? item.label
+                                        : undefined}
+                                >
+                                    {#if Icon}
+                                        <span
+                                            class={iconContainerClasses}
+                                            aria-hidden="true"
+                                        >
+                                            <Icon size={18} />
+                                        </span>
+                                    {/if}
+                                    {#if !isCollapsed}
+                                        <span
+                                            class="text-sm font-medium leading-snug text-inherit"
+                                            >{item.label}</span
+                                        >
+                                    {/if}
+                                </a>
+                            </li>
+                        {/each}
+                    </SidebarNavSection>
+                </div>
             {/if}
         {:else}
             <div
-                class="rounded-2xl border border-border border-dashed bg-base-50 px-4 py-5"
+                class="rounded-xl border border-border border-dashed bg-transparent px-3.5 py-4 ring-1 ring-border/60"
             >
-                <h3 class="text-base font-semibold {getTextToneClass()}">
+                <h3 class="text-sm font-semibold {getTextToneClass()}">
                     {normalizedSearchTerm && searchMode === "input"
                         ? "No matching navigation items"
                         : emptyStateTitle}
@@ -400,7 +461,7 @@
                 {#if !(normalizedSearchTerm && searchMode === "input")}
                     <button
                         type="button"
-                        class="mt-4 inline-flex min-h-11 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary outline-none transition-colors hover:bg-action-primary-hover focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus"
+                        class="focus-ring focus-ring--nav mt-3 inline-flex min-h-10 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm font-medium text-action-primary outline-none transition-colors hover:bg-action-primary-hover"
                         onclick={handleEmptyStateAction}
                     >
                         {emptyStateActionLabel}
@@ -408,57 +469,26 @@
                 {/if}
             </div>
         {/if}
+        </div>
     </div>
 
-    {#if showLogout || showThemeToggle}
-        <div
-            class="flex w-full shrink-0 flex-col gap-2 border-t border-border pt-4 px-2"
-        >
-            {#if showLogout}
-                <button
-                    type="button"
-                    class={getControlButtonClasses()}
-                    onclick={handleLogout}
-                >
-                    <span class={iconContainerClasses} aria-hidden="true">
-                        <LogOut size={20} />
-                    </span>
-                    {#if !isCollapsed}
-                        <span class="text-base text-inherit">{logoutLabel}</span
-                        >
-                    {/if}
-                </button>
-            {/if}
-
-            {#if showThemeToggle}
-                <div class={themeToggleContainerClasses}>
-                    <button
-                        type="button"
-                        class="inline-flex h-8 w-14 cursor-pointer items-center rounded-2xl p-1 outline-none transition-colors duration-150 hover:opacity-95 active:opacity-90 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus {isLightMode
-                            ? 'bg-action-primary'
-                            : 'bg-base-200'}"
-                        onclick={handleThemeToggle}
-                        role="switch"
-                        aria-checked={isLightMode}
-                        title={lightModeLabel}
-                        aria-label={isLightMode
-                            ? "Switch to dark mode"
-                            : "Switch to light mode"}
-                    >
-                        <span
-                            class="flex h-6 w-6 items-center justify-center rounded-xl leading-none shadow-sm transition-transform duration-150 active:scale-95 {isLightMode
-                                ? 'translate-x-6 bg-base-900 text-action-primary'
-                                : 'translate-x-0 bg-base-900 text-base-50'}"
-                        >
-                            {#if isLightMode}
-                                <Sun size={14} />
-                            {:else}
-                                <Moon size={14} />
-                            {/if}
-                        </span>
-                    </button>
-                </div>
-            {/if}
-        </div>
-    {/if}
+    <SidebarFooter
+        collapsed={isCollapsed}
+        {showProfile}
+        {profileName}
+        {profileEmail}
+        {profileInitials}
+        {showLogout}
+        {logoutLabel}
+        {showThemeToggle}
+        {lightModeLabel}
+        bind:isLightMode
+        {onLogout}
+        {onThemeToggle}
+        {onProfileClick}
+        {profilePanelOpen}
+        {profilePanelControlsId}
+        {profilePanel}
+        className={insetX}
+    />
 </nav>