34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { t } from '@/lib/i18n'
|
|
import type { DocLink, DocSection } from '@/hooks/useDocs'
|
|
|
|
interface DocsSidebarProps {
|
|
docs: DocLink[]
|
|
selectedDoc: DocSection
|
|
onSelectDoc: (docId: DocSection) => void
|
|
}
|
|
|
|
export function DocsSidebar({ docs, selectedDoc, onSelectDoc }: DocsSidebarProps): React.ReactElement {
|
|
return (
|
|
<aside className="lg:w-64 flex-shrink-0">
|
|
<div className="bg-cyber-dark border border-neon-cyan/20 rounded-lg p-4 sticky top-4 backdrop-blur-sm">
|
|
<h2 className="text-lg font-bold mb-4 text-neon-cyan font-mono">{t('docs.title')}</h2>
|
|
<nav className="space-y-2">
|
|
{docs.map((doc) => (
|
|
<button
|
|
key={doc.id}
|
|
onClick={() => onSelectDoc(doc.id)}
|
|
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-all ${
|
|
selectedDoc === doc.id
|
|
? 'bg-neon-cyan/20 text-neon-cyan font-medium border border-neon-cyan/50 shadow-glow-cyan'
|
|
: 'text-cyber-accent hover:bg-cyber-dark/50 hover:text-neon-cyan border border-transparent hover:border-neon-cyan/30'
|
|
}`}
|
|
>
|
|
{doc.title}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|