seblify 0.2.0 → 0.3.0

package/dist/components/framework/navigation/sidebar/sidebar/Sidebar.svelte

@@ -0,0 +1,712 @@
+<script lang="ts">
+  import type { SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import ChevronLeftIcon from '../../../../../icons/generated/chevron-left.svelte';
+  import Sidenav from '../sidenav/Sidenav.svelte';
+  import type {
+    SidenavActionDetail,
+    SidenavItemData,
+  } from '../sidenav/sidenav';
+
+  type Viewport = 'desktop' | 'tablet' | 'mobile';
+
+  type Props = SeblifyProps<{
+    items: SidenavItemData[];
+    footerItems?: SidenavItemData[];
+    currentHref?: string;
+    maxMainNavDepth?: number;
+    ariaLabel?: string;
+    open?: boolean;
+    onAction?: (detail: SidenavActionDetail) => void;
+    brand?: Snippet;
+    search?: Snippet;
+    footer?: Snippet;
+    label?: Snippet<[SidenavItemData]>;
+    trailing?: Snippet<[SidenavItemData]>;
+  }>;
+
+  let {
+    items,
+    footerItems = [],
+    currentHref,
+    maxMainNavDepth,
+    ariaLabel = 'Sidebar',
+    open = $bindable(false),
+    onAction,
+    brand,
+    search,
+    footer,
+    label,
+    trailing,
+  }: Props = $props();
+
+  let viewportWidth = $state<number | undefined>(undefined);
+  let mainExpanded = $state(false);
+  let previousHref = $state<string | undefined>(undefined);
+  let pendingExpandedHref = $state<string | undefined>(undefined);
+
+  let selectedPath = $derived(
+    findSelectedPathInSections([items, footerItems], currentHref),
+  );
+  let constrainedMainDepth = $derived(
+    typeof maxMainNavDepth === 'number' && maxMainNavDepth > 0
+      ? Math.floor(maxMainNavDepth)
+      : undefined,
+  );
+  let viewport = $derived.by<Viewport>(() => {
+    if (viewportWidth === undefined) {
+      return 'desktop';
+    }
+
+    if (viewportWidth <= 760) {
+      return 'mobile';
+    }
+
+    if (viewportWidth <= 1024) {
+      return 'tablet';
+    }
+
+    return 'desktop';
+  });
+  let isDesktop = $derived(viewport === 'desktop');
+  let isTablet = $derived(viewport === 'tablet');
+  let isMobile = $derived(viewport === 'mobile');
+  let deepPanelRoot = $derived(
+    getDeepPanelRoot(selectedPath, constrainedMainDepth),
+  );
+  let hasDeepPanel = $derived(Boolean(deepPanelRoot));
+  let split = $derived(hasDeepPanel && !mainExpanded);
+  let desktopMainDepth = $derived(split ? 1 : constrainedMainDepth);
+  let mainOpenIds = $derived(
+    constrainedMainDepth
+      ? selectedPath
+          .slice(0, Math.max(0, constrainedMainDepth - 1))
+          .map((item) => item.id)
+      : [],
+  );
+  let deepPanelItems = $derived(deepPanelRoot?.children ?? []);
+  let deepPanelOpenIds = $derived(
+    constrainedMainDepth && selectedPath.length > constrainedMainDepth
+      ? selectedPath.slice(constrainedMainDepth, -1).map((item) => item.id)
+      : [],
+  );
+  let showDesktopSidebar = $derived(isDesktop);
+  let showTabletRail = $derived(isTablet);
+  let showOverlay = $derived(!isDesktop && open);
+  let overlayMode = $derived.by<'main' | 'deep' | 'split'>(() => {
+    if (!hasDeepPanel || mainExpanded) {
+      return 'main';
+    }
+
+    return isMobile ? 'split' : 'deep';
+  });
+
+  $effect(() => {
+    if (currentHref !== previousHref) {
+      previousHref = currentHref;
+
+      if (currentHref && pendingExpandedHref === currentHref) {
+        pendingExpandedHref = undefined;
+        mainExpanded = true;
+      } else {
+        pendingExpandedHref = undefined;
+        mainExpanded = false;
+      }
+    }
+  });
+
+  function close(): void {
+    open = false;
+  }
+
+  function expandMainPanel(): void {
+    if (hasDeepPanel) {
+      mainExpanded = true;
+    }
+  }
+
+  function handleMainItemActivate(item: SidenavItemData): void {
+    if (item.disabled) {
+      return;
+    }
+
+    if (
+      mainExpanded &&
+      deepPanelRoot &&
+      item.id === deepPanelRoot.id &&
+      item.children?.length
+    ) {
+      mainExpanded = false;
+      return;
+    }
+
+    if (!item.href && !item.action) {
+      expandMainPanel();
+      return;
+    }
+  }
+
+  function handleDeepBackClick(event: MouseEvent): void {
+    expandMainPanel();
+
+    if (!deepPanelRoot?.href || deepPanelRoot.href === currentHref) {
+      event.preventDefault();
+      return;
+    }
+
+    pendingExpandedHref = deepPanelRoot.href;
+  }
+
+  function handleTabletRailActivate(event: MouseEvent): void {
+    if (!isTablet) {
+      return;
+    }
+
+    const target = event.target;
+
+    if (!(target instanceof Element)) {
+      return;
+    }
+
+    const trigger = target.closest('a,button');
+
+    if (!(trigger instanceof HTMLElement)) {
+      return;
+    }
+
+    if (
+      (trigger instanceof HTMLButtonElement && trigger.disabled) ||
+      trigger.getAttribute('aria-disabled') === 'true'
+    ) {
+      return;
+    }
+
+    open = true;
+  }
+
+  function findSelectedPathInSections(
+    sections: SidenavItemData[][],
+    href: string | undefined,
+  ): SidenavItemData[] {
+    for (const section of sections) {
+      const path = findSelectedPath(section, href);
+
+      if (path.length) {
+        return path;
+      }
+    }
+
+    return [];
+  }
+
+  function findSelectedPath(
+    searchItems: SidenavItemData[] | undefined,
+    href: string | undefined,
+  ): SidenavItemData[] {
+    if (!searchItems?.length || !href) {
+      return [];
+    }
+
+    for (const item of searchItems) {
+      if (item.href === href) {
+        return [item];
+      }
+
+      const childPath = findSelectedPath(item.children, href);
+
+      if (childPath.length) {
+        return [item, ...childPath];
+      }
+    }
+
+    return [];
+  }
+
+  function getDeepPanelRoot(
+    path: SidenavItemData[],
+    depthLimit: number | undefined,
+  ): SidenavItemData | undefined {
+    if (depthLimit === undefined || path.length < depthLimit) {
+      return undefined;
+    }
+
+    const candidate = path[depthLimit - 1];
+
+    return candidate?.children?.length ? candidate : undefined;
+  }
+</script>
+
+<svelte:window bind:innerWidth={viewportWidth} />
+
+{#snippet mainPanel(
+  compactMode: boolean,
+  depthLimit: number | undefined,
+  showChrome: boolean,
+  railTrigger: boolean,
+)}
+  <section
+    class:sidebar__main-panel--compact={compactMode}
+    class="sidebar__main-panel"
+    onclickcapture={railTrigger ? handleTabletRailActivate : undefined}
+  >
+    <div class="sidebar__main-stack">
+      {#if showChrome && brand}
+        <div class="sidebar__brand">
+          {@render brand()}
+        </div>
+      {/if}
+
+      {#if showChrome && search}
+        <div class="sidebar__search">
+          {@render search()}
+        </div>
+      {/if}
+
+      <div class="sidebar__main-nav">
+        <Sidenav
+          compact={compactMode}
+          currentHref={currentHref}
+          defaultOpenIds={compactMode ? [] : mainOpenIds}
+          {items}
+          {label}
+          maxDepth={depthLimit}
+          {onAction}
+          onItemActivate={handleMainItemActivate}
+          {trailing}
+        />
+      </div>
+
+      {#if footerItems.length || (showChrome && footer)}
+        <div class="sidebar__main-footer">
+          {#if footerItems.length}
+            <Sidenav
+              compact={compactMode}
+              currentHref={currentHref}
+              defaultOpenIds={compactMode ? [] : mainOpenIds}
+              items={footerItems}
+              {label}
+              maxDepth={compactMode ? 1 : depthLimit}
+              {onAction}
+              onItemActivate={handleMainItemActivate}
+              {trailing}
+            />
+          {/if}
+
+          {#if showChrome && footer}
+            <div class="sidebar__footer-content">
+              {@render footer()}
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </section>
+{/snippet}
+
+{#snippet deepPanel()}
+  {#if deepPanelRoot}
+    <section class="sidebar__deep-panel">
+      <div class="sidebar__deep-header">
+        {#if deepPanelRoot.href}
+          <a
+            class="sidebar__deep-back"
+            href={deepPanelRoot.href}
+            onclick={handleDeepBackClick}
+          >
+            <span aria-hidden="true">
+              <ChevronLeftIcon size="1rem" />
+            </span>
+            <span class="sidebar__deep-title">{deepPanelRoot.label ?? 'Section'}</span>
+          </a>
+        {:else}
+          <button class="sidebar__deep-back" onclick={expandMainPanel} type="button">
+            <span aria-hidden="true">
+              <ChevronLeftIcon size="1rem" />
+            </span>
+            <span class="sidebar__deep-title">{deepPanelRoot.label ?? 'Section'}</span>
+          </button>
+        {/if}
+      </div>
+
+      <div class="sidebar__deep-nav">
+        <Sidenav
+          currentHref={currentHref}
+          defaultOpenIds={deepPanelOpenIds}
+          items={deepPanelItems}
+          {label}
+          openStateKey={currentHref}
+          {onAction}
+          {trailing}
+        />
+      </div>
+    </section>
+  {/if}
+{/snippet}
+
+{#if showOverlay}
+  <button
+    aria-label="Close sidebar"
+    class="sidebar-backdrop"
+    onclick={close}
+    type="button"
+  ></button>
+{/if}
+
+{#if showDesktopSidebar}
+  <aside
+    aria-label={ariaLabel}
+    class:split
+    class:sidebar--main-expanded={mainExpanded}
+    class="sidebar sidebar--desktop"
+  >
+    <div class="sidebar__panels">
+      {@render mainPanel(split, desktopMainDepth, true, false)}
+      {@render deepPanel()}
+    </div>
+  </aside>
+{/if}
+
+{#if showTabletRail}
+  <aside aria-label={ariaLabel} class="sidebar sidebar--tablet-rail">
+    <div class="sidebar__panels">
+      {@render mainPanel(true, 1, false, true)}
+    </div>
+  </aside>
+{/if}
+
+{#if showOverlay}
+  <div
+    aria-label={ariaLabel}
+    aria-modal="true"
+    class:sidebar--overlay-deep={overlayMode === 'deep'}
+    class:sidebar--overlay-main={overlayMode === 'main'}
+    class:sidebar--overlay-split={overlayMode === 'split'}
+    class="sidebar sidebar--overlay"
+    role="dialog"
+  >
+    <div class="sidebar__panels">
+      {#if overlayMode === 'main'}
+        {@render mainPanel(false, constrainedMainDepth, true, false)}
+      {:else if overlayMode === 'split'}
+        {@render mainPanel(true, 1, false, false)}
+        {@render deepPanel()}
+      {:else}
+        {@render deepPanel()}
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .sidebar {
+    --sidebar-height: 100vh;
+    --sidebar-rail-width: 4.5rem;
+    --sidebar-panel-width: 19rem;
+    --sidebar-deep-width: 20rem;
+    --sidebar-desktop-main-width: var(--sidebar-panel-width);
+    --sidebar-desktop-deep-width: 0rem;
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .sidebar__panels {
+    display: grid;
+    height: 100%;
+  }
+
+  .sidebar--desktop {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    width: var(--sidebar-panel-width);
+    height: var(--sidebar-height);
+    transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidebar--desktop .sidebar__panels {
+    grid-template-columns: var(--sidebar-desktop-main-width) var(
+        --sidebar-desktop-deep-width
+      );
+    width: 100%;
+    height: 100%;
+    transition: grid-template-columns 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidebar--desktop.split {
+    --sidebar-desktop-main-width: var(--sidebar-rail-width);
+    --sidebar-desktop-deep-width: var(--sidebar-deep-width);
+    width: calc(var(--sidebar-rail-width) + var(--sidebar-deep-width));
+  }
+
+  .sidebar--desktop.sidebar--main-expanded {
+    --sidebar-desktop-main-width: var(--sidebar-rail-width);
+    --sidebar-desktop-deep-width: var(--sidebar-deep-width);
+    width: calc(var(--sidebar-rail-width) + var(--sidebar-deep-width));
+  }
+
+  .sidebar--tablet-rail {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    width: var(--sidebar-rail-width);
+    height: var(--sidebar-height);
+  }
+
+  .sidebar--tablet-rail .sidebar__panels {
+    grid-template-columns: var(--sidebar-rail-width);
+  }
+
+  .sidebar--overlay {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 40;
+    height: 100dvh;
+  }
+
+  .sidebar--overlay-main {
+    left: 0;
+  }
+
+  .sidebar--overlay-main .sidebar__panels {
+    grid-template-columns: var(--sidebar-panel-width);
+    width: min(22rem, calc(100vw - 2rem));
+    max-width: 100vw;
+  }
+
+  .sidebar--overlay-deep .sidebar__panels {
+    grid-template-columns: var(--sidebar-deep-width);
+    width: min(22rem, calc(100vw - var(--sidebar-rail-width) - 1rem));
+    max-width: calc(100vw - var(--sidebar-rail-width));
+  }
+
+  .sidebar--overlay-split .sidebar__panels {
+    grid-template-columns: var(--sidebar-rail-width) minmax(16rem, 20rem);
+    width: min(44rem, calc(100vw - 2rem));
+    max-width: 100vw;
+  }
+
+  .sidebar--overlay .sidebar__panels,
+  .sidebar--tablet-rail .sidebar__panels {
+    box-shadow: var(--seblify-shadow-raised, 0 12px 28px rgb(23 32 51 / 22%));
+  }
+
+  .sidebar--overlay-main,
+  .sidebar--overlay-split {
+    left: 0;
+  }
+
+  .sidebar--overlay-deep {
+    left: var(--sidebar-rail-width);
+  }
+
+  .sidebar__main-panel,
+  .sidebar__deep-panel {
+    min-width: 0;
+    height: 100%;
+    overflow-x: clip;
+    overflow-y: auto;
+    background: var(--seblify-color-surface, #ffffff);
+  }
+
+  .sidebar--desktop .sidebar__main-panel {
+    position: relative;
+    grid-column: 1;
+    grid-row: 1;
+    width: var(--sidebar-desktop-main-width);
+    transition:
+      width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      grid-column 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidebar--desktop .sidebar__deep-panel {
+    grid-column: 2;
+    grid-row: 1;
+    width: var(--sidebar-desktop-deep-width);
+    opacity: 1;
+    transition:
+      width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity 180ms ease,
+      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidebar--desktop.sidebar--main-expanded .sidebar__main-panel {
+    grid-column: 1 / span 2;
+    width: var(--sidebar-panel-width);
+    position: relative;
+    justify-self: start;
+    z-index: 1;
+    min-height: 100%;
+  }
+
+  .sidebar--desktop.sidebar--main-expanded .sidebar__deep-panel {
+    opacity: 1;
+    pointer-events: none;
+  }
+
+  .sidebar__main-panel {
+    border-right: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
+  }
+
+  .sidebar__deep-panel {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    gap: 0.75rem;
+    padding: 1rem 0.875rem;
+    border-right: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
+    background: var(--seblify-color-surface-raised, #ffffff);
+  }
+
+  .sidebar__main-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    height: 100%;
+    min-height: 100%;
+    padding: 1rem 0.875rem;
+    transition:
+      gap 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      padding 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidebar__main-panel--compact .sidebar__main-stack {
+    gap: 0.375rem;
+    padding-inline: 0.5rem;
+  }
+
+  .sidebar__brand,
+  .sidebar__search,
+  .sidebar__main-nav,
+  .sidebar__deep-nav,
+  .sidebar__footer-content {
+    min-width: 0;
+  }
+
+  .sidebar__main-nav {
+    min-height: 0;
+    flex: 0 0 auto;
+    height: auto;
+  }
+
+  .sidebar__main-footer {
+    display: grid;
+    gap: 0.75rem;
+    align-content: end;
+    margin-top: auto;
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--seblify-color-surface-muted, #d9e0e8);
+    transition:
+      gap 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      padding-top 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      border-color 220ms ease;
+  }
+
+  .sidebar__main-panel--compact .sidebar__main-footer {
+    gap: 0.375rem;
+    padding-top: 0.625rem;
+  }
+
+  .sidebar__brand,
+  .sidebar__search,
+  .sidebar__footer-content {
+    overflow: hidden;
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 12rem;
+    transition:
+      opacity 160ms ease,
+      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      max-height 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .sidebar__main-panel--compact .sidebar__brand,
+  .sidebar__main-panel--compact .sidebar__search,
+  .sidebar__main-panel--compact .sidebar__footer-content {
+    opacity: 0;
+    transform: translateX(-0.25rem);
+    max-height: 0;
+    pointer-events: none;
+  }
+
+  .sidebar__deep-header {
+    min-height: 2.25rem;
+    color: var(--seblify-color-text, #172033);
+  }
+
+  .sidebar__deep-back {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0.625rem;
+    align-items: center;
+    width: 100%;
+    min-height: 2.25rem;
+    border: 0;
+    border-radius: 0.5rem;
+    padding: 0 0.125rem;
+    color: inherit;
+    background: transparent;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .sidebar__deep-back:hover {
+    background: var(--seblify-color-surface-hover, #f1f4f9);
+  }
+
+  .sidebar__deep-title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    font-weight: 700;
+  }
+
+  .sidebar--overlay .sidebar__main-panel,
+  .sidebar--overlay .sidebar__deep-panel,
+  .sidebar--tablet-rail .sidebar__main-panel {
+    overflow: auto;
+  }
+
+  .sidebar-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 35;
+    border: 0;
+    background: rgb(13 17 23 / 48%);
+    cursor: pointer;
+  }
+
+  @media (max-width: 1024px) {
+    .sidebar {
+      --sidebar-height: 100dvh;
+    }
+
+    .sidebar--overlay-main {
+      left: 0;
+    }
+
+    .sidebar--overlay-deep {
+      left: var(--sidebar-rail-width);
+    }
+  }
+
+  @media (max-width: 760px) {
+    .sidebar--overlay-main .sidebar__panels {
+      width: min(22rem, calc(100vw - 2rem));
+    }
+
+    .sidebar--overlay-deep {
+      left: var(--sidebar-rail-width);
+    }
+
+    .sidebar--overlay-deep .sidebar__panels {
+      width: min(20rem, calc(100vw - var(--sidebar-rail-width) - 1rem));
+      max-width: calc(100vw - var(--sidebar-rail-width));
+    }
+
+    .sidebar--overlay-split .sidebar__panels {
+      grid-template-columns: var(--sidebar-rail-width) minmax(16rem, 20rem);
+      width: min(24.5rem, calc(100vw - 1rem));
+    }
+  }
+</style>

package/dist/components/framework/navigation/sidebar/sidebar/Sidebar.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { SidenavActionDetail, SidenavItemData } from '../sidenav/sidenav';
+declare const Sidebar: import("svelte").Component<{
+    items: SidenavItemData[];
+    footerItems?: SidenavItemData[] | undefined;
+    currentHref?: string | undefined;
+    maxMainNavDepth?: number | undefined;
+    ariaLabel?: string | undefined;
+    open?: boolean | undefined;
+    onAction?: ((detail: SidenavActionDetail) => void) | undefined;
+    brand?: Snippet | undefined;
+    search?: Snippet | undefined;
+    footer?: Snippet | undefined;
+    label?: string | undefined;
+    trailing?: Snippet<[SidenavItemData]> | undefined;
+}, {}, "open">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;