gorbenko.pavel
89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import * as React from 'react';
|
|
import styles from './SideNav.module.scss';
|
|
import { Icon } from '../../shared/ui/Icon/Icon';
|
|
import { IconName } from '../../shared/ui/Icon/iconNames';
|
|
import { NavSection } from '../../shared/routing';
|
|
|
|
interface INavItem {
|
|
id: NavSection;
|
|
title: string;
|
|
icon: IconName;
|
|
}
|
|
|
|
// Порядок неслучаен: сверху действие (создать), затем три очереди — то, что
|
|
// ждёт пользователя прямо сейчас, — и только потом архив и поиск.
|
|
const ITEMS: INavItem[] = [
|
|
{ id: 'new', title: 'Новая заявка', icon: 'plus' },
|
|
{ id: 'approvals', title: 'На согласовании', icon: 'user-check' },
|
|
{ id: 'execution', title: 'На исполнении', icon: 'helmet' },
|
|
{ id: 'rework', title: 'Доработка', icon: 'edit' },
|
|
{ id: 'own', title: 'Мои заявки', icon: 'clipboard' },
|
|
{ id: 'search', title: 'Поиск', icon: 'search' },
|
|
];
|
|
|
|
interface ISideNavProps {
|
|
activeId: NavSection;
|
|
onChange: (id: NavSection) => void;
|
|
/** Счётчики очередей: сколько заявок ждёт пользователя в каждом разделе. */
|
|
counts?: Partial<Record<NavSection, number>>;
|
|
collapsed: boolean;
|
|
onToggleCollapsed: () => void;
|
|
}
|
|
|
|
// Тёмный боковой рейл портала на всю высоту: бренд сверху, разделы снизу.
|
|
// Сворачивается до узкой полосы с одними иконками.
|
|
export const SideNav: React.FC<ISideNavProps> = ({
|
|
activeId,
|
|
onChange,
|
|
counts,
|
|
collapsed,
|
|
onToggleCollapsed,
|
|
}) => {
|
|
const navClasses = [styles.nav, collapsed ? styles.navCollapsed : ''].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<nav className={navClasses} aria-label="Разделы портала">
|
|
<div className={styles.head}>
|
|
<div className={styles.brand}>
|
|
{!collapsed && <span className={styles.brandText}>Портал заявок</span>}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className={styles.toggle}
|
|
onClick={onToggleCollapsed}
|
|
aria-label={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
|
|
title={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
|
|
>
|
|
<Icon name={collapsed ? 'chevron-right' : 'chevron-left'} size="sm" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className={styles.items}>
|
|
{ITEMS.map((item) => {
|
|
const isActive = item.id === activeId;
|
|
const itemClasses = [styles.item, isActive ? styles.itemActive : ''].filter(Boolean).join(' ');
|
|
const count = counts?.[item.id];
|
|
const showCount = !!count;
|
|
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
className={itemClasses}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
onClick={() => onChange(item.id)}
|
|
title={collapsed ? item.title : undefined}
|
|
>
|
|
<span className={styles.itemIcon}>
|
|
<Icon name={item.icon} size="sm" />
|
|
</span>
|
|
{!collapsed && <span className={styles.itemTitle}>{item.title}</span>}
|
|
{showCount && <span className={styles.badge}>{count}</span>}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|