Improve docs layout and right-side On this page TOC

Author: 0xbbuddha

src/components/DocsLayout.tsx

@@ -1,9 +1,20 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
+import React, { useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
 
-const sections = [
+interface SidebarSection {
+  title: string;
+  icon: React.ReactNode;
+  items: { label: string; to: string }[];
+}
+
+const sections: SidebarSection[] = [
   {
     title: 'Getting Started',
+    icon: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.63 8.41m5.96 5.96a14.926 14.926 0 01-5.84 2.58m0 0a14.926 14.926 0 01-5.84-2.58" />
+      </svg>
+    ),
     items: [
       { label: 'Linux', to: '/docs/installation/linux' },
       { label: 'macOS', to: '/docs/installation/macos' },
@@ -12,53 +23,150 @@ const sections = [
   },
   {
     title: 'Usage',
+    icon: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
+      </svg>
+    ),
     items: [
       { label: 'CLI Commands', to: '/docs/usage' },
+      { label: 'Configuration', to: '/docs/configuration' },
+    ],
+  },
+  {
+    title: 'Images',
+    icon: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
+      </svg>
+    ),
+    items: [
+      { label: 'Available Images', to: '/docs/images' },
+    ],
+  },
+  {
+    title: 'nihil-history',
+    icon: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+    items: [
+      { label: 'Overview & CLI', to: '/docs/nihil-history' },
     ],
   },
   {
     title: 'Features',
+    icon: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
+      </svg>
+    ),
     items: [
       { label: 'Shell Completion', to: '/docs/completion' },
       { label: 'Command History', to: '/docs/history' },
     ],
   },
+  {
+    title: 'Project',
+    icon: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+      </svg>
+    ),
+    items: [
+      { label: 'Architecture', to: '/docs/architecture' },
+      { label: 'Contributing', to: '/docs/contributing' },
+    ],
+  },
   {
     title: 'More',
+    icon: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
     items: [
       { label: 'FAQ', to: '/docs/faq' },
       { label: 'About', to: '/docs/about' },
     ],
   },
 ];
 
+const SidebarSection: React.FC<{ section: SidebarSection; defaultOpen: boolean }> = ({ section, defaultOpen }) => {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-left group transition-colors hover:bg-slate-800/40"
+      >
+        <span className="text-slate-500 group-hover:text-amber-400 transition-colors">
+          {section.icon}
+        </span>
+        <span className="text-[12px] font-semibold uppercase tracking-wider text-slate-400 group-hover:text-slate-200 transition-colors flex-1">
+          {section.title}
+        </span>
+        <svg
+          className={
+            'w-3.5 h-3.5 text-slate-600 transition-transform duration-200 ' +
+            (open ? 'rotate-90' : '')
+          }
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+      <div
+        className={
+          'overflow-hidden transition-all duration-200 ' +
+          (open ? 'max-h-96 opacity-100 mt-1' : 'max-h-0 opacity-0')
+        }
+      >
+        <nav className="space-y-0.5 ml-3 pl-3 border-l border-slate-800/80">
+          {section.items.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) =>
+                'block px-3 py-1.5 rounded-md text-[13px] transition-all duration-150 ' +
+                (isActive
+                  ? 'bg-gradient-to-r from-amber-400/10 to-transparent text-amber-300 font-medium border-l-2 border-amber-400 -ml-[13px] pl-[23px]'
+                  : 'text-slate-500 hover:text-slate-200 hover:bg-slate-800/40')
+              }
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+      </div>
+    </div>
+  );
+};
+
 export const DocsLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+
+  // Auto-open the section that contains the current page
+  const isInSection = (section: SidebarSection) =>
+    section.items.some((item) => location.pathname === item.to);
+
   return (
-    <div className="flex gap-10 items-start">
-      <aside className="w-48 shrink-0 sticky top-24 hidden md:block">
-        <div className="space-y-6">
+    <div className="flex gap-12 items-start">
+      <aside className="w-60 shrink-0 sticky top-24 hidden md:block">
+        <div className="space-y-1 p-2 rounded-xl bg-slate-900/30 border border-slate-800/50 backdrop-blur-sm">
+          <div className="px-3 pt-1 pb-2 mb-1 border-b border-slate-800/50">
+            <p className="text-[10px] font-bold uppercase tracking-[0.25em] text-slate-600">Documentation</p>
+          </div>
           {sections.map((section) => (
-            <div key={section.title}>
-              <p className="text-[11px] font-semibold uppercase tracking-widest text-slate-500 mb-2 px-3">
-                {section.title}
-              </p>
-              <nav className="space-y-0.5">
-                {section.items.map((item) => (
-                  <NavLink
-                    key={item.to}
-                    to={item.to}
-                    className={({ isActive }) =>
-                      'block px-3 py-1.5 rounded-md text-sm transition-colors ' +
-                      (isActive
-                        ? 'bg-amber-400/10 text-amber-300 font-medium'
-                        : 'text-slate-400 hover:text-white hover:bg-slate-800/60')
-                    }
-                  >
-                    {item.label}
-                  </NavLink>
-                ))}
-              </nav>
-            </div>
+            <SidebarSection
+              key={section.title}
+              section={section}
+              defaultOpen={isInSection(section)}
+            />
           ))}
         </div>
       </aside>

src/components/Layout.tsx

@@ -33,7 +33,7 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
     <div className="min-h-screen bg-black text-slate-100 flex flex-col relative">
       <FlyingPigeons />
       <header className="sticky top-0 z-50 border-b border-slate-800/80 bg-black/85 backdrop-blur-xl">
-        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
+        <div className="max-w-[96rem] mx-auto px-4 py-3 flex items-center justify-between gap-4">
 
           {/* Logo */}
           <Link to="/" className="flex items-center gap-3 group">
@@ -111,11 +111,11 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
       </header>
 
       <main className="flex-1">
-        <div className="max-w-6xl mx-auto px-4 py-10">{children}</div>
+        <div className="max-w-[96rem] mx-auto px-4 py-10">{children}</div>
       </main>
 
       <footer className="border-t border-slate-800 bg-black/90 text-xs text-slate-500">
-        <div className="max-w-6xl mx-auto px-4 py-4 flex flex-wrap items-center justify-between gap-2">
+        <div className="max-w-[96rem] mx-auto px-4 py-4 flex flex-wrap items-center justify-between gap-2">
           <span>
             Built by{' '}
             <a href="https://github.com/0xbbuddha" target="_blank" rel="noreferrer"

src/components/SectionToc.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+type TocItem = {
+  id: string;
+  label: string;
+};
+
+export const SectionToc: React.FC<{ items: TocItem[] }> = ({ items }) => {
+  const [activeId, setActiveId] = useState<string>(items[0]?.id ?? '');
+  const [progress, setProgress] = useState(0);
+
+  const ids = useMemo(() => items.map((item) => item.id), [items]);
+
+  useEffect(() => {
+    if (!ids.length) return;
+
+    const markerOffset = Math.floor(window.innerHeight * 0.32);
+    let ticking = false;
+
+    const update = () => {
+      ticking = false;
+      const sections = ids
+        .map((id) => document.getElementById(id))
+        .filter((el): el is HTMLElement => Boolean(el));
+
+      if (!sections.length) return;
+
+      const markerY = window.scrollY + markerOffset;
+      let current = sections[0].id;
+
+      for (const section of sections) {
+        if (section.offsetTop <= markerY) {
+          current = section.id;
+        } else {
+          break;
+        }
+      }
+      setActiveId(current);
+
+      const firstTop = sections[0].offsetTop;
+      const last = sections[sections.length - 1];
+      const lastBottom = last.offsetTop + last.offsetHeight;
+      const total = Math.max(lastBottom - firstTop, 1);
+      const pct = Math.min(Math.max((markerY - firstTop) / total, 0), 1);
+      setProgress(pct);
+    };
+
+    const onScrollOrResize = () => {
+      if (!ticking) {
+        ticking = true;
+        window.requestAnimationFrame(update);
+      }
+    };
+
+    update();
+    window.addEventListener('scroll', onScrollOrResize, { passive: true });
+    window.addEventListener('resize', onScrollOrResize);
+
+    return () => {
+      window.removeEventListener('scroll', onScrollOrResize);
+      window.removeEventListener('resize', onScrollOrResize);
+    };
+  }, [ids]);
+
+  return (
+    <aside className="sticky top-24 hidden sm:block w-[220px] lg:w-[260px]">
+      <div className="rounded-2xl border border-slate-800/70 bg-slate-900/45 p-4 backdrop-blur-sm">
+        <p className="text-xs uppercase tracking-widest text-slate-500 font-semibold">
+          On this page
+        </p>
+        <nav className="relative mt-4 pl-5 space-y-2">
+          <span className="absolute left-0 top-0 h-full w-[2px] bg-slate-800/80" />
+          <span
+            className="absolute left-0 top-0 w-[2px] bg-gradient-to-b from-amber-300 to-amber-500 transition-all duration-200"
+            style={{ height: `${Math.max(progress * 100, 5)}%` }}
+          />
+          {items.map((item) => {
+            const isActive = item.id === activeId;
+            return (
+              <a
+                key={item.id}
+                href={`#${item.id}`}
+                className={
+                  'block text-sm leading-5 transition-colors ' +
+                  (isActive ? 'text-amber-300 font-medium' : 'text-slate-400 hover:text-amber-300')
+                }
+              >
+                {item.label}
+              </a>
+            );
+          })}
+        </nav>
+      </div>
+    </aside>
+  );
+};

src/pages/docs/AboutPage.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { SectionToc } from '../../components/SectionToc';
 
 export const AboutPage: React.FC = () => {
   return (
-    <div className="space-y-8 max-w-4xl">
+    <div className="space-y-8 w-full">
       <header className="space-y-3">
         <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
           Docs / <span className="text-amber-400">About</span>
@@ -17,7 +18,7 @@ export const AboutPage: React.FC = () => {
         </p>
       </header>
 
-      <div className="grid md:grid-cols-[1fr,200px] gap-8 items-start">
+      <div className="grid sm:grid-cols-[minmax(0,_1fr)_180px] gap-8 items-start">
         <div className="space-y-10 min-w-0">
 
           {/* Why */}
@@ -134,9 +135,9 @@ export const AboutPage: React.FC = () => {
             <h2 className="text-xl font-semibold text-white">Useful links</h2>
             <div className="space-y-2 text-sm">
               {[
-                { label: 'GitHub — nihil wrapper', url: 'https://github.com/TheNullPigeons/nihil' },
-                { label: 'GitHub — nihil images', url: 'https://github.com/TheNullPigeons/nihil-images' },
-                { label: 'GitHub — TheNullPigeons org', url: 'https://github.com/TheNullPigeons' },
+                { label: 'GitHub - nihil wrapper', url: 'https://github.com/TheNullPigeons/nihil' },
+                { label: 'GitHub - nihil images', url: 'https://github.com/TheNullPigeons/nihil-images' },
+                { label: 'GitHub - TheNullPigeons org', url: 'https://github.com/TheNullPigeons' },
                 { label: 'Report a bug', url: 'https://github.com/TheNullPigeons/nihil/issues' },
               ].map(({ label, url }) => (
                 <a
@@ -157,17 +158,15 @@ export const AboutPage: React.FC = () => {
 
         </div>
 
-        {/* On this page */}
-        <aside className="space-y-3 text-sm sticky top-24 hidden md:block">
-          <p className="text-slate-500 font-medium">On this page</p>
-          <nav className="space-y-1">
-            <a href="#why" className="block text-slate-400 hover:text-amber-300 text-xs">Why we built this</a>
-            <a href="#components" className="block text-slate-400 hover:text-amber-300 text-xs">What Nihil is</a>
-            <a href="#design" className="block text-slate-400 hover:text-amber-300 text-xs">Design choices</a>
-            <a href="#team" className="block text-slate-400 hover:text-amber-300 text-xs">Who we are</a>
-            <a href="#links" className="block text-slate-400 hover:text-amber-300 text-xs">Useful links</a>
-          </nav>
-        </aside>
+        <SectionToc
+          items={[
+            { id: 'why', label: 'Why we built this' },
+            { id: 'components', label: 'What Nihil is' },
+            { id: 'design', label: 'Design choices' },
+            { id: 'team', label: 'Who we are' },
+            { id: 'links', label: 'Useful links' },
+          ]}
+        />
       </div>
     </div>
   );