feat: changed initial page layout

src/webparts/requestPortal/components/SideNav/SideNav.tsx

@@ -23,53 +23,77 @@ interface ISideNavProps {
   approvalsCount?: number;
   collapsed: boolean;
   onToggleCollapsed: () => void;
+  /** Имя текущего пользователя (для подвала рейла). */
+  userName?: string;
 }
 
-// Тёмное боковое меню портала: переключает разделы (подача заявки / таблицы
-// заявок). Сворачивается до узкой полосы с одними иконками.
+// Инициалы для аватара (первые буквы двух первых слов имени).
+function initials(name?: string): string {
+  if (!name) return '—';
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  const value = ((parts[0]?.[0] ?? '') + (parts[1]?.[0] ?? '')).toUpperCase();
+  return value || '—';
+}
+
+// Тёмный боковой рейл портала на всю высоту: бренд сверху, разделы, пользователь
+// снизу. Сворачивается до узкой полосы с одними иконками.
 export const SideNav: React.FC<ISideNavProps> = ({
   activeId,
   onChange,
   approvalsCount,
   collapsed,
   onToggleCollapsed,
+  userName,
 }) => {
   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>
+      <div className={styles.head}>
+        <div className={styles.brand}>
+          <span className={styles.logo}>ТС</span>
+          {!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>
 
-      {ITEMS.map((item) => {
-        const isActive = item.id === activeId;
-        const itemClasses = [styles.item, isActive ? styles.itemActive : ''].filter(Boolean).join(' ');
-        const showCount = item.id === 'approvals' && !!approvalsCount;
+      <div className={styles.items}>
+        {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>
-        );
-      })}
+          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>
+          );
+        })}
+      </div>
+
+      <div className={styles.footer} title={collapsed ? userName : undefined}>
+        <span className={styles.avatar}>{initials(userName)}</span>
+        {!collapsed && <span className={styles.userName}>{userName || 'Пользователь'}</span>}
+      </div>
     </nav>
   );
 };