Панель со списками заявок (#1)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/1 Co-authored-by: gorbenko.pavel <gorbenko.pavel@tnsu.kz> Co-committed-by: gorbenko.pavel <gorbenko.pavel@tnsu.kz>
2026-08-04 12:02:11 +00:00
parent ba4e3feee5
commit 0aa0a60e40
21 changed files with 1442 additions and 121 deletions
@@ -0,0 +1,75 @@
+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: 'own', title: 'Мои заявки', icon: 'clipboard' },
+];
+
+interface ISideNavProps {
+  activeId: NavSection;
+  onChange: (id: NavSection) => void;
+  /** Счётчик у пункта «На согласовании» (сколько ждут решения). */
+  approvalsCount?: number;
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+}
+
+// Тёмное боковое меню портала: переключает разделы (подача заявки / таблицы
+// заявок). Сворачивается до узкой полосы с одними иконками.
+export const SideNav: React.FC<ISideNavProps> = ({
+  activeId,
+  onChange,
+  approvalsCount,
+  collapsed,
+  onToggleCollapsed,
+}) => {
+  const navClasses = [styles.nav, collapsed ? styles.navCollapsed : ''].filter(Boolean).join(' ');
+
+  return (
+    <nav className={navClasses} aria-label="Разделы портала">
+      <button
+        type="button"
+        className={styles.toggle}
+        onClick={onToggleCollapsed}
+        aria-label={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
+        title={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
+      >
+        <Icon name={collapsed ? 'chevron-right' : 'chevron-left'} size="sm" />
+      </button>
+
+      {ITEMS.map((item) => {
+        const isActive = item.id === activeId;
+        const itemClasses = [styles.item, isActive ? styles.itemActive : ''].filter(Boolean).join(' ');
+        const showCount = item.id === 'approvals' && !!approvalsCount;
+
+        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}>{approvalsCount}</span>}
+          </button>
+        );
+      })}
+    </nav>
+  );
+};