livemark 0.25.0 → 0.26.0

package/source/components/CodeBlock.tsx

@@ -28,7 +28,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
 
   return (
     <figure
-      className="shiki not-prose my-4 relative rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar"
+      className="shiki not-prose my-4 relative rounded-card border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar"
       style={{ ...style, backgroundColor: undefined }}
     >
       {title ? (
@@ -44,7 +44,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             <TooltipTrigger
               onClick={handleWrapToggle}
               aria-label={wrap ? "Disable wrap" : "Enable wrap"}
-              className={`-me-2 p-1.5 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+              className={`-me-2 p-1.5 rounded-control hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
             >
               <WrapText className="size-3.5" />
             </TooltipTrigger>
@@ -54,7 +54,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             <TooltipTrigger
               onClick={handleCopy}
               aria-label={copied ? "Copied" : "Copy code"}
-              className="-me-2 p-1.5 rounded-md hover:text-foreground transition-colors"
+              className="-me-2 p-1.5 rounded-control hover:text-foreground transition-colors"
             >
               {copied ? (
                 <Check className="size-3.5" />
@@ -66,12 +66,12 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
           </Tooltip>
         </div>
       ) : (
-        <div className="empty:hidden absolute top-2 right-2 z-10 backdrop-blur-lg rounded-lg text-muted-foreground">
+        <div className="empty:hidden absolute top-2 right-2 z-10 backdrop-blur-lg rounded-control text-muted-foreground">
           <Tooltip>
             <TooltipTrigger
               onClick={handleWrapToggle}
               aria-label={wrap ? "Disable wrap" : "Enable wrap"}
-              className={`p-1.5 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+              className={`p-1.5 rounded-control hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
             >
               <WrapText className="size-3.5" />
             </TooltipTrigger>
@@ -81,7 +81,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             <TooltipTrigger
               onClick={handleCopy}
               aria-label={copied ? "Copied" : "Copy code"}
-              className="p-1.5 rounded-md hover:text-foreground transition-colors"
+              className="p-1.5 rounded-control hover:text-foreground transition-colors"
             >
               {copied ? (
                 <Check className="size-3.5" />

package/source/components/CodeTabs.tsx

@@ -47,7 +47,7 @@ export function CodeTabs(props: {
   }, [props.sync, names])
 
   return (
-    <div className="not-prose my-4 rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
+    <div className="not-prose my-4 rounded-card border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
       <div className="flex border-b">
         {names.map((name, i) => (
           <button

package/source/components/ContentTabs.tsx

@@ -45,7 +45,7 @@ export function ContentTabs(props: { sync?: string; children: React.ReactNode })
   }, [props.sync, titles])
 
   return (
-    <div className="not-prose my-4 rounded-xl border bg-card">
+    <div className="not-prose my-4 rounded-card border bg-card">
       <div className="flex border-b">
         {titles.map((title, i) => (
           <button

package/source/components/DefaultCatchBoundary.tsx

@@ -6,6 +6,7 @@ import {
   useMatch,
   useRouter,
 } from "@tanstack/react-router"
+import { buttonVariants } from "../elements/button.tsx"
 
 export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
   const router = useRouter()
@@ -25,21 +26,18 @@ export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
           onClick={() => {
             router.invalidate()
           }}
-          className="bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/80 transition-colors"
+          className={buttonVariants({ size: "lg" })}
         >
           Try Again
         </button>
         {isRoot ? (
-          <Link
-            to="/"
-            className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
-          >
+          <Link to="/" className={buttonVariants({ variant: "outline", size: "lg" })}>
             Home
           </Link>
         ) : (
           <Link
             to="/"
-            className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
+            className={buttonVariants({ variant: "outline", size: "lg" })}
             onClick={(e: any) => {
               e.preventDefault()
               window.history.back()

package/source/components/Details.tsx

@@ -14,7 +14,7 @@ export function Details(props: { summary: string; children: React.ReactNode }) {
     <Collapsible
       open={open}
       onOpenChange={setOpen}
-      className="not-prose my-4 rounded-xl border border-border bg-card px-4 py-3"
+      className="not-prose my-4 rounded-card border border-border bg-card px-4 py-3"
     >
       <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 text-sm font-semibold select-none">
         <ChevronRight

package/source/components/FileTree.tsx

@@ -11,7 +11,7 @@ export function FileTree(props: { tree: string }) {
   const items: TreeItem[] = JSON.parse(props.tree)
 
   return (
-    <div className="not-prose my-4 rounded-xl border border-border bg-card p-4 font-mono text-sm">
+    <div className="not-prose my-4 rounded-card border border-border bg-card p-4 font-mono text-sm">
       <TreeItems items={items} depth={0} />
     </div>
   )

package/source/components/Header.tsx

@@ -0,0 +1,52 @@
+import { config } from "livemark:virtual"
+import { useLocation, useMatch } from "@tanstack/react-router"
+import { useState } from "react"
+import { cn } from "cn"
+import { currentSection } from "../content/article.ts"
+import { activeSiteLink } from "../helpers/section.ts"
+import { HeaderMenu } from "./HeaderMenu.tsx"
+import { HeaderNav } from "./HeaderNav.tsx"
+import { Search } from "./Search.tsx"
+import { SiteLink } from "./SiteLink.tsx"
+import { SiteTitle } from "./SiteTitle.tsx"
+import { Theme } from "./Theme.tsx"
+
+/** Sticky site header: title, header sections and links, search and theme. `toggle`
+ * sits before the title from `lg`; `menu` opens the phone navigation */
+export function Header(props: { toggle?: React.ReactNode; menu?: React.ReactNode }) {
+  const pathname = useLocation({ select: l => l.pathname })
+  const articleRoute = useMatch({ from: "/$", shouldThrow: false })
+  const activeSection = articleRoute
+    ? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
+    : undefined
+  const siteLinkTarget = activeSiteLink(pathname, config.sections ?? [])
+  const [compactSearch, setCompactSearch] = useState(false)
+
+  return (
+    <header className="sticky top-0 z-20 flex has-[[data-header-search]]:z-40 h-16 shrink-0 items-center border-b bg-background">
+      <div
+        className={cn(
+          "flex min-w-0 items-center self-stretch pl-4 lg:shrink-0",
+          props.toggle ? "pr-4" : "lg:w-[calc(var(--sidebar-width,16rem)+4rem)]",
+        )}
+      >
+        {props.toggle && <div className="hidden lg:flex">{props.toggle}</div>}
+        <SiteLink
+          to={siteLinkTarget}
+          className={cn("flex min-w-0 items-center gap-2", props.toggle && "lg:hidden")}
+        >
+          <SiteTitle />
+        </SiteLink>
+      </div>
+      <HeaderNav
+        activePrefix={activeSection?.prefix}
+        onCompactChange={setCompactSearch}
+      />
+      <div className="ml-auto flex shrink-0 items-center gap-1 pr-2 lg:pr-1">
+        <Search compact={compactSearch} />
+        <Theme />
+        <div className="lg:hidden">{props.menu ?? <HeaderMenu />}</div>
+      </div>
+    </header>
+  )
+}

package/source/components/HeaderMenu.tsx

@@ -0,0 +1,41 @@
+import { config } from "livemark:virtual"
+import { useNavigate } from "@tanstack/react-router"
+import { Menu } from "lucide-react"
+import { Button } from "../elements/button.tsx"
+import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
+import { useNavItems } from "../helpers/nav-items.tsx"
+import { prefixUrl } from "../helpers/prefix-url.ts"
+import { MenuSheet } from "./MenuSheet.tsx"
+
+/** Phone navigation for a `Header` without a sidebar: the header sections and links */
+export function HeaderMenu() {
+  const items = useNavItems()
+  const navigate = useNavigate()
+
+  return (
+    <MenuSheet
+      title="Navigation"
+      items={items.map(item => ({
+        id: item.key,
+        label: item.suffix ? `${item.title} (${item.suffix})` : item.title,
+        icon: item.icon && <DynamicIcon name={item.icon} className="size-4 shrink-0" />,
+        active: item.active,
+        onSelect: () => {
+          if (item.href) window.location.assign(prefixUrl(item.href, config.base))
+          else if (item.target) navigate({ to: item.target })
+        },
+      }))}
+      trigger={
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          title="Navigation"
+          aria-label="Navigation"
+          className="cursor-pointer"
+        />
+      }
+    >
+      <Menu />
+    </MenuSheet>
+  )
+}

package/source/components/HeaderNav.tsx

@@ -0,0 +1,145 @@
+import { ChevronDown } from "lucide-react"
+import { useLayoutEffect, useRef, useState } from "react"
+import { cn } from "cn"
+import { type NavItem, renderNavAnchor, useNavItems } from "../helpers/nav-items.tsx"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../elements/dropdown-menu.tsx"
+
+// The `lg:w-56` Search field minus its 36px icon-only form
+const SEARCH_COMPACT_SAVING = 188
+
+/** Header sections and links from `lg`: once they outgrow the bar, Search turns
+ * compact and the rest fold into a "More" menu */
+export function HeaderNav(props: {
+  activePrefix?: string
+  onCompactChange: (compact: boolean) => void
+}) {
+  const items = useNavItems(props.activePrefix)
+  const strip = useRef<HTMLElement>(null)
+  const measure = useRef<HTMLDivElement>(null)
+  const [visibleCount, setVisibleCount] = useState(items.length)
+  const onCompactChange = useRef(props.onCompactChange)
+  onCompactChange.current = props.onCompactChange
+
+  useLayoutEffect(() => {
+    let compact = false
+    const fit = () => {
+      if (!strip.current || !measure.current) return
+      const style = getComputedStyle(strip.current)
+      const width =
+        strip.current.clientWidth -
+        parseFloat(style.paddingLeft) -
+        parseFloat(style.paddingRight)
+      if (width <= 0) return
+      // Measured as if Search were full, so toggling it never feeds back into the fit
+      const room = width - (compact ? SEARCH_COMPACT_SAVING : 0)
+      const gap = parseFloat(getComputedStyle(measure.current).columnGap) || 0
+      const widths = [...measure.current.children].map(
+        child => child.getBoundingClientRect().width,
+      )
+      const more = widths.pop() ?? 0
+      const total = widths.reduce((sum, w) => sum + w, 0) + gap * (widths.length - 1)
+
+      compact = total > room
+      let count = widths.length
+      if (total > room + SEARCH_COMPACT_SAVING) {
+        let used = more
+        count = 0
+        for (const w of widths) {
+          if (used + gap + w > room + SEARCH_COMPACT_SAVING) break
+          used += gap + w
+          count++
+        }
+      }
+      onCompactChange.current(compact)
+      setVisibleCount(count)
+    }
+    fit()
+    const observer = new ResizeObserver(fit)
+    if (strip.current) observer.observe(strip.current)
+    if (measure.current) observer.observe(measure.current)
+    return () => observer.disconnect()
+  }, [])
+
+  const shown = items.slice(0, visibleCount)
+  const folded = items.slice(visibleCount)
+
+  return (
+    <nav
+      ref={strip}
+      className="relative hidden w-0 min-w-0 flex-1 items-center gap-6 self-stretch overflow-hidden px-6 text-sm lg:flex xl:gap-8"
+    >
+      {shown.map(item => (
+        <HeaderNavLink key={item.key} item={item} />
+      ))}
+      {folded.length > 0 && <HeaderNavMore items={folded} />}
+      <div
+        ref={measure}
+        aria-hidden
+        inert
+        className="invisible absolute left-0 flex gap-6 whitespace-nowrap xl:gap-8"
+      >
+        {items.map(item => (
+          <HeaderNavLink key={item.key} item={item} />
+        ))}
+        <HeaderNavMoreTrigger active={false} />
+      </div>
+    </nav>
+  )
+}
+
+function HeaderNavLink(props: { item: NavItem }) {
+  return renderNavAnchor(
+    props.item,
+    cn(
+      "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-foreground",
+      props.item.active ? ACTIVE : IDLE,
+    ),
+  )
+}
+
+function HeaderNavMore(props: { items: NavItem[] }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={<HeaderNavMoreTrigger active={props.items.some(item => item.active)} />}
+      />
+      <DropdownMenuContent align="end" className="w-auto">
+        {props.items.map(item => (
+          <DropdownMenuItem
+            key={item.key}
+            className={cn("cursor-pointer", item.active && "font-medium")}
+            render={renderNavAnchor(item)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function HeaderNavMoreTrigger(
+  props: React.ComponentProps<"button"> & { active: boolean },
+) {
+  const { active, className, ...rest } = props
+  return (
+    <button
+      type="button"
+      {...rest}
+      className={cn(
+        "inline-flex shrink-0 cursor-pointer items-center gap-1 whitespace-nowrap text-foreground",
+        active ? ACTIVE : IDLE,
+        className,
+      )}
+    >
+      More
+      <ChevronDown className="size-3.5" />
+    </button>
+  )
+}
+
+const ACTIVE = "font-medium border-b-2 border-foreground pb-0.5 -mb-0.5"
+const IDLE = "opacity-80 hover:opacity-100 transition-opacity"

package/source/components/HeaderSearch.tsx

@@ -0,0 +1,77 @@
+import { useLayoutEffect, useRef, useState } from "react"
+import { X } from "lucide-react"
+import { SearchResultGroups, useArticleSearch } from "../helpers/article-search.tsx"
+import { Command, CommandEmpty, CommandInput, CommandList } from "../elements/command.tsx"
+
+/** Search field that takes over the header below `lg`, with results dropping under it */
+export function HeaderSearch(props: { onClose: () => void }) {
+  const search = useArticleSearch()
+  const bar = useRef<HTMLDivElement>(null)
+  const [panelTop, setPanelTop] = useState<number>()
+
+  // Measured, not `top-16`: while the Banner is in view it pushes the header down.
+  useLayoutEffect(() => {
+    const measure = () => setPanelTop(bar.current?.getBoundingClientRect().bottom)
+    measure()
+    window.addEventListener("scroll", measure, { passive: true })
+    window.addEventListener("resize", measure)
+    return () => {
+      window.removeEventListener("scroll", measure)
+      window.removeEventListener("resize", measure)
+    }
+  }, [])
+
+  // `data-header-search` lifts the header over the Toc bar and BackToTop (Layout).
+  return (
+    <Command
+      ref={bar}
+      data-header-search
+      shouldFilter={false}
+      loop
+      onKeyDown={event => {
+        if (event.key === "Escape") props.onClose()
+      }}
+      className="absolute inset-0 z-10 overflow-visible rounded-none! bg-background p-0 lg:hidden"
+    >
+      <div className="flex h-full items-center gap-1 pl-1 pr-2">
+        <div className="flex-1 [&_[data-slot=command-input-wrapper]]:p-0 [&_[data-slot=input-group]]:border-transparent! [&_[data-slot=input-group]]:bg-transparent! [&_[data-slot=input-group]]:ring-0!">
+          <CommandInput
+            autoFocus
+            placeholder="Search docs..."
+            value={search.query}
+            onValueChange={search.searchArticles}
+          />
+        </div>
+        <button
+          type="button"
+          onClick={props.onClose}
+          aria-label="Close search"
+          title="Close search"
+          className="flex size-9 shrink-0 items-center justify-center rounded-control text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer"
+        >
+          <X className="size-5" />
+        </button>
+      </div>
+      <div
+        style={{ top: panelTop }}
+        className="fixed inset-x-0 bottom-0 flex flex-col border-t bg-background p-1"
+      >
+        <CommandList className="max-h-none flex-1 overscroll-contain">
+          <CommandEmpty>
+            {search.query.trim()
+              ? "No results found."
+              : "Type to search across all contents."}
+          </CommandEmpty>
+          <SearchResultGroups
+            query={search.query}
+            grouped={search.grouped}
+            onSelect={path => {
+              props.onClose()
+              search.selectArticle(path)
+            }}
+          />
+        </CommandList>
+      </div>
+    </Command>
+  )
+}

package/source/components/InlineBadge.tsx

@@ -3,7 +3,7 @@ import { Badge } from "../elements/badge.tsx"
 /** Inline badge rendered from :badge text directives */
 export function InlineBadge(props: {
   label: string
-  variant?: "default" | "secondary" | "destructive" | "outline"
+  variant?: "default" | "secondary" | "positive" | "warning" | "destructive" | "outline"
 }) {
   return <Badge variant={props.variant}>{props.label}</Badge>
 }

package/source/components/InlineToc.tsx

@@ -9,7 +9,7 @@ export function InlineToc(props: { maxLevel?: string }) {
   if (items.length === 0) return null
 
   return (
-    <nav className="not-prose my-8 rounded-xl border border-border bg-card p-6">
+    <nav className="not-prose my-8 rounded-card border border-border bg-card p-6">
       <p className="text-base font-semibold mb-4">Table of Contents</p>
       <ul className="text-base space-y-2.5">
         {items.map(item => (

package/source/components/Layout.tsx

@@ -1,15 +1,3 @@
-import { config } from "livemark:virtual"
-import { Link, useLocation, useMatch } from "@tanstack/react-router"
-import { useHotkey } from "@tanstack/react-hotkeys"
-import {
-  currentSection,
-  sectionFirstArticle,
-  sectionFlatArticles,
-  sortedArticles,
-} from "../content/article.ts"
-import { DynamicIcon } from "../helpers/dynamic-icon.tsx"
-import { prefixUrl } from "../helpers/prefix-url.ts"
-import { activeSiteLink, customSectionActive } from "../helpers/section.ts"
 import {
   SidebarInset,
   SidebarProvider,
@@ -18,160 +6,25 @@ import {
 } from "../elements/sidebar.tsx"
 import { BackToTop } from "./BackToTop.tsx"
 import { Banner } from "./Banner.tsx"
+import { Header } from "./Header.tsx"
 import { Sidebar } from "./Sidebar.tsx"
-import { SiteLink } from "./SiteLink.tsx"
-import { SiteTitle } from "./SiteTitle.tsx"
-
-function splatFor(pathname: string) {
-  return { _splat: pathname.replace(/^\/|\/$/g, "") }
-}
 
+/** Site chrome around a page: banner, header, sidebar and back-to-top */
 export function Layout(props: { withSidebar?: boolean; children?: React.ReactNode }) {
-  const pathname = useLocation({ select: l => l.pathname })
-  const articleRoute = useMatch({ from: "/$", shouldThrow: false })
-  const activeSection = articleRoute
-    ? currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
-    : undefined
-  const siteLinkTarget = activeSiteLink(pathname, config.sections ?? [])
-
-  useHotkey("J", () =>
-    window.scrollBy({ top: window.innerHeight * 0.8, behavior: "smooth" }),
-  )
-  useHotkey("K", () =>
-    window.scrollBy({ top: -window.innerHeight * 0.8, behavior: "smooth" }),
-  )
-
-  const sections = config.sections
-
-  const header = (
-    <header className="sticky top-0 z-20 flex h-16 shrink-0 items-center border-b bg-background">
-      <div
-        className={`flex items-center self-stretch pl-4 ${props.withSidebar ? "pr-4" : "lg:pr-20"}`}
-      >
-        {props.withSidebar ? (
-          <>
-            <div className="hidden lg:flex">
-              <SidebarTrigger />
-            </div>
-            <SiteLink to={siteLinkTarget} className="lg:hidden flex items-center gap-2">
-              <SiteTitle />
-            </SiteLink>
-          </>
-        ) : (
-          <SiteLink to={siteLinkTarget} className="flex items-center gap-2">
-            <SiteTitle />
-          </SiteLink>
-        )}
-      </div>
-      <div className="hidden lg:flex flex-1 items-center gap-8 self-stretch px-6 text-sm">
-        {sections?.length ? (
-          sections
-            .filter(section => section.position === "header")
-            .map(section => {
-              const icon = section.icon
-              if (section.type === "custom") {
-                const isActive = customSectionActive(section.url, pathname)
-                return (
-                  <a
-                    key={section.url}
-                    href={prefixUrl(section.url, config.base)}
-                    className={`inline-flex items-center gap-1.5 text-foreground ${
-                      isActive
-                        ? "font-medium border-b-2 border-foreground pb-0.5 -mb-0.5"
-                        : "opacity-80 hover:opacity-100 transition-opacity"
-                    }`}
-                  >
-                    {icon && <DynamicIcon name={icon} className="size-3.5" />}
-                    <span>{section.title}</span>
-                  </a>
-                )
-              }
-              const isActive = activeSection?.prefix === section.prefix
-              const target =
-                section.type === "blog" || section.type === "changelog"
-                  ? section.prefix
-                  : sectionFirstArticle.get(section.prefix)
-              const latestVersion =
-                section.type === "changelog" && section.version
-                  ? sortedArticles.find(
-                      a => a.path === sectionFlatArticles.get(section.prefix)?.[0],
-                    )?.title
-                  : undefined
-              return (
-                <Link
-                  key={section.prefix}
-                  to={target === "/" ? "/" : "/$"}
-                  params={target && target !== "/" ? splatFor(target) : {}}
-                  className={`inline-flex items-center gap-1.5 text-foreground ${
-                    isActive
-                      ? "font-medium border-b-2 border-foreground pb-0.5 -mb-0.5"
-                      : "opacity-80 hover:opacity-100 transition-opacity"
-                  }`}
-                >
-                  {icon && <DynamicIcon name={icon} className="size-3.5" />}
-                  <span>
-                    {section.title}
-                    {latestVersion && (
-                      <span className="opacity-80"> ({latestVersion})</span>
-                    )}
-                  </span>
-                </Link>
-              )
-            })
-        ) : (
-          <Link
-            to="/"
-            className="text-foreground font-medium underline underline-offset-4"
-          >
-            Docs
-          </Link>
-        )}
-        {config.links
-          ?.filter(
-            link =>
-              link.position === "header" &&
-              (!link.prefix || link.prefix === activeSection?.prefix),
-          )
-          .map(link => (
-            <a
-              key={link.url}
-              href={prefixUrl(link.url, config.base)}
-              className="text-foreground opacity-80 hover:opacity-100 transition-opacity"
-            >
-              {link.icon && (
-                <DynamicIcon
-                  name={link.icon}
-                  className="inline size-3.5 align-[-0.125em]"
-                />
-              )}{" "}
-              {link.title}
-            </a>
-          ))}
-        <Banner />
-      </div>
-      <div className="lg:hidden ml-auto pr-2">
-        <SidebarTrigger />
-      </div>
-    </header>
-  )
-
   return (
-    <SidebarProvider
-      key={props.withSidebar ? "sidebar" : "mini"}
-      defaultOpen={!!props.withSidebar}
-    >
-      <SidebarShell withSidebar={props.withSidebar} header={header}>
-        {props.children}
-      </SidebarShell>
-    </SidebarProvider>
+    <>
+      <Banner />
+      <SidebarProvider
+        key={props.withSidebar ? "sidebar" : "mini"}
+        defaultOpen={!!props.withSidebar}
+      >
+        <SidebarShell withSidebar={props.withSidebar}>{props.children}</SidebarShell>
+      </SidebarProvider>
+    </>
   )
 }
 
-function SidebarShell(props: {
-  withSidebar?: boolean
-  header: React.ReactNode
-  children?: React.ReactNode
-}) {
+function SidebarShell(props: { withSidebar?: boolean; children?: React.ReactNode }) {
   const { isMobile, setOpenMobile } = useSidebar()
   const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (!isMobile) return
@@ -181,7 +34,10 @@ function SidebarShell(props: {
     <div style={{ display: "contents" }} onClick={onClick}>
       <Sidebar withSidebar={props.withSidebar} />
       <SidebarInset>
-        {props.header}
+        <Header
+          toggle={props.withSidebar && <SidebarTrigger />}
+          menu={<SidebarTrigger />}
+        />
         <main className="flex-1">{props.children}</main>
         <BackToTop />
       </SidebarInset>