Commit workspace changes

resources/js/components/docs/DocsSidebarNav.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+function jumpToSection(targetId) {
+  if (!targetId || typeof window === 'undefined') return
+
+  const element = document.getElementById(targetId)
+  if (!element) return
+
+  element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  window.history.replaceState(null, '', `#${targetId}`)
+}
+
+export default function DocsSidebarNav({ sections, ariaLabel = 'Sections on this page', selectLabel = 'Jump to section', navTitle = 'On this page' }) {
+  return (
+    <>
+      <div className="lg:hidden">
+        <label htmlFor="groups-help-nav" className="sr-only">{selectLabel}</label>
+        <select
+          id="groups-help-nav"
+          className="w-full rounded-[20px] border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white outline-none"
+          defaultValue=""
+          onChange={(event) => {
+            jumpToSection(event.target.value)
+            event.target.value = ''
+          }}
+        >
+          <option value="">Jump to a section</option>
+          {sections.map((section) => (
+            <option key={section.id} value={section.id}>{section.label}</option>
+          ))}
+        </select>
+      </div>
+
+      <nav aria-label={ariaLabel} className="hidden lg:block lg:sticky lg:top-24">
+        <div className="rounded-[28px] border border-white/10 bg-white/[0.03] p-4 shadow-[0_18px_50px_rgba(2,6,23,0.22)]">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-200/80">{navTitle}</p>
+          <ul className="mt-4 space-y-1.5">
+            {sections.map((section) => (
+              <li key={section.id}>
+                <a href={`#${section.id}`} className="block rounded-2xl px-3 py-2 text-sm text-slate-300 transition hover:bg-white/[0.05] hover:text-white">
+                  {section.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </nav>
+    </>
+  )
+}