seemore 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seemore",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Let AI write the Markdown. Let seemore show it better — zero config documentation framework.",
   "license": "MIT",
   "type": "module",

package/src/app/layout/Header.tsx

@@ -4,18 +4,32 @@ import { useSearchContext } from 'fumadocs-ui/contexts/search';
 import { SidebarTrigger } from 'fumadocs-ui/components/sidebar/base';
 import { useTheme } from 'fumadocs-ui/provider/base';
 import { config } from 'virtual:seemore/config';
+import { useSidebarCollapse } from './Sidebar.js';
 
 export function Header() {
   const search = useSearchContext();
   const { resolvedTheme, setTheme } = useTheme();
   const location = useLocation();
+  const { collapsed, toggle } = useSidebarCollapse();
 
   return (
     <header className="seemore-header">
+      {/* Two triggers, one slot: below `md` the sidebar is a drawer this opens over the page,
+          and at `md` and up it is a rail this hides, leaving the article the room. */}
       <SidebarTrigger className="seemore-sidebar-trigger" aria-label="Toggle navigation">
         <PanelLeft />
       </SidebarTrigger>
 
+      <button
+        type="button"
+        className="seemore-sidebar-collapse"
+        aria-label={collapsed ? 'Show navigation' : 'Hide navigation'}
+        aria-expanded={!collapsed}
+        onClick={toggle}
+      >
+        <PanelLeft aria-hidden="true" />
+      </button>
+
       <Link to="/" className="seemore-brand" viewTransition>
         {config.title}
       </Link>

package/src/app/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, type ComponentProps, type ReactNode } from 'react';
+import { useCallback, useEffect, useLayoutEffect, type ComponentProps, type ReactNode } from 'react';
 import {
   SidebarFolder as BaseFolder,
   SidebarFolderContent as BaseFolderContent,
@@ -43,12 +43,55 @@ const styled = {
 
 const renderPageTree = createPageTreeRenderer(styled);
 
+const COLLAPSE_KEY = 'seemore:sidebar-collapsed';
+
+/* `useLayoutEffect` does nothing on the server and says so in a warning; the prerender pass
+   takes `useEffect`, which it never runs either. */
+const useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
+
+/**
+ * Hiding the rail is a reader's preference, like the theme, so it outlives the page rather
+ * than resetting on the next load. fumadocs owns the state itself — every primitive reads
+ * `collapsed` from the same context — this only teaches it to persist, and gives the header
+ * a trigger to call.
+ */
+export function useSidebarCollapse(): { collapsed: boolean; toggle: () => void } {
+  const { collapsed, setCollapsed } = useSidebar();
+
+  const toggle = useCallback(() => {
+    const next = !collapsed;
+    try {
+      localStorage.setItem(COLLAPSE_KEY, String(next));
+    } catch {
+      // Storage blocked, private window: the choice just does not outlive the page.
+    }
+    setCollapsed(next);
+  }, [collapsed, setCollapsed]);
+
+  return { collapsed, toggle };
+}
+
+/** Applied before paint, so a remembered collapse does not flash the rail open first. */
+function useRestoreCollapse(): void {
+  const { setCollapsed } = useSidebar();
+
+  useIsomorphicLayoutEffect(() => {
+    try {
+      if (localStorage.getItem(COLLAPSE_KEY) === 'true') setCollapsed(true);
+    } catch {
+      // Nothing readable is nothing to restore; the rail stays open.
+    }
+  }, [setCollapsed]);
+}
+
 export function Sidebar({ children }: { children?: ReactNode }) {
   // Below `md` the sidebar is a drawer, and the header's trigger is what opens it. Without
   // reading that state the trigger is decorative: the panel is hidden by CSS alone.
-  const { open, setOpen } = useSidebar();
+  const { open, setOpen, collapsed } = useSidebar();
   const url = useRouteUrl();
 
+  useRestoreCollapse();
+
   // Following a link should not leave the drawer covering the page you asked for.
   useEffect(() => {
     setOpen(false);
@@ -79,7 +122,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
         />
       ) : undefined}
 
-      <div className="seemore-sidebar-column" data-open={open}>
+      <div className="seemore-sidebar-column" data-open={open} data-collapsed={collapsed}>
         <aside className="seemore-sidebar" aria-label="Documentation navigation">
           {/* `toc.integrate` passes the table of contents as children: it belongs inside the
               viewport, so nav and TOC scroll together rather than the TOC sitting below a

package/src/app/styles/globals.css

@@ -26,8 +26,31 @@
     @apply truncate;
   }
 
+  /* One glyph in one slot, whichever trigger is showing: at header scale the panel icon
+     reads as "navigation", and which way it will move is the label's job, not a second
+     arrow's. Sized and muted to sit with the search and theme buttons rather than shout
+     over them. */
+  .seemore-sidebar-trigger,
+  .seemore-sidebar-collapse {
+    @apply shrink-0 rounded-lg p-1.5 text-fd-muted-foreground transition-colors;
+  }
+
+  .seemore-sidebar-trigger:hover,
+  .seemore-sidebar-collapse:hover {
+    @apply bg-fd-accent text-fd-accent-foreground;
+  }
+
+  .seemore-sidebar-trigger svg,
+  .seemore-sidebar-collapse svg {
+    @apply size-5;
+  }
+
   .seemore-sidebar-trigger {
-    @apply shrink-0 md:hidden;
+    @apply md:hidden;
+  }
+
+  .seemore-sidebar-collapse {
+    @apply hidden md:inline-flex;
   }
 
   .seemore-brand {
@@ -152,6 +175,12 @@
     @apply translate-x-0 rtl:translate-x-0;
   }
 
+  /* Collapse is the rail's state alone. Below `md` the same column is the drawer, which has
+     its own trigger and its own reason to be open, so the collapsed choice must not reach it. */
+  .seemore-sidebar-column[data-collapsed='true'] {
+    @apply md:hidden;
+  }
+
   .seemore-sidebar-backdrop {
     @apply fixed inset-0 z-30 bg-black/40 md:hidden;
   }