42 lines
977 B
TypeScript
42 lines
977 B
TypeScript
import React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export interface NavRailProps {
|
|
children: React.ReactNode;
|
|
header?: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const NavRail: React.FC<NavRailProps> = ({
|
|
children,
|
|
header,
|
|
footer,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<nav
|
|
className={twMerge(
|
|
clsx(
|
|
'w-16 h-full flex flex-col items-center',
|
|
'bg-gray-950 border-r border-gray-800',
|
|
'py-4 gap-1 shrink-0',
|
|
),
|
|
className,
|
|
)}
|
|
>
|
|
{/* Logo / header slot */}
|
|
{header && <div className="mb-4">{header}</div>}
|
|
|
|
{/* Navigation items */}
|
|
<div className="flex flex-col items-center gap-1 flex-1">{children}</div>
|
|
|
|
{/* Footer slot (settings, avatar, etc.) */}
|
|
{footer && <div className="mt-auto pt-4 border-t border-gray-800">{footer}</div>}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
NavRail.displayName = 'NavRail';
|