feat: changed initial page layout

src/webparts/requestPortal/components/SideNav/SideNav.module.scss

@@ -1,28 +1,77 @@
 @import '../../../../styles/design-tokens';
 
-// Тёмное боковое меню портала (фирменный navy-градиент, золотой маркер
-// активного пункта — как в остальном дизайне).
+// Тёмный боковой рейл портала на всю высоту (фирменный navy-градиент, золотой
+// маркер активного пункта). Не «плавает»: примыкает к контенту, тянется по высоте.
 .nav {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  width: 240px;
-  padding: $sp-3 0;
+  width: 248px;
+  padding: $sp-4 0 $sp-3;
   background: $grad-header;
-  border-radius: $r-lg;
-  box-shadow: $sh-2;
-  overflow: hidden;
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
   transition: width .2s;
 }
 
+.navCollapsed {
+  width: 64px;
+}
+
+// ---- Шапка рейла: бренд + сворачивание ----
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $sp-2;
+  padding: 0 $sp-4 $sp-4;
+  border-bottom: 1px solid rgba(255, 255, 255, .08);
+}
+
+.navCollapsed .head {
+  flex-direction: column;
+  gap: $sp-3;
+  padding: 0 0 $sp-3;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: $sp-2;
+  min-width: 0;
+}
+
+.logo {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: $r-sm;
+  background: $gold-500;
+  color: $navy-950;
+  font-family: $font-serif;
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: .5px;
+}
+
+.brandText {
+  font-family: $font-serif;
+  font-size: 15px;
+  font-weight: 600;
+  color: $white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .toggle {
-  align-self: flex-end;
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
-  margin: 0 $sp-3 $sp-2;
   padding: 0;
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: $r-sm;
@@ -37,18 +86,16 @@
   }
 }
 
-.navCollapsed {
-  width: 56px;
+// ---- Пункты разделов ----
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: $sp-4;
+}
 
-  .toggle {
-    align-self: center;
-    margin: 0 0 $sp-2;
-  }
-
-  .item {
-    justify-content: center;
-    padding: 12px 0;
-  }
+.navCollapsed .items {
+  margin-top: $sp-3;
 }
 
 .item {
@@ -76,6 +123,11 @@
   }
 }
 
+.navCollapsed .item {
+  justify-content: center;
+  padding: 12px 0;
+}
+
 .itemActive {
   color: $white;
   background: rgba(255, 255, 255, .07);
@@ -111,9 +163,46 @@
   text-align: center;
 }
 
-// В свёрнутом меню бейдж «прилипает» к иконке, т.к. подписи нет.
 .navCollapsed .badge {
   position: absolute;
   top: 6px;
   right: 8px;
 }
+
+// ---- Подвал рейла: пользователь ----
+.footer {
+  margin: auto $sp-4 0; // margin-top:auto прижимает к низу; по бокам — инсет для border-top
+  display: flex;
+  align-items: center;
+  gap: $sp-2;
+  padding-top: $sp-3;
+  border-top: 1px solid rgba(255, 255, 255, .08);
+}
+
+.navCollapsed .footer {
+  justify-content: center;
+  margin: auto 0 0;
+}
+
+.avatar {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, .1);
+  color: $white;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.userName {
+  min-width: 0;
+  color: rgba(255, 255, 255, .8);
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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>
   );
 };