New Navigation Rail Component

src/demos.md

@@ -1271,6 +1271,86 @@ let item = $state("a");
 </style>
 ```
 
+## Navigation Rail
+
+Minimal demo:
+
+```svelte
+<NavigationRail>
+  {#snippet fab(open)}
+    <FAB
+      color="primary-container"
+      text={open ? "Label" : undefined}
+      elevation="none"
+      onclick={() => alert("!")}
+    />
+  {/snippet}
+
+  <NavigationRailItem label="Label" icon={iconStars} active />
+
+  <NavigationRailItem label="Label" icon={iconStarsOutline} />
+
+  <NavigationRailItem label="Label" icon={addBadge(iconStarsOutline, 3)} />
+
+  <NavigationRailItem label="Label" icon={addBadge(iconStarsOutline)} />
+</NavigationRail>
+```
+
+Full demo:
+
+```use
+FAB
+NavigationRail
+NavigationRailItem
+```
+
+```ts
+import iconCircleFilled from "@ktibow/iconset-material-symbols/circle";
+import iconEdit from "@ktibow/iconset-material-symbols/edit";
+import { addBadge } from "$lib/misc/badge";
+
+let collapse: "full" | "normal" | "no" = $state("normal");
+let alignment: "top" | "center" = $state("center");
+let iconType: "full" | "left" = $state("left");
+let modal = $state(false);
+let open = $state(false);
+```
+
+```svelte
+<label>
+  <Switch bind:checked={modal} />
+  {modal ? "Modal" : "Normal"}
+</label>
+<label>
+  <Arrows list={["left", "full"]} bind:value={iconType} />
+  {iconType == "left" ? "Icon and text" : "Icon"}
+</label>
+<label>
+  <Arrows list={["top", "center"]} bind:value={alignment} />
+  {alignment == "top" ? "Top" : "Center"}
+</label>
+<label>
+  <Arrows list={["normal", "full", "no"]} bind:value={collapse} />
+  {collapse == "normal" ? "Collapse" : collapse == "full" ? "Fully collapse" : "Don't collapse"}
+</label>
+
+{#snippet demo()}
+  <NavigationRail {collapse} {alignment} {iconType} {modal} {open}>
+    {#snippet fab(open)}
+      <FAB
+        color="primary-container"
+        icon={iconEdit}
+        text={open ? "Label" : undefined}
+        elevation="none"
+        onclick={() => {}}
+      />
+    {/snippet}
+    <NavigationRailItem label="Label" icon={iconCircleFilled} active />
+    <NavigationRailItem label="Label" icon={addBadge(iconTriangle, 3)} />
+  </NavigationRail>
+{/snippet}
+```
+
 ## UI transitions
 
 Minimal demo:

src/lib/buttons/FAB.svelte

@@ -2,6 +2,8 @@
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "$lib/misc/Icon.svelte";
   import type { ButtonAttrs } from "$lib/misc/typing-utils";
+  import { slide } from "svelte/transition";
+  import { easeEmphasized } from "$lib/misc/easing";
 
   type ContentProps =
     | {
@@ -50,7 +52,7 @@
     <Icon {icon} size={size == "large" ? 36 : size == "medium" ? 28 : 24} />
   {/if}
   {#if text}
-    {text}
+    <span transition:slide={{ axis: "x", duration: 500, easing: easeEmphasized }}>{text}</span>
   {/if}
 </button>
 
@@ -84,30 +86,38 @@
   .size-small {
     height: 2.5rem;
     padding-inline: 0.5rem;
-    gap: 0.5rem;
     border-radius: var(--m3-fab-small-shape);
   }
+  .size-small > :global(svg + span) {
+    margin-inline-start: 0.5rem;
+  }
   .size-normal {
     @apply --m3-title-medium;
     height: 3.5rem;
     padding-inline: 1rem;
-    gap: 0.5rem;
     border-radius: var(--m3-fab-normal-shape);
   }
+  .size-normal > :global(svg + span) {
+    margin-inline-start: 0.5rem;
+  }
   .size-medium {
     @apply --m3-title-large;
     height: 5rem;
     padding-inline: 1.625rem;
-    gap: 0.75rem;
     border-radius: var(--m3-fab-medium-shape);
   }
+  .size-medium > :global(svg + span) {
+    margin-inline-start: 0.75rem;
+  }
   .size-large {
     @apply --m3-headline-small;
     height: 6rem;
     padding-inline: 1.75rem;
-    gap: 1rem;
     border-radius: var(--m3-fab-large-shape);
   }
+  .size-large > :global(svg + span) {
+    margin-inline-start: 1rem;
+  }
 
   .color-primary {
     background-color: var(--m3c-primary);

src/lib/index.ts

@@ -47,6 +47,8 @@ export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgres
 
 export { default as NavCMLX } from "./nav/NavCMLX.svelte";
 export { default as NavCMLXItem } from "./nav/NavCMLXItem.svelte";
+export { default as NavigationRail } from "./nav/NavigationRail.svelte";
+export { default as NavigationRailItem } from "./nav/NavigationRailItem.svelte";
 export { default as Tabs } from "./nav/Tabs.svelte";
 export { default as TabsLink } from "./nav/TabsLink.svelte";
 export { default as VariableTabs } from "./nav/VariableTabs.svelte";

src/lib/nav/NavigationRail.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import NavigationToggle from "./NavigationToggle.svelte";
+
+  let {
+    open = $bindable(false),
+    collapse = "normal",
+    modal = false,
+    alignment = "top",
+    iconType = "left",
+    fab,
+    children,
+  }: {
+    open?: boolean;
+    collapse?: "normal" | "full" | "no" | boolean;
+    modal?: boolean;
+    alignment?: "top" | "center";
+    iconType?: "left" | "full";
+    fab?: Snippet<[open: boolean]>;
+    children: Snippet;
+  } = $props();
+
+  const onkeydown = (e: KeyboardEvent) => {
+    if (modal && open && e.key == "Escape") {
+      e.preventDefault();
+
+      open = false;
+    }
+  };
+</script>
+
+<svelte:window {onkeydown} />
+
+<div class="m3-container">
+  <div
+    class:rail={true}
+    class:open
+    class:centered={alignment == "center"}
+    class:collapse={collapse == "full"}
+    class:icon={iconType == "full"}
+    class:modal
+  >
+    {#if (collapse != "no" && collapse != false) || fab}
+      <div class="top">
+        {#if collapse != "no" && collapse != false}
+          <NavigationToggle mode={collapse == "full" ? "inline-detached" : "inline"} bind:open />
+        {/if}
+
+        {#if fab}
+          <div>
+            {@render fab(open)}
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="items" role="menu" aria-labelledby="m3-navigationtoggle">
+      {@render children()}
+    </div>
+  </div>
+
+  {#if modal}
+    <!--svelte-ignore a11y_no_static_element_interactions--><!--svelte-ignore a11y_click_events_have_key_events-->
+    <div class="shadow" onclick={() => (open = false)}></div>
+  {/if}
+</div>
+
+<style>
+  .m3-container {
+    width: 96px;
+    height: 100%;
+    transition: width var(--m3-easing-spatial);
+  }
+
+  .m3-container:has(> .rail.collapse) {
+    width: 0;
+  }
+
+  .rail.open,
+  .m3-container:has(> .rail.open:not(.modal)),
+  .rail.collapse {
+    width: 220px;
+  }
+
+  .rail {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    width: 96px;
+    height: 100%;
+    padding: 44px 0px 56px 0px;
+    transition: all var(--m3-easing-spatial);
+    overflow: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  .rail.open,
+  .rail.icon {
+    gap: 32px;
+  }
+
+  .rail:not(.open).collapse {
+    width: 0px;
+  }
+
+  .rail:not(.open).collapse > :global(*:not(.top)),
+  .rail:not(.open).collapse .top > :global(*:not(.toggle)) {
+    pointer-events: none;
+  }
+
+  .rail:not(.open).collapse > .top > :not(:global(.toggle)),
+  .rail:not(.open).collapse > .items {
+    opacity: 0;
+  }
+
+  .rail.modal {
+    border-start-end-radius: var(--m3-shape-large);
+    border-end-end-radius: var(--m3-shape-large);
+  }
+
+  .rail.modal.open,
+  .rail:not(.modal) {
+    background: var(--m3c-surface-container);
+  }
+
+  .rail.collapse > .top {
+    margin-top: 56px;
+  }
+
+  .top {
+    margin-inline: 20px;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+  }
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 96px;
+    height: 100%;
+    align-self: stretch;
+    transition:
+      gap var(--m3-easing),
+      width 0.2s;
+    height: 100%;
+  }
+
+  .rail.open > .items,
+  .rail.collapse > .items {
+    gap: 0px;
+    width: 220px;
+  }
+
+  .rail.icon > .items {
+    gap: 0px;
+  }
+
+  .rail.centered > .items {
+    justify-content: center;
+  }
+
+  .shadow {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background-color: --translucent(var(--m3c-scrim), 0.5);
+    transition: opacity var(--m3-easing);
+  }
+
+  .rail:not(.open) + .shadow {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media (width <= 300px) {
+    .rail.open {
+      border-radius: 0px !important;
+      width: 100vw;
+    }
+  }
+</style>