74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { Book, Clock, Code, House, Network, Puzzle, Settings } from 'lucide-react';
|
|
import { useI18n } from '../../i18n';
|
|
import { NAV_ITEMS, normalizeWorkspacePath } from '../../router/routes';
|
|
|
|
import blueLogo from '../../assets/images/login/blue_logo.png';
|
|
|
|
const MENU_MARKS: Record<string, typeof House> = {
|
|
'/home': House,
|
|
'/knowledge': Book,
|
|
'/channels': Network,
|
|
'/skills': Puzzle,
|
|
'/cron': Clock,
|
|
// '/scripts': Code,
|
|
'/setting': Settings,
|
|
};
|
|
|
|
export default function Sidebar() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { t } = useI18n();
|
|
const currentId = normalizeWorkspacePath(location.pathname);
|
|
|
|
return (
|
|
<aside className="box-border flex h-full w-[80px] flex-col items-center pb-[8px]">
|
|
<div className="flex flex-1 w-full flex-col gap-[16px]">
|
|
{NAV_ITEMS.map((item) => {
|
|
const active = currentId === item.path;
|
|
const isSetting = item.path === '/setting';
|
|
const MenuMark = MENU_MARKS[item.path];
|
|
|
|
return (
|
|
<div
|
|
key={item.path}
|
|
className={['flex flex-col gap-[16px]', isSetting ? 'mt-auto mb-[8px] shrink-1' : ''].join(' ')}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="flex cursor-pointer flex-col items-center justify-center"
|
|
onClick={() => navigate(item.path)}
|
|
>
|
|
<div
|
|
className={[
|
|
'box-border flex h-[48px] w-[48px] flex-col items-center justify-center rounded-[16px] hover:bg-white dark:hover:bg-[#222225]',
|
|
active ? 'bg-white dark:bg-[#222225]' : '',
|
|
].join(' ')}
|
|
>
|
|
<MenuMark
|
|
aria-hidden="true"
|
|
className="h-[18px] w-[18px]"
|
|
strokeWidth={2.1}
|
|
style={{ color: active ? '#2B7FFF' : '#525866' }}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="mt-[4px] mb-[8px] text-[14px] hover:text-[#2B7FFF]"
|
|
style={{ color: active ? '#2B7FFF' : '#525866' }}
|
|
>
|
|
{t(item.labelKey)}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-auto flex h-[48px] w-[48px] items-center justify-center overflow-hidden rounded-full border border-black/10 bg-white dark:border-[#2a2a2d] dark:bg-[#222225]">
|
|
<img className="h-full w-full object-cover" src={blueLogo} alt="Logo" />
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|