andesine 0.1.0 → 0.4.0

package/dist/templates/pages/src/components/layout/mobile-navigation.tsx

@@ -0,0 +1,51 @@
+import type { PageContext, SectionContext } from "@andesine/pages";
+import { MobileNavigation as Menu } from "@andesine/ui/solid";
+import { type Component, Show } from "solid-js";
+import { Button } from "../primitives/button";
+import { Logo } from "../primitives/logo";
+import { NavigationLinks } from "./navigation-links";
+import { NavigationTree } from "./navigation-tree";
+import { PoweredBy } from "./powered-by";
+
+interface MobileNavigationProps {
+  page: Pick<PageContext, "site" | "links" | "navigation">;
+  /** Sections to show above the navigation, when the header has no tabs. */
+  sections: SectionContext[];
+  storageKey: string;
+}
+
+const MobileNavigation: Component<MobileNavigationProps> = (props) => (
+  <Menu.Root
+    mediaQuery="(max-width: 767.9px)"
+    navigationTarget={() => document.getElementById("main-content")}
+    class="group/menu md:hidden"
+  >
+    {/* A summary cannot hold a button, so it shows the button's look as a badge. */}
+    <Menu.Trigger
+      aria-label="Navigation"
+      class="fixed bottom-[max(1rem,env(safe-area-inset-bottom))] right-4 z-40 cursor-pointer list-none rounded-lg focus-visible:(outline outline-2 outline-tertiary) [&::-webkit-details-marker]:hidden"
+    >
+      <Button badge color="contrast" variant="outlined" text="softer" class="p-1.5">
+        <span aria-hidden="true" class="i-lucide:menu h-5 w-5 group-open/menu:hidden" />
+        <span aria-hidden="true" class="i-lucide:x hidden h-5 w-5 group-open/menu:block" />
+      </Button>
+    </Menu.Trigger>
+    {/* The last row lines up with the menu button, so the button never covers menu items. */}
+    <Menu.Content class="fixed inset-0 z-30 flex flex-col gap-6 overflow-y-auto bg-gray-50 px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-4">
+      <a href={props.page.site.href} class="text-gray-900">
+        <Logo site={props.page.site} />
+      </a>
+      <Show when={props.sections.length || props.page.links.length}>
+        <NavigationLinks sections={props.sections} links={props.page.links} />
+      </Show>
+      <NavigationTree
+        items={props.page.navigation}
+        storageKey={props.storageKey}
+        defaultDepth={2}
+      />
+      <PoweredBy class="mt-auto h-8 shrink-0" />
+    </Menu.Content>
+  </Menu.Root>
+);
+
+export { MobileNavigation };

package/dist/templates/pages/src/components/layout/navigation-links.tsx

@@ -0,0 +1,57 @@
+import type { IconLinkConfig, SectionContext } from "@andesine/pages";
+import clsx from "clsx";
+import { type Component, For } from "solid-js";
+
+interface NavigationLinksProps {
+  /** Sections, when they show in the navigation in place of header tabs. */
+  sections?: SectionContext[];
+  links: IconLinkConfig[];
+  class?: string;
+}
+
+interface NavigationLinkProps {
+  href: string;
+  label: string;
+  icon: string;
+  current?: boolean;
+}
+
+const NavigationLink: Component<NavigationLinkProps> = (props) => (
+  <a
+    href={props.href}
+    aria-current={props.current ? "location" : undefined}
+    class="group flex items-center gap-2 font-medium text-gray-700"
+  >
+    <span
+      class={clsx(
+        "flex shrink-0 items-center justify-center rounded-lg p-1 shadow-md outline outline-1 -outline-offset-1 transition-[background-position,background-color] duration-200 ease-out text-gray-500",
+        props.current
+          ? "bg-gradient-to-tr bg-[length:125%_auto] text-white outline-tertiary group-hover:bg-right group-focus-visible:bg-right"
+          : "bg-white shadow-gray-200 outline-gray-200 group-hover:bg-gray-100 group-focus-visible:bg-gray-100"
+      )}
+    >
+      <span aria-hidden="true" class={clsx("h-5 w-5", props.icon)} />
+    </span>
+    {props.label}
+  </a>
+);
+/** Links at the top of the navigation: the sections, then the configured links. */
+const NavigationLinks: Component<NavigationLinksProps> = (props) => (
+  <nav aria-label="Links" class={clsx(":base: flex flex-col gap-2", props.class)}>
+    <For each={props.sections}>
+      {(section) => (
+        <NavigationLink
+          href={section.href}
+          label={section.label}
+          icon={section.icon ?? "i-lucide:book-open"}
+          current={section.current}
+        />
+      )}
+    </For>
+    <For each={props.links}>
+      {(link) => <NavigationLink href={link.href} label={link.label} icon={link.icon} />}
+    </For>
+  </nav>
+);
+
+export { NavigationLinks };

