50 lines
1.9 KiB
JavaScript
50 lines
1.9 KiB
JavaScript
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>
|
|
</>
|
|
)
|
|
} |