zabi-components 5.0.22 → 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,14 +63,25 @@
         onLogout?: () => void;
         onThemeToggle?: (nextIsLightMode: boolean) => void;
         onEmptyStateAction?: () => void;
+        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",
@@ -57,6 +90,9 @@
         searchMode = "input",
         searchPlaceholder = "Search...",
         searchValue = $bindable(""),
+        searchTriggerIcon = Command,
+        searchTriggerVariant = "outline",
+        searchTriggerSize = "sm",
         showLogout = true,
         logoutLabel = "Logout",
         showThemeToggle = true,
@@ -70,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"),
@@ -81,17 +126,31 @@
     const secondaryItems = $derived(
         items.filter((item) => item.group === "secondary"),
     );
+
+    function itemMatchesSearch(item: SidebarNavigationItem): boolean {
+        return item.label.toLowerCase().includes(normalizedSearchTerm);
+    }
+
+    function itemPinnedBySelection(item: SidebarNavigationItem): boolean {
+        if (currentPath === item.href) {
+            return true;
+        }
+        return Boolean(activePrimaryHref) && item.href === activePrimaryHref;
+    }
+
     const filteredPrimaryItems = $derived(
         searchMode === "input" && normalizedSearchTerm
-            ? primaryItems.filter((item) =>
-                  item.label.toLowerCase().includes(normalizedSearchTerm),
+            ? primaryItems.filter(
+                  (item) =>
+                      itemMatchesSearch(item) || itemPinnedBySelection(item),
               )
             : primaryItems,
     );
     const filteredSecondaryItems = $derived(
         searchMode === "input" && normalizedSearchTerm
-            ? secondaryItems.filter((item) =>
-                  item.label.toLowerCase().includes(normalizedSearchTerm),
+            ? secondaryItems.filter(
+                  (item) =>
+                      itemMatchesSearch(item) || itemPinnedBySelection(item),
               )
             : secondaryItems,
     );
@@ -99,32 +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 =
-            "h-full min-h-[640px] border-r flex flex-col justify-between px-6 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}`,
     );
 
-    const searchButtonClasses = $derived(
-        "w-full rounded-2xl bg-input transition-colors duration-150 flex min-h-11 items-center justify-center px-0 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0",
-    );
-    const searchTriggerClasses = $derived.by(() => {
-        return isCollapsed
-            ? searchButtonClasses
-            : "w-full rounded-2xl bg-input transition-colors duration-150 flex min-h-11 items-center gap-3 px-4 py-2.5 text-left focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
-    });
     const iconContainerClasses = $derived(
-        "flex size-6 shrink-0 items-center justify-center leading-none",
+        "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 {
@@ -132,36 +211,22 @@
     }
 
     function getNavItemClasses(item: SidebarNavigationItem): string {
-        const isActive = currentPath === item.href;
-        const baseClasses =
-            "w-full rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+        const isActive =
+            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 =
+            "focus-ring focus-ring--nav w-full cursor-pointer rounded-lg no-underline transition-colors duration-150 outline-none";
 
         if (isActive) {
-            return `${baseClasses} ${layoutClasses} bg-action-primary-subtle text-headline`;
+            return `${structural} ${layoutClasses} bg-nav-menu-active text-inherit hover:bg-nav-menu-active hover:text-inherit active:opacity-90`;
         }
 
-        return `${baseClasses} ${layoutClasses} text-description hover:bg-base-50 hover:text-headline`;
-    }
-
-    function getControlButtonClasses(): string {
-        const baseClasses =
-            "w-full rounded-lg text-description hover:text-headline hover:bg-base-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
-        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}`;
+        return `${structural} ${layoutClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200`;
     }
 
-    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);
@@ -174,19 +239,6 @@
         }
     }
 
-    function handleLogout() {
-        if (onLogout) {
-            onLogout();
-        }
-    }
-
-    function handleThemeToggle() {
-        isLightMode = !isLightMode;
-        if (onThemeToggle) {
-            onThemeToggle(isLightMode);
-        }
-    }
-
     function handleEmptyStateAction() {
         if (onEmptyStateAction) {
             onEmptyStateAction();
@@ -202,112 +254,162 @@
         }
         return null;
     }
+
+    function getAriaCurrent(
+        item: SidebarNavigationItem,
+    ): "page" | "location" | undefined {
+        if (currentPath === item.href) {
+            return "page";
+        }
+        if (activePrimaryHref && item.href === activePrimaryHref) {
+            return "location";
+        }
+        return undefined;
+    }
 </script>
 
 <nav class={containerClasses} aria-label={ariaLabel} {...restProps}>
-    <div class="flex w-full flex-col gap-11">
-        {#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()}"
-                        >
-                            {profileName}
-                        </p>
-                        <p class="truncate text-sm {getTextToneClass(true)}">
-                            {profileEmail}
-                        </p>
-                    </div>
-                {/if}
-            </div>
-        {/if}
+    <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}
 
-        <div class="flex w-full flex-col gap-6">
             {#if showSearch}
                 {#if shouldRenderSearchButton}
-                    <button
-                        type="button"
-                        class={searchTriggerClasses}
-                        onclick={handleSearchClick}
-                        aria-label={searchPlaceholder}
-                    >
-                        <span class="truncate text-base {getTextToneClass(true)}">
-                            {searchValue || searchPlaceholder}
+                    {@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>
-                    </button>
+                    {:else}
+                        <div
+                            class="w-full min-w-0"
+                            data-sidebar-flyout-anchor="search"
+                        >
+                            <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-4 top-1/2 -translate-y-1/2 z-10"
+                            class="pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2"
                             aria-hidden="true"
                         >
-                            <Search size={20} class={getTextToneClass(true)} />
+                            <Search size={17} 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"
+                            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}
             {/if}
+        </div>
 
-            {#if hasFilteredItems}
-                <ul
-                    class="flex w-full flex-col gap-2"
-                    aria-label="Primary navigation"
-                >
-                    {#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={currentPath === item.href
-                                    ? "page"
-                                    : undefined}
-                                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"
-                                        >{item.label}</span
+        <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}
+            <div
+                class="flex w-full min-w-0 flex-col divide-y divide-border"
+            >
+                {#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}
+                        >
+                            {#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}
-                                {#if !isCollapsed && getItemBadgeText(item) !== null}
-                                    <span class="ml-auto">
-                                        <Badge
-                                            variant="default"
-                                            size="sm"
-                                            text={getItemBadgeText(item) ?? ""}
-                                        />
-                                    </span>
-                                {/if}
-                            </a>
-                        </li>
-                    {/each}
-                </ul>
+                                        {#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}
+            </div>
 
-                {#if filteredSecondaryItems.length > 0}
-                    <ul
-                        class="flex w-full flex-col gap-3"
-                        aria-label="Secondary navigation"
+            {#if filteredSecondaryItems.length > 0}
+                <div
+                    class="mt-3 border-t border-border pt-4"
+                    role="presentation"
+                >
+                    <SidebarNavSection
+                        sectionKey="secondary"
+                        listAriaLabel="Secondary navigation"
+                        collapsed={isCollapsed}
                     >
                         {#each filteredSecondaryItems as item (item.id)}
                             {@const Icon = item.icon}
@@ -317,9 +419,7 @@
                                     class={getNavItemClasses(item)}
                                     onclick={(event) =>
                                         handleNavigate(item, event)}
-                                    aria-current={currentPath === item.href
-                                        ? "page"
-                                        : undefined}
+                                    aria-current={getAriaCurrent(item)}
                                     aria-label={isCollapsed
                                         ? item.label
                                         : undefined}
@@ -329,92 +429,66 @@
                                             class={iconContainerClasses}
                                             aria-hidden="true"
                                         >
-                                            <Icon size={20} />
+                                            <Icon size={18} />
                                         </span>
                                     {/if}
                                     {#if !isCollapsed}
-                                        <span class="text-base leading-snug"
+                                        <span
+                                            class="text-sm font-medium leading-snug text-inherit"
                                             >{item.label}</span
                                         >
                                     {/if}
                                 </a>
                             </li>
                         {/each}
-                    </ul>
-                {/if}
-            {:else}
-                <div
-                    class="rounded-2xl border border-border border-dashed bg-base-50 px-4 py-5"
-                >
-                    <h3 class="text-base font-semibold {getTextToneClass()}">
-                        {normalizedSearchTerm
-                        && searchMode === "input"
-                            ? "No matching navigation items"
-                            : emptyStateTitle}
-                    </h3>
-                    <p class="mt-1 text-sm {getTextToneClass(true)}">
-                        {normalizedSearchTerm
-                        && searchMode === "input"
-                            ? `No results found for "${searchValue}". Try another keyword.`
-                            : emptyStateDescription}
-                    </p>
-                    {#if !(normalizedSearchTerm && searchMode === "input")}
-                        <button
-                            type="button"
-                            class="mt-4 inline-flex min-h-11 items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary hover:bg-action-primary-hover focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0"
-                            onclick={handleEmptyStateAction}
-                        >
-                            {emptyStateActionLabel}
-                        </button>
-                    {/if}
+                    </SidebarNavSection>
                 </div>
             {/if}
-        </div>
-    </div>
-
-    <div class="flex w-full flex-col gap-2">
-        {#if showLogout}
-            <button
-                type="button"
-                class={getControlButtonClasses()}
-                onclick={handleLogout}
+        {:else}
+            <div
+                class="rounded-xl border border-border border-dashed bg-transparent px-3.5 py-4 ring-1 ring-border/60"
             >
-                <span class={iconContainerClasses} aria-hidden="true">
-                    <LogOut size={20} />
-                </span>
-                {#if !isCollapsed}
-                    <span class="text-base">{logoutLabel}</span>
-                {/if}
-            </button>
-        {/if}
-
-        {#if showThemeToggle}
-            <div class={themeToggleContainerClasses}>
-                <button
-                    type="button"
-                    class="inline-flex h-8 w-14 items-center rounded-2xl p-1 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0 {isLightMode
-                        ? 'bg-action-primary'
-                        : 'bg-base-200'}"
-                    onclick={handleThemeToggle}
-                    role="switch"
-                    aria-checked={isLightMode}
-                    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 {isLightMode
-                            ? 'translate-x-6 bg-base-900 text-action-primary'
-                            : 'translate-x-0 bg-base-900 text-base-50'}"
+                <h3 class="text-sm font-semibold {getTextToneClass()}">
+                    {normalizedSearchTerm && searchMode === "input"
+                        ? "No matching navigation items"
+                        : emptyStateTitle}
+                </h3>
+                <p class="mt-1 text-sm {getTextToneClass(true)}">
+                    {normalizedSearchTerm && searchMode === "input"
+                        ? `No results found for "${searchValue}". Try another keyword.`
+                        : emptyStateDescription}
+                </p>
+                {#if !(normalizedSearchTerm && searchMode === "input")}
+                    <button
+                        type="button"
+                        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}
                     >
-                        {#if isLightMode}
-                            <Sun size={14} />
-                        {:else}
-                            <Moon size={14} />
-                        {/if}
-                    </span>
-                </button>
+                        {emptyStateActionLabel}
+                    </button>
+                {/if}
             </div>
         {/if}
+        </div>
     </div>
+
+    <SidebarFooter
+        collapsed={isCollapsed}
+        {showProfile}
+        {profileName}
+        {profileEmail}
+        {profileInitials}
+        {showLogout}
+        {logoutLabel}
+        {showThemeToggle}
+        {lightModeLabel}
+        bind:isLightMode
+        {onLogout}
+        {onThemeToggle}
+        {onProfileClick}
+        {profilePanelOpen}
+        {profilePanelControlsId}
+        {profilePanel}
+        className={insetX}
+    />
 </nav>