package/dist/templates/pages/src/components/layout/navigation-tree.tsx

@@ -0,0 +1,138 @@
+import type { NavigationItem } from "@andesine/pages";
+import { NavigationTree as Tree } from "@andesine/ui/solid";
+import clsx from "clsx";
+import { type Component, For, Show } from "solid-js";
+import { getMethodColor, getMethodLabel } from "../reference/methods";
+
+interface NavigationTreeProps {
+  items: NavigationItem[];
+  storageKey: string;
+  /** Groups up to this depth start expanded. */
+  defaultDepth?: number;
+  class?: string;
+}
+
+interface BranchProps {
+  items: NavigationItem[];
+  depth: number;
+}
+
+interface ItemLinkProps {
+  item: NavigationItem;
+  depth: number;
+  group?: boolean;
+}
+
+// Each nested list moves right by `ml-3.5` and `pl-px`.
+const indent = (depth: number): string => `calc(${depth} * (0.875rem + 1px))`;
+const rowClass =
+  "relative isolate flex h-7.5 min-w-0 items-center rounded-lg px-2 transition duration-200 ease-out";
+const currentTextClass = "bg-gradient-to-tr bg-[length:125%_auto] bg-clip-text text-transparent";
+const hoverClass =
+  "@hover:(bg-gradient-to-r from-gray-500/10 to-transparent) focus-visible:(bg-gradient-to-r from-gray-500/10 to-transparent)";
+
+const ItemLink: Component<ItemLinkProps> = (props) => (
+  <Tree.Link
+    class={clsx(
+      rowClass,
+      "flex-1",
+      props.depth > 0 && "rounded-l-none",
+      props.group ? "text-sm font-semibold text-gray-700" : "text-base text-gray-500",
+      !props.item.current && clsx(hoverClass, "@hover:text-gray-700 focus-visible:text-gray-700")
+    )}
+    style={{ "--indent": indent(props.depth) }}
+    title={props.item.label}
+  >
+    <Show when={props.item.current}>
+      <span
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-y-0 right-0 -z-1 rounded-lg bg-gradient-to-r from-secondary/10 via-primary/10 to-transparent"
+        style={{ left: `calc(-1 * ${indent(props.depth)})` }}
+      />
+      <For each={Array.from({ length: props.depth }, (_, index) => index)}>
+        {(index) => (
+          <span
+            aria-hidden="true"
+            class="pointer-events-none absolute top-1/2 z-1 h-4 w-0.5 -translate-y-1/2 rounded-full bg-gradient-to-b"
+            style={{ left: `calc(-1.5px - ${indent(index)})` }}
+          />
+        )}
+      </For>
+    </Show>
+    <Show when={props.item.method}>
+      {(method) => (
+        <span
+          class={clsx(
+            "mr-2 w-9 shrink-0 font-mono text-[0.625rem] font-bold",
+            props.item.current ? currentTextClass : getMethodColor(method())
+          )}
+        >
+          {getMethodLabel(method())}
+        </span>
+      )}
+    </Show>
+    <span class={clsx("truncate", props.item.current && currentTextClass)}>{props.item.label}</span>
+  </Tree.Link>
+);
+const Chevron: Component = () => (
+  <span
+    aria-hidden="true"
+    class="i-lucide:chevron-right h-3.5 w-3.5 shrink-0 text-gray-400 transition-transform duration-200 [[data-state=open]>&]:rotate-90"
+  />
+);
+const Branch: Component<BranchProps> = (props) => (
+  <Tree.List class="flex flex-col gap-0.5">
+    <For each={props.items}>
+      {(item) => (
+        <Tree.Item item={item}>
+          <Show when={item.children.length} fallback={<ItemLink item={item} depth={props.depth} />}>
+            <div class="flex items-center">
+              <Show
+                when={item.href}
+                fallback={
+                  <Tree.GroupTrigger
+                    class={clsx(
+                      rowClass,
+                      hoverClass,
+                      "w-full cursor-pointer gap-2 text-sm font-semibold text-gray-700",
+                      props.depth > 0 && "rounded-l-none"
+                    )}
+                  >
+                    <span class="flex-1 truncate text-start">{item.label}</span>
+                    <Chevron />
+                  </Tree.GroupTrigger>
+                }
+              >
+                <ItemLink item={item} depth={props.depth} group />
+                <Tree.GroupTrigger
+                  aria-label={`${item.label} pages`}
+                  class={clsx(
+                    "flex h-7.5 w-7.5 shrink-0 cursor-pointer items-center justify-center rounded-lg transition duration-200 ease-out",
+                    "@hover:bg-gray-500/10 focus-visible:bg-gray-500/10"
+                  )}
+                >
+                  <Chevron />
+                </Tree.GroupTrigger>
+              </Show>
+            </div>
+            <Tree.GroupContent class="relative ml-3.5 mt-0.5 pl-px before:(absolute inset-y-0 left-0 w-px rounded-full bg-gray-200 content-[''])">
+              <Branch items={item.children} depth={props.depth + 1} />
+            </Tree.GroupContent>
+          </Show>
+        </Tree.Item>
+      )}
+    </For>
+  </Tree.List>
+);
+const NavigationTree: Component<NavigationTreeProps> = (props) => (
+  <Tree.Root
+    items={props.items}
+    storageKey={props.storageKey}
+    defaultDepth={props.defaultDepth}
+    class={props.class}
+  >
+    <Branch items={props.items} depth={0} />
+  </Tree.Root>
+);
+
+export { NavigationTree };

package/dist/templates/pages/src/components/layout/outline.tsx

@@ -0,0 +1,162 @@
+import type { HeadingContext } from "@andesine/pages";
+import {
+  TableOfContents,
+  type TableOfContentsGuideRange,
+  createTableOfContentsGuide,
+  useTableOfContents
+} from "@andesine/ui/solid";
+import clsx from "clsx";
+import { type Component, For, Show, createUniqueId } from "solid-js";
+import { ScrollArea } from "../primitives/scroll-area";
+
+interface OutlineProps {
+  headings: HeadingContext[];
+}
+
+interface OutlineListProps extends OutlineProps {
+  viewport(): HTMLElement | undefined;
+  level(heading: HeadingContext): number;
+}
+
+const OutlineList: Component<OutlineListProps> = (props) => {
+  const toc = useTableOfContents();
+  const gradientID = createUniqueId();
+  const highlighted = (): string[] => {
+    const visible = toc.visibleIDs();
+
+    return visible.length ? visible : [toc.activeID() ?? ""];
+  };
+  const levels = new Map(props.headings.map((heading) => [heading.id, props.level(heading)]));
+  const guide = createTableOfContentsGuide({
+    ids: () => props.headings.map((heading) => heading.id),
+    highlightedIDs: highlighted,
+    position: (id) => 8.5 + (levels.get(id) ?? 0) * 8,
+    viewport: props.viewport
+  });
+  const range = (): TableOfContentsGuideRange | undefined => guide.stroke()?.range;
+
+  return (
+    <div ref={guide.trackRef} class="relative">
+      <Show when={guide.stroke()?.backdrop}>
+        {(backdrop) => (
+          <svg aria-hidden="true" class="pointer-events-none absolute inset-0 h-full w-full">
+            <defs>
+              <linearGradient id={`${gradientID}-backdrop`}>
+                <stop
+                  offset="0%"
+                  style={{ "stop-color": "var(--color-secondary)", "stop-opacity": 0.1 }}
+                />
+                <stop
+                  offset="50%"
+                  style={{ "stop-color": "var(--color-primary)", "stop-opacity": 0.05 }}
+                />
+                <stop
+                  offset="100%"
+                  style={{ "stop-color": "var(--color-secondary)", "stop-opacity": 0 }}
+                />
+              </linearGradient>
+            </defs>
+            {/* The attribute is for Safari; browsers with the CSS `d` property animate it. */}
+            <path
+              d={backdrop()}
+              fill={`url(#${gradientID}-backdrop)`}
+              class="[transition:d_200ms_ease-out]"
+              style={{ d: `path("${backdrop()}")` }}
+            />
+          </svg>
+        )}
+      </Show>
+      <TableOfContents.List
+        class={clsx(
+          "relative flex flex-col text-sm leading-5",
+          // Without scripts, a plain line stands in for the guide.
+          !guide.stroke() &&
+            "[@media(scripting:none)]:border-l [@media(scripting:none)]:border-gray-200"
+        )}
+      >
+        <For each={props.headings}>
+          {(heading) => (
+            <TableOfContents.Item>
+              <TableOfContents.Link
+                ref={(element: HTMLAnchorElement) => guide.linkRef(heading.id, element)}
+                headingID={heading.id}
+                class={clsx(
+                  "block py-1 pr-2 transition duration-200 ease-out [overflow-wrap:anywhere]",
+                  highlighted().includes(heading.id)
+                    ? "text-gray-700"
+                    : "text-gray-500 @hover:text-gray-800 focus-visible:text-gray-800"
+                )}
+                style={{ "padding-inline-start": `${20 + (levels.get(heading.id) ?? 0) * 12}px` }}
+              >
+                {/* The guide needs the rendered layout, so the text shows as skeleton lines until then. */}
+                <span class={clsx(!guide.stroke() && "outline-skeleton")}>{heading.text}</span>
+              </TableOfContents.Link>
+            </TableOfContents.Item>
+          )}
+        </For>
+      </TableOfContents.List>
+      <svg
+        aria-hidden="true"
+        class={clsx("pointer-events-none absolute left-0 top-0 h-full w-8 overflow-visible")}
+        fill="none"
+      >
+        <path ref={guide.pathRef} class="stroke-gray-200" stroke-width="1" />
+        <Show when={guide.stroke()}>
+          {(stroke) => (
+            <>
+              <defs>
+                <linearGradient
+                  id={gradientID}
+                  gradientUnits="userSpaceOnUse"
+                  x1="0"
+                  y1={(range()?.top ?? 0) + (range()?.height ?? 0)}
+                  x2="16"
+                  y2={range()?.top ?? 0}
+                >
+                  <stop offset="0%" style={{ "stop-color": "var(--color-secondary)" }} />
+                  <stop offset="50%" style={{ "stop-color": "var(--color-primary)" }} />
+                  <stop offset="100%" style={{ "stop-color": "var(--color-secondary)" }} />
+                </linearGradient>
+              </defs>
+              <path
+                d={stroke().path}
+                stroke={`url(#${gradientID})`}
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-dasharray={`${stroke().length} ${stroke().total}`}
+                stroke-dashoffset={stroke().offset}
+                class="[transition:stroke-dashoffset_200ms_ease-out,stroke-dasharray_200ms_ease-out]"
+              />
+            </>
+          )}
+        </Show>
+      </svg>
+    </div>
+  );
+};
+const Outline: Component<OutlineProps> = (props) => {
+  const minDepth = Math.min(...props.headings.map((heading) => heading.depth));
+
+  let viewport: HTMLDivElement | undefined;
+
+  return (
+    <TableOfContents.Root
+      headingIDs={props.headings.map((heading) => heading.id)}
+      class="flex min-h-0 flex-col gap-2"
+    >
+      <p class="flex shrink-0 items-center gap-1.5 text-sm font-medium text-gray-500">
+        <span aria-hidden="true" class="i-lucide:list h-4 w-4" />
+        On this page
+      </p>
+      <ScrollArea shadow viewportRef={(element) => (viewport = element)} contentClass="py-2">
+        <OutlineList
+          headings={props.headings}
+          viewport={() => viewport}
+          level={(heading) => Math.min(2, heading.depth - minDepth)}
+        />
+      </ScrollArea>
+    </TableOfContents.Root>
+  );
+};
+
+export { Outline };

package/dist/templates/pages/src/components/layout/page-actions.tsx

@@ -0,0 +1,87 @@
+import type { OpenInLink, PageActionsContext } from "@andesine/pages";
+import { type CopyResult, createPageActions } from "@andesine/ui/solid";
+import clsx from "clsx";
+import { type Component } from "solid-js";
+import { Button, IconButton } from "../primitives/button";
+import { Menu, type MenuEntry } from "../primitives/menu";
+
+interface PageActionsProps {
+  actions: PageActionsContext;
+  /** URL of the page's Markdown alternative. */
+  markdown: string;
+}
+
+const serviceIcons: Record<OpenInLink["id"], string> = {
+  chatgpt: "i-simple-icons:openai",
+  claude: "i-simple-icons:claude",
+  perplexity: "i-simple-icons:perplexity"
+};
+
+const getStatus = (result?: CopyResult): { icon: string; label: string } => {
+  if (!result) return { icon: "i-lucide:copy", label: "Copy page" };
+  if (!result.success) return { icon: "i-lucide:triangle-alert", label: "Copy failed" };
+
+  return { icon: "i-lucide:check", label: result.item === "link" ? "Link copied" : "Copied" };
+};
+/** Copies the page as Markdown, with a menu of other actions for the page. */
+const PageActions: Component<PageActionsProps> = (props) => {
+  const actions = createPageActions({ markdown: props.markdown });
+  const status = (): ReturnType<typeof getStatus> => getStatus(actions.result());
+  const items = (): MenuEntry[] => [
+    { value: "copy-link", label: "Copy link", icon: "i-lucide:link", onSelect: actions.copyLink },
+    {
+      value: "view-markdown",
+      label: "View as Markdown",
+      icon: "i-simple-icons:markdown",
+      href: props.markdown
+    },
+    ...(props.actions.openIn.length
+      ? ([
+          { type: "separator" },
+          { type: "header", label: "Open in" },
+          ...props.actions.openIn.map((link) => ({
+            value: link.id,
+            label: link.label,
+            icon: serviceIcons[link.id],
+            href: link.href,
+            target: "_blank"
+          }))
+        ] satisfies MenuEntry[])
+      : [])
+  ];
+
+  return (
+    <div class="flex shrink-0 gap-1">
+      <Button
+        color="contrast"
+        variant="outlined"
+        size="small"
+        text="base"
+        class="gap-1.5"
+        aria-label="Copy page as Markdown"
+        onClick={() => actions.copyMarkdown()}
+      >
+        <span aria-hidden="true" class={clsx("h-4 w-4 shrink-0 text-gray-400", status().icon)} />
+        <span aria-live="polite" class="max-sm:sr-only">
+          {status().label}
+        </span>
+      </Button>
+      <Menu
+        items={items()}
+        trigger={(triggerProps) => (
+          <IconButton
+            {...triggerProps()}
+            icon="i-lucide:chevron-down"
+            color="contrast"
+            variant="outlined"
+            size="small"
+            text="soft"
+            aria-label="More page actions"
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+export { PageActions };

package/dist/templates/pages/src/components/layout/powered-by.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+import type { Component } from "solid-js";
+
+interface PoweredByProps {
+  class?: string;
+}
+
+/** Credits Andesine Pages, with the Andesine wordmark */
+const PoweredBy: Component<PoweredByProps> = (props) => (
+  <a
+    href="https://andesine.app"
+    class={clsx(
+      ":base: flex items-center gap-1 rounded-md text-sm text-gray-500 transition duration-200 ease-out @hover:text-gray-700 focus-visible:text-gray-700",
+      props.class
+    )}
+  >
+    Powered by
+    <span role="img" aria-label="Andesine" class="flex items-center font-bold text-gray-700">
+      <span
+        aria-hidden="true"
+        class="i-andesine:logo h-[1.07em] w-[1.07em] shrink-0 bg-gradient-to-tr"
+      />
+      <span aria-hidden="true">ndesine</span>
+    </span>
+    Pages
+  </a>
+);
+
+export { PoweredBy };

package/dist/templates/pages/src/components/layout/section-tabs.tsx

@@ -0,0 +1,83 @@
+import type { SectionContext } from "@andesine/pages";
+import { createTabIndicator } from "@andesine/ui/solid";
+import clsx from "clsx";
+import { type Component, For, Show } from "solid-js";
+
+interface SectionTabsProps {
+  sections: SectionContext[];
+}
+
+// Lines sit on the last pixel row of the tabs, so the scroll container does not clip them.
+const lineClass = "absolute bottom-0 h-px";
+
+const SectionTabs: Component<SectionTabsProps> = (props) => {
+  const indicator = createTabIndicator({
+    current: () => props.sections.findIndex((section) => section.current)
+  });
+
+  return (
+    <nav ref={indicator.rootRef} aria-label="Sections" class="relative">
+      <span aria-hidden="true" class={clsx(lineClass, "inset-x-0 bg-gray-200")} />
+      <div
+        ref={indicator.scrollRef}
+        class={clsx(
+          "flex h-10 items-stretch gap-1 overflow-x-auto px-2",
+          "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        )}
+      >
+        <For each={props.sections}>
+          {(section, index) => (
+            <a
+              ref={(element) => indicator.tabRef(index(), element)}
+              href={section.href}
+              aria-current={section.current ? "location" : undefined}
+              class={clsx(
+                "relative flex shrink-0 items-center gap-2 px-2 text-sm font-medium transition duration-200 ease-out",
+                section.current
+                  ? "bg-gradient-to-tr bg-[length:125%_auto] bg-clip-text text-transparent @hover:bg-right focus-visible:bg-right"
+                  : clsx(
+                      "text-gray-500 @hover:text-gray-700 focus-visible:text-gray-700",
+                      "after:(absolute inset-x-2 bottom-0 h-px bg-gray-400 opacity-0 transition-opacity duration-200 content-[''])",
+                      "@hover:after:opacity-100 focus-visible:after:opacity-100"
+                    )
+              )}
+            >
+              {/* Shown until the indicator is measured. */}
+              <Show when={section.current && !indicator.position()}>
+                <span
+                  aria-hidden="true"
+                  class="absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-gradient-to-r"
+                />
+              </Show>
+              <Show when={section.icon}>
+                <span
+                  aria-hidden="true"
+                  class={clsx(
+                    "h-4 w-4 shrink-0",
+                    section.current && "bg-gradient-to-tr",
+                    section.icon
+                  )}
+                />
+              </Show>
+              {section.label}
+            </a>
+          )}
+        </For>
+      </div>
+      <Show when={indicator.position()}>
+        {(position) => (
+          <span
+            aria-hidden="true"
+            class="pointer-events-none absolute bottom-0 h-0.5 translate-y-[0.5px] rounded-full bg-gradient-to-r transition-[left,width] duration-200 ease-out"
+            style={{
+              left: `${position().left + 8}px`,
+              width: `${Math.max(0, position().width - 16)}px`
+            }}
+          />
+        )}
+      </Show>
+    </nav>
+  );
+};
+
+export { SectionTabs };

package/dist/templates/pages/src/components/layout/sidebar.tsx

@@ -0,0 +1,65 @@
+import type { IconLinkConfig, NavigationItem, SectionContext } from "@andesine/pages";
+import { createScrollMemory } from "@andesine/ui/solid";
+import clsx from "clsx";
+import { type Component, Show } from "solid-js";
+
+import { ScrollArea } from "../primitives/scroll-area";
+import { NavigationLinks } from "./navigation-links";
+import { NavigationTree } from "./navigation-tree";
+import { PoweredBy } from "./powered-by";
+
+interface SidebarProps {
+  navigation: NavigationItem[];
+  /** Sections to show above the navigation, in place of header tabs. */
+  sections: SectionContext[];
+  links: IconLinkConfig[];
+  storageKey: string;
+  class?: string;
+}
+
+const Sidebar: Component<SidebarProps> = (props) => {
+  const scrollKey = (): string => `${props.storageKey}:scroll`;
+
+  let viewport: HTMLDivElement | undefined;
+
+  createScrollMemory({
+    container: () => viewport,
+    key: scrollKey(),
+    current: () => viewport?.querySelector<HTMLElement>("[aria-current='page']")
+  });
+
+  return (
+    <div class={props.class}>
+      <ScrollArea
+        shadow
+        class="h-full"
+        scrollKey={scrollKey()}
+        viewportRef={(element) => (viewport = element)}
+        contentClass="flex min-h-full flex-col px-3 pt-4"
+      >
+        <Show when={props.sections.length || props.links.length}>
+          <NavigationLinks sections={props.sections} links={props.links} class="px-2 pb-4" />
+        </Show>
+        <NavigationTree
+          items={props.navigation}
+          storageKey={props.storageKey}
+          defaultDepth={2}
+          class="flex-1 pb-4"
+        />
+        {/* After the navigation, and at the bottom while the navigation scrolls. It covers the
+            bottom scroll shadow, so its fade stands in for it. */}
+        <div
+          class={clsx(
+            "sticky bottom-0 z-2 bg-gray-50 px-2 py-4",
+            "before:(pointer-events-none absolute inset-x-0 -top-12 h-12 bg-gradient-to-t from-gray-50 to-gray-50/0 opacity-0 transition-opacity duration-150 content-[''])",
+            "[[data-part=viewport][data-overflow-y]:not([data-at-bottom])_&]:before:opacity-100"
+          )}
+        >
+          <PoweredBy />
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export { Sidebar };