88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { useState } from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import {
|
|
Users,
|
|
LayoutDashboard,
|
|
PanelLeftClose,
|
|
PanelLeftOpen,
|
|
PanelRightClose,
|
|
PanelRightOpen
|
|
} from 'lucide-react';
|
|
import { useTranslation } from '../hooks/useTranslation';
|
|
|
|
export const Sidebar = () => {
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
|
|
const { t, lang } = useTranslation();
|
|
const isRtl = lang === 'fa';
|
|
|
|
const ToggleIcon = isRtl
|
|
? (isCollapsed ? PanelRightOpen : PanelRightClose)
|
|
: (isCollapsed ? PanelLeftOpen : PanelLeftClose);
|
|
|
|
const navItems = [
|
|
{
|
|
path: '/workspaces',
|
|
icon: LayoutDashboard,
|
|
label: t.sidebar?.workspaces || 'Workspaces'
|
|
},
|
|
{
|
|
path: '/clients',
|
|
icon: Users,
|
|
label: t.sidebar?.clients || 'Clients'
|
|
},
|
|
];
|
|
|
|
return (
|
|
<aside
|
|
className={`border-e border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 hidden md:flex flex-col h-screen sticky top-0 shrink-0 transition-all duration-300 ease-in-out ${
|
|
isCollapsed ? 'w-20' : 'w-64'
|
|
}`}
|
|
>
|
|
<div className={`h-18.25 flex items-center border-b border-slate-200 dark:border-slate-800 shrink-0 transition-all ${
|
|
isCollapsed ? 'justify-center px-0' : 'justify-between px-6'
|
|
}`}>
|
|
{!isCollapsed && (
|
|
<h2 className="text-xl font-bold text-slate-800 dark:text-white truncate">
|
|
{t.title || "Qlockify"}
|
|
</h2>
|
|
)}
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
|
|
title={isCollapsed ? (t.sidebar?.expand || 'Expand') : (t.sidebar?.collapse || 'Collapse')}
|
|
>
|
|
<ToggleIcon size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<NavLink
|
|
key={item.path}
|
|
to={item.path}
|
|
title={isCollapsed ? item.label : undefined}
|
|
className={({ isActive }) =>
|
|
`flex items-center py-2.5 rounded-lg text-sm font-medium transition-colors ${
|
|
isCollapsed ? 'justify-center px-0' : 'gap-3 px-3'
|
|
} ${
|
|
isActive
|
|
? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
|
|
: 'text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50'
|
|
}`
|
|
}
|
|
>
|
|
<Icon size={isCollapsed ? 22 : 18} className="shrink-0" />
|
|
{!isCollapsed && (
|
|
<span className="truncate whitespace-nowrap">{item.label}</span>
|
|
)}
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
};
|