39 lines
2.0 KiB
TypeScript
39 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
import { CONFIG_GROUPS } from '../admin/configNavigation'
|
|
|
|
export default function AdminSidebar() {
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const links = CONFIG_GROUPS.flatMap((group) => group.items)
|
|
const current = links.find((item) => item.href === pathname)
|
|
const renderLinks = (items: typeof links) => (
|
|
<div className="admin-nav-links">
|
|
{items.map((item) => <a key={item.href} href={item.href} aria-current={pathname === item.href ? 'page' : undefined} className={pathname === item.href ? 'is-active' : ''}>{item.label}</a>)}
|
|
</div>
|
|
)
|
|
return (
|
|
<nav className="admin-sidebar" aria-label="Settings navigation">
|
|
<label className="config-mobile-picker">
|
|
<span>Settings</span>
|
|
<select aria-label="Settings section" value={current?.href ?? '/admin'} onChange={(event) => router.push(event.target.value)}>
|
|
<option value="/admin">Settings overview</option>
|
|
{CONFIG_GROUPS.map((group) => <optgroup label={group.title} key={group.title}>{group.items.map((item) => <option key={item.href} value={item.href}>{item.label}</option>)}</optgroup>)}
|
|
</select>
|
|
</label>
|
|
<div className="config-desktop-navigation">
|
|
<a href="/admin" className="config-sidebar-home" aria-current={pathname === '/admin' ? 'page' : undefined}>Settings <span aria-hidden="true">↗</span></a>
|
|
{CONFIG_GROUPS.map((group) => group.advanced ? (
|
|
<details className="admin-nav-group config-nav-advanced" key={pathname + group.title} open={group.items.some((item) => item.href === pathname) || undefined}>
|
|
<summary>{group.title}</summary>{renderLinks(group.items)}
|
|
</details>
|
|
) : (
|
|
<div className="admin-nav-group" key={group.title}><span className="admin-nav-title">{group.title}</span>{renderLinks(group.items)}</div>
|
|
))}
|
|
<a href="/" className="config-sidebar-back">← My requests</a>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|