46 lines
No EOL
1.6 KiB
TypeScript
46 lines
No EOL
1.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import { NavSection } from '../types';
|
|
import { LibraryIcon } from './Icons';
|
|
|
|
interface SidebarProps {
|
|
navLinks: NavSection[];
|
|
}
|
|
|
|
export const Sidebar: React.FC<SidebarProps> = ({ navLinks }) => {
|
|
return (
|
|
<aside className="w-64 bg-gray-800 p-4 space-y-6 overflow-y-auto shadow-lg">
|
|
<div className="flex items-center space-x-3 mb-6">
|
|
<LibraryIcon className="h-10 w-10 text-purple-400" />
|
|
<h1 className="text-2xl font-bold text-white">Chemical Docs</h1>
|
|
</div>
|
|
{navLinks.map((section) => (
|
|
<div key={section.title}>
|
|
<h2 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">{section.title}</h2>
|
|
<nav className="space-y-1">
|
|
{section.links.map((link) => {
|
|
const IconComponent = link.icon;
|
|
return (
|
|
<NavLink
|
|
key={link.path}
|
|
to={link.path}
|
|
className={({ isActive }) =>
|
|
`flex items-center space-x-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors duration-150 ease-in-out
|
|
${isActive
|
|
? 'bg-purple-600 text-white shadow-md'
|
|
: 'text-gray-300 hover:bg-gray-700 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
{IconComponent && <IconComponent className="h-5 w-5" />}
|
|
<span>{link.label}</span>
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
))}
|
|
</aside>
|
|
);
|
|
}; |