feat: Sidebar + SidebarToggle, адаптивность компонентов (0.2.0)

.storybook/preview.tsx

@@ -1,21 +1,29 @@
-import type { Preview } from '@storybook/react-vite'
+import type { Preview } from '@storybook/react-vite';
+import * as React from 'react';
+import { IconSprite } from '../src/Icon/IconSprite';
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
+        color: /(background|color)$/i,
-       date: /Date$/i,
+        date: /Date$/i,
       },
     },
-
+    a11y: { test: 'todo' },
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: 'todo'
-    }
   },
+  // Спрайт иконок монтируется один раз для ВСЕХ историй — иначе <Icon> пустой.
+  // Плюс общий отступ и шрифт Inter, как в боевом портале.
+  decorators: [
+    (Story) => (
+      <>
+        <IconSprite />
+        <div style={{ padding: 16, fontFamily: "'Inter', -apple-system, 'Segoe UI', sans-serif" }}>
+          <Story />
+        </div>
+      </>
+    ),
+  ],
 };
 
-export default preview;
+export default preview;

PROJECT.md

@@ -96,7 +96,24 @@ DecisionPanel, ApprovalMatrix, DepartmentPicker, ProjectPicker.
 - Пикеры — возможно позже РАЗДЕЛИТЬ: презентационный UI (ui-kit) + data-обёртка (проект).
 - Логику согласования — возможно в отдельный пакет @tnsu/approval (или @tnsu/sp-core). На будущее.
 
+### Адаптивность (жёсткое требование) — базовый проход СДЕЛАН
+Часть DoD каждого компонента. Основа: в tokens.scss брейкпоинты
+`$bp-xs:350 / $bp-sm:640 / $bp-md:768 / $bp-lg:1024 / $bp-xl:1280` + миксины `below()`/`above()`.
+Проход по компонентам (в 0.2.0):
+- FormGrid / CollapseSection — 2 колонки → 1 на < sm (через below($bp-sm)).
+- TextInput/TextArea/Select — сделаны резиновыми (width:100% + box-sizing) — раньше зависели
+  от глобального стиля портала.
+- FormCard — padding 32→18 на < sm.
+- FormActions — кнопки в столбец на всю ширину на < sm (поля согласованы с FormCard 18px).
+- ConfirmDialog — уже адаптивна (overlay padding + max-width).
+- Sidebar — рейл ↔ выезжающий drawer + SidebarToggle (бургер, виден только < md).
+- Мелкие (Alert, Icon, Toggle, Button, AttachmentList, FileDropzone, PrintButton) — уже резиновые.
+ItemsTable→скролл сделаем вместе с обобщением в DataTable.
+
 ### Группа 4 — навигация / app shell (ФАЗА 2)
+- [СДЕЛАНО, не опубликовано] Sidebar — обобщён (items/brand пропсами, id=string) +
+  адаптивный: десктоп-рейл со сворачиванием, < 768px — выезжающий drawer + затемнение
+  (mobileOpen/onMobileClose, бургер рисует родитель). Собирается, в index экспортирован.
 Tabs (из CategoryTabs), Breadcrumbs (новый), Sidebar (из SideNav), AppLayout (из RequestPortal),
 Drawer(?). Сначала «расцепить» от роутинга портала → сделать controlled
 (items + activeId + onSelect), потом переносить. Даёт новым приложениям готовую оболочку.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tnsu/ui-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "TNSU shared UI components for SPFx web parts",
   "author": "Timur Gorodetskiy",
   "license": "ISC",

src/Alert/Alert.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Alert } from './Alert';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Сообщения/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: { variant: { control: 'radio', options: ['warn', 'ok', 'err'] } },
+  args: { variant: 'ok', children: 'Заявка успешно отправлена.' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Success: Story = { args: { variant: 'ok', children: 'Заявка успешно отправлена.' } };
+export const Warning: Story = { args: { variant: 'warn', children: 'Проверьте заполнение обязательных полей.' } };
+export const Error: Story = { args: { variant: 'err', children: 'Не удалось загрузить заявку №42.' } };

src/AttachmentList/AttachmentList.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AttachmentList } from './AttachmentList';
+
+const ITEMS = [
+  { url: '#', fileName: 'Договор.pdf' },
+  { url: '#', fileName: 'Смета.xlsx' },
+  { url: '#', fileName: 'Скан приказа.jpg' },
+];
+
+const meta: Meta<typeof AttachmentList> = {
+  title: 'Файлы/AttachmentList',
+  component: AttachmentList,
+  tags: ['autodocs'],
+  args: { items: ITEMS },
+};
+
+export default meta;
+type Story = StoryObj<typeof AttachmentList>;
+
+export const ReadOnly: Story = {};
+export const Removable: Story = { args: { onRemove: () => undefined } };
+export const Empty: Story = { args: { items: [] } };

src/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from './Button';
 // meta — описание компонента для Storybook: где показать в дереве слева,
 // какой компонент и какими контролами крутить пропсы в панели справа.
 const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
+  title: 'Кнопки/Button',
   component: Button,
   tags: ['autodocs'], // автоматически сгенерит страницу-документацию
   argTypes: {

src/CollapseSection/CollapseSection.stories.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CollapseSection } from './CollapseSection';
+
+const meta: Meta<typeof CollapseSection> = {
+  title: 'Формы/CollapseSection',
+  component: CollapseSection,
+  tags: ['autodocs'],
+  args: {
+    title: 'Заявка на отпуск',
+    icon: 'people',
+    defaultOpen: true,
+    children: <p style={{ margin: 0 }}>Поля секции формы.</p>,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CollapseSection>;
+
+export const Open: Story = {};
+export const Closed: Story = { args: { defaultOpen: false } };

src/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ConfirmHost } from './ConfirmDialog';
+import { confirmModal } from './confirmModal';
+import { Button } from '../Button/Button';
+
+// ConfirmHost монтируется один раз, а confirmModal(...) вызывается императивно
+// из любого места и возвращает промис (true/false).
+const meta: Meta<typeof ConfirmHost> = {
+  title: 'Оверлеи/ConfirmDialog',
+  component: ConfirmHost,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof ConfirmHost> = {
+  render: () => (
+    <>
+      <ConfirmHost />
+      <Button
+        variant="danger"
+        onClick={() =>
+          confirmModal({
+            title: 'Удалить заявку?',
+            message: 'Действие необратимо. Продолжить?',
+            confirmText: 'Удалить',
+            danger: true,
+          })
+        }
+      >
+        Открыть подтверждение
+      </Button>
+    </>
+  ),
+};

src/FileDropzone/FileDropzone.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { FileDropzone } from './FileDropzone';
+
+const meta: Meta<typeof FileDropzone> = {
+  title: 'Файлы/FileDropzone',
+  component: FileDropzone,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof FileDropzone> = {
+  render: () => {
+    const [files, setFiles] = useState<File[]>([]);
+    return <FileDropzone files={files} onChange={setFiles} />;
+  },
+};

src/FormActions/FormActions.module.scss

@@ -12,4 +12,16 @@
   border-top: 1px solid $gray-200;
   border-radius: 0 0 $r-lg $r-lg;
   box-shadow: 0 -4px 16px rgba(15, 36, 64, .04);
+
+  // Мобилка: кнопки в столбец на всю ширину; отрицательные поля под уменьшенный
+  // padding карточки (18px, см. FormCard). Основная кнопка (accent, последняя) — сверху.
+  @include below($bp-sm) {
+    flex-direction: column-reverse;
+    margin: 20px -18px -18px;
+    padding: 14px 18px;
+
+    > * {
+      width: 100%;
+    }
+  }
 }

src/FormActions/FormActions.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormActions } from './FormActions';
+import { Button } from '../Button/Button';
+
+const meta: Meta<typeof FormActions> = {
+  title: 'Формы/FormActions',
+  component: FormActions,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof FormActions> = {
+  render: () => (
+    <FormActions>
+      <Button variant="secondary">Отмена</Button>
+      <Button variant="accent">Отправить</Button>
+    </FormActions>
+  ),
+};

src/FormCard/FormCard.module.scss

@@ -6,6 +6,10 @@
   border-radius: $r-lg;
   box-shadow: $sh-1;
   padding: 32px;
+
+  @include below($bp-sm) {
+    padding: 18px;
+  }
 }
 
 .header {

src/FormCard/FormCard.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormCard } from './FormCard';
+import { RequestNumber } from '../RequestNumber/RequestNumber';
+
+const meta: Meta<typeof FormCard> = {
+  title: 'Формы/FormCard',
+  component: FormCard,
+  tags: ['autodocs'],
+  args: {
+    title: 'Заявка на отпуск',
+    subtitle: 'Категория: Отдел кадров',
+    children: <p style={{ margin: 0 }}>Здесь располагаются поля формы.</p>,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormCard>;
+
+export const Basic: Story = {};
+
+export const WithHeaderRight: Story = {
+  args: { headerRight: <RequestNumber code="11-2608-3" /> },
+};

src/FormField/FormField.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { FormField } from './FormField';
+import { TextInput } from '../TextInput/TextInput';
+
+const meta: Meta<typeof FormField> = {
+  title: 'Формы/FormField',
+  component: FormField,
+  tags: ['autodocs'],
+  args: { label: 'Должность', required: true },
+};
+
+export default meta;
+type Story = StoryObj<typeof FormField>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [v, setV] = useState('');
+    return (
+      <FormField {...args}>
+        <TextInput value={v} onChange={setV} placeholder="Введите значение" />
+      </FormField>
+    );
+  },
+};

src/FormGrid/FormGrid.module.scss

@@ -5,7 +5,7 @@
   grid-template-columns: 1fr 1fr;
   gap: 18px 22px;
 
-  @media (max-width: 640px) {
+  @include below($bp-sm) {
     grid-template-columns: 1fr;
   }
 }

src/FormGrid/FormGrid.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { FormGrid } from './FormGrid';
+import { FormField } from '../FormField/FormField';
+import { TextInput } from '../TextInput/TextInput';
+
+const meta: Meta<typeof FormGrid> = {
+  title: 'Формы/FormGrid',
+  component: FormGrid,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const TwoColumns: StoryObj<typeof FormGrid> = {
+  render: () => {
+    const [a, setA] = useState('');
+    const [b, setB] = useState('');
+    const [c, setC] = useState('');
+    return (
+      <FormGrid>
+        <FormField label="Имя">
+          <TextInput value={a} onChange={setA} />
+        </FormField>
+        <FormField label="Фамилия">
+          <TextInput value={b} onChange={setB} />
+        </FormField>
+        <FormField label="Комментарий" full>
+          <TextInput value={c} onChange={setC} placeholder="На всю ширину (full)" />
+        </FormField>
+      </FormGrid>
+    );
+  },
+};

src/FormMode.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { FormModeProvider } from './FormMode';
+import { TextInput } from './TextInput/TextInput';
+import { Select } from './Select/Select';
+
+// FormModeProvider проставляет режим «только чтение» для всех полей внутри —
+// поля-примитивы сами его подхватывают через useFormReadOnly(), не нужно тащить
+// readOnly в каждое поле руками.
+const meta: Meta<typeof FormModeProvider> = {
+  title: 'Основа/FormMode',
+  component: FormModeProvider,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const ReadOnly: StoryObj<typeof FormModeProvider> = {
+  render: () => (
+    <FormModeProvider readOnly>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320 }}>
+        <TextInput value="Поле недоступно для правки" onChange={() => undefined} />
+        <Select
+          value="1"
+          onChange={() => undefined}
+          options={[{ value: '1', label: 'Выбранное значение' }]}
+        />
+      </div>
+    </FormModeProvider>
+  ),
+};

src/Icon/Icon.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from './Icon';
+import { ICON_NAMES } from './iconNames';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Основа/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {
+    name: { control: 'select', options: [...ICON_NAMES] },
+    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+  },
+  args: { name: 'send', size: 'md' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const Single: Story = {};
+
+export const AllIcons: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
+      {ICON_NAMES.map((n) => (
+        <div key={n} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, fontSize: 11 }}>
+          <Icon name={n} size="lg" />
+          <span>{n}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};

src/Icon/IconSprite.tsx

@@ -126,6 +126,9 @@ export const IconSprite: React.FC = () => (
       <circle cx="11" cy="11" r="7" />
       <path d="m21 21-4.35-4.35" />
     </symbol>
+    <symbol id="i-menu" viewBox="0 0 24 24">
+      <path d="M4 6h16M4 12h16M4 18h16" />
+    </symbol>
     <symbol id="i-warning" viewBox="0 0 24 24">
       <path d="M12 2 1 21h22z" strokeLinejoin="round" />
       <path d="M12 9v5M12 17h.01" />

src/Icon/iconNames.ts

@@ -29,6 +29,7 @@ export const ICON_NAMES = [
   'chevron-left',
   'arrow-left',
   'search',
+  'menu',
   'warning',
   'check',
   'plus'

src/MoneyInput/MoneyInput.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { MoneyInput } from './MoneyInput';
+
+const meta: Meta<typeof MoneyInput> = {
+  title: 'Поля/MoneyInput',
+  component: MoneyInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof MoneyInput> = {
+  render: () => {
+    const [v, setV] = useState('350000');
+    return <MoneyInput value={v} onChange={setV} />;
+  },
+};

src/PhoneInput/PhoneInput.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { PhoneInput } from './PhoneInput';
+
+const meta: Meta<typeof PhoneInput> = {
+  title: 'Поля/PhoneInput',
+  component: PhoneInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof PhoneInput> = {
+  render: () => {
+    const [v, setV] = useState('');
+    return <PhoneInput value={v} onChange={setV} />;
+  },
+};

src/PrintButton/PrintButton.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PrintButton } from './PrintButton';
+
+const meta: Meta<typeof PrintButton> = {
+  title: 'Кнопки/PrintButton',
+  component: PrintButton,
+  tags: ['autodocs'],
+  args: { label: 'Печать' },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof PrintButton> = {};

src/RequestNumber/RequestNumber.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RequestNumber } from './RequestNumber';
+
+const meta: Meta<typeof RequestNumber> = {
+  title: 'Сообщения/RequestNumber',
+  component: RequestNumber,
+  tags: ['autodocs'],
+  args: { code: '11-2608-3' },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof RequestNumber> = {};

src/Select/Select.module.scss

@@ -2,6 +2,8 @@
 
 .select {
   appearance: none;
+  width: 100%;
+  box-sizing: border-box;
   padding: 11px 36px 11px 13px;
   border: 1px solid $gray-300;
   border-radius: $r-sm;

src/Select/Select.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Select } from './Select';
+
+const OPTIONS = [
+  { value: '1', label: 'Основной отпуск' },
+  { value: '2', label: 'Без сохранения з/п' },
+  { value: '3', label: 'Учебный' },
+];
+
+const meta: Meta<typeof Select> = {
+  title: 'Поля/Select',
+  component: Select,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Select> = {
+  render: () => {
+    const [v, setV] = useState('');
+    return <Select value={v} onChange={setV} options={OPTIONS} placeholder="Выберите тип…" />;
+  },
+};

src/Sidebar/Sidebar.module.scss

@@ -0,0 +1,204 @@
+@import '../tokens/tokens';
+
+// Тёмный боковой рейл на всю высоту (фирменный navy-градиент, золотой
+// маркер активного пункта). Не «плавает»: примыкает к контенту, тянется по высоте.
+.nav {
+  display: flex;
+  flex-direction: column;
+  width: 248px;
+  padding: $sp-4 0 $sp-3;
+  background: $grad-header;
+  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;
+}
+
+.brandText {
+  font-family: $font-serif;
+  font-size: 15px;
+  font-weight: 600;
+  color: $white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toggle {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, .18);
+  border-radius: $r-sm;
+  background: transparent;
+  color: rgba(255, 255, 255, .6);
+  cursor: pointer;
+  transition: .16s;
+
+  &:hover {
+    border-color: $gold-400;
+    color: $gold-300;
+  }
+}
+
+// ---- Пункты разделов ----
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: $sp-4;
+}
+
+.navCollapsed .items {
+  margin-top: $sp-3;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: $sp-3;
+  width: 100%;
+  padding: 12px 18px;
+  border: 0;
+  border-left: 3px solid transparent;
+  background: transparent;
+  color: rgba(255, 255, 255, .62);
+  font-family: $font-sans;
+  font-size: 13.5px;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color .18s, background .18s, border-color .18s;
+
+  &:hover {
+    color: rgba(255, 255, 255, .92);
+    background: rgba(255, 255, 255, .04);
+  }
+}
+
+.navCollapsed .item {
+  justify-content: center;
+  padding: 12px 0;
+}
+
+.itemActive {
+  color: $white;
+  background: rgba(255, 255, 255, .07);
+  border-left-color: $gold-500;
+
+  .itemIcon {
+    color: $gold-400;
+  }
+}
+
+.itemIcon {
+  flex-shrink: 0;
+  display: inline-flex;
+  color: inherit;
+}
+
+.itemTitle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.badge {
+  flex-shrink: 0;
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: $r-full;
+  background: $gold-500;
+  color: $navy-950;
+  font-size: $fs-overline;
+  font-weight: 700;
+  text-align: center;
+}
+
+.navCollapsed .badge {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+}
+
+// ---- Затемнение фона под мобильным drawer ----
+.backdrop {
+  display: none;
+}
+
+// ---- Адаптив: < 768px рейл превращается в выезжающий drawer ----
+// На мобилке сайдбар спрятан за левым краем и выезжает поверх контента, когда
+// родитель ставит mobileOpen (бургер в шапке). Свёрнутый режим (иконки) на
+// мобилке не применяем — drawer всегда полный; переключатель ширины прячем.
+@include below($bp-md) {
+  .nav,
+  .navCollapsed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000;
+    width: 248px;
+    transform: translateX(-100%);
+    transition: transform .25s ease;
+  }
+
+  .navMobileOpen {
+    transform: translateX(0);
+    box-shadow: $sh-modal;
+  }
+
+  .toggle {
+    display: none;
+  }
+
+  .backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    background: rgba(10, 27, 48, .45);
+  }
+}
+
+// На совсем узких экранах drawer занимает почти всю ширину, оставляя щель
+// для затемнения справа — так видно, что за ним есть контент.
+@include below($bp-xs) {
+  .nav,
+  .navCollapsed {
+    width: 86vw;
+    max-width: 300px;
+  }
+}

src/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Sidebar, ISidebarItem } from './Sidebar';
+import { SidebarToggle } from './SidebarToggle';
+
+const ITEMS: ISidebarItem[] = [
+  { id: 'new', title: 'Новая заявка', icon: 'plus' },
+  { id: 'approvals', title: 'На согласовании', icon: 'user-check', count: 3 },
+  { id: 'execution', title: 'На исполнении', icon: 'helmet' },
+  { id: 'rework', title: 'Доработка', icon: 'edit', count: 1 },
+  { id: 'own', title: 'Мои заявки', icon: 'clipboard' },
+  { id: 'search', title: 'Поиск', icon: 'search' },
+];
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Навигация/Sidebar',
+  component: Sidebar,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ height: 480, display: 'flex' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+export const Default: Story = {
+  render: () => {
+    const [active, setActive] = useState('approvals');
+    const [collapsed, setCollapsed] = useState(false);
+    return (
+      <Sidebar
+        items={ITEMS}
+        activeId={active}
+        onChange={setActive}
+        brand="Портал заявок"
+        collapsed={collapsed}
+        onToggleCollapsed={() => setCollapsed((c) => !c)}
+      />
+    );
+  },
+};
+
+export const Collapsed: Story = {
+  render: () => {
+    const [active, setActive] = useState('approvals');
+    const [collapsed, setCollapsed] = useState(true);
+    return (
+      <Sidebar
+        items={ITEMS}
+        activeId={active}
+        onChange={setActive}
+        brand="Портал заявок"
+        collapsed={collapsed}
+        onToggleCollapsed={() => setCollapsed((c) => !c)}
+      />
+    );
+  },
+};
+
+// Мобильный drawer: сузь окно браузера (или переключи Viewport в панели Storybook)
+// ниже 768px — сайдбар спрячется, а «☰ Меню» его выдвинет поверх контента.
+export const MobileDrawer: Story = {
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+  render: () => {
+    const [active, setActive] = useState('approvals');
+    const [open, setOpen] = useState(false);
+    return (
+      <div style={{ position: 'relative', minHeight: 480 }}>
+        <SidebarToggle onClick={() => setOpen(true)} />
+        <p style={{ color: '#6B7280', fontSize: 13 }}>
+          Контент страницы. Бургер виден только на мобилке (&lt; 768px) — нажми, drawer выедет слева.
+        </p>
+        <Sidebar
+          items={ITEMS}
+          activeId={active}
+          onChange={setActive}
+          brand="Портал заявок"
+          collapsed={false}
+          onToggleCollapsed={() => undefined}
+          mobileOpen={open}
+          onMobileClose={() => setOpen(false)}
+        />
+      </div>
+    );
+  },
+};

src/Sidebar/Sidebar.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import styles from './Sidebar.module.scss';
+import { Icon } from '../Icon/Icon';
+import { IconName } from '../Icon/iconNames';
+
+export interface ISidebarItem {
+  /** Уникальный идентификатор раздела (любая строка). */
+  id: string;
+  title: string;
+  icon: IconName;
+  /** Счётчик-бейдж справа (например, число заявок в очереди). 0/undefined — не показывать. */
+  count?: number;
+}
+
+export interface ISidebarProps {
+  items: ISidebarItem[];
+  activeId: string;
+  onChange: (id: string) => void;
+  /** Бренд в шапке рейла (текст или логотип). Показывается в развёрнутом виде. */
+  brand?: React.ReactNode;
+  /** Десктоп: свёрнут ли рейл в узкую полосу с иконками. */
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+  /**
+   * Мобильный drawer: открыт ли выезжающий сайдбар (< 768px). Управляется
+   * родителем — кнопкой-бургером в шапке приложения. На десктопе не влияет.
+   * На мобилке рекомендуется держать collapsed=false (drawer всегда полный).
+   */
+  mobileOpen?: boolean;
+  /** Закрыть мобильный drawer (клик по затемнению или выбор пункта). */
+  onMobileClose?: () => void;
+}
+
+/**
+ * Тёмный боковой рейл на всю высоту: бренд сверху, разделы снизу. Управляемый.
+ * Адаптивный:
+ *  • десктоп — рейл, сворачивается в иконки (collapsed);
+ *  • < 768px — выезжающий поверх контента drawer с затемнением фона
+ *    (mobileOpen / onMobileClose), бургер рисует родитель в шапке.
+ */
+export const Sidebar: React.FC<ISidebarProps> = ({
+  items,
+  activeId,
+  onChange,
+  brand,
+  collapsed,
+  onToggleCollapsed,
+  mobileOpen = false,
+  onMobileClose,
+}) => {
+  const navClasses = [
+    styles.nav,
+    collapsed ? styles.navCollapsed : '',
+    mobileOpen ? styles.navMobileOpen : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // На мобилке после выбора раздела drawer закрываем; на десктопе onMobileClose
+  // обычно не передан — вызов безвреден.
+  const handleSelect = (id: string): void => {
+    onChange(id);
+    if (onMobileClose) onMobileClose();
+  };
+
+  return (
+    <>
+      {mobileOpen && <div className={styles.backdrop} onClick={onMobileClose} aria-hidden="true" />}
+
+      <nav className={navClasses} aria-label="Разделы">
+        <div className={styles.head}>
+          <div className={styles.brand}>
+            {!collapsed && brand && <span className={styles.brandText}>{brand}</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 showCount = !!item.count;
+
+            return (
+              <button
+                key={item.id}
+                type="button"
+                className={itemClasses}
+                aria-current={isActive ? 'page' : undefined}
+                onClick={() => handleSelect(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}>{item.count}</span>}
+              </button>
+            );
+          })}
+        </div>
+      </nav>
+    </>
+  );
+};

src/Sidebar/SidebarToggle.module.scss

@@ -0,0 +1,29 @@
+@import '../tokens/tokens';
+
+// Кнопка-бургер для мобильного drawer. По умолчанию СКРЫТА — на десктопе сайдбар
+// виден рейлом, бургер не нужен. Показывается только на мобилке (< 768px).
+.toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid $gray-300;
+  border-radius: $r-sm;
+  background: $white;
+  color: $navy-800;
+  cursor: pointer;
+  transition: border-color .16s, color .16s;
+
+  &:hover {
+    border-color: $gold-500;
+    color: $navy-900;
+  }
+}
+
+@include below($bp-md) {
+  .toggle {
+    display: inline-flex;
+  }
+}

src/Sidebar/SidebarToggle.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import styles from './SidebarToggle.module.scss';
+import { Icon } from '../Icon/Icon';
+
+export interface ISidebarToggleProps {
+  onClick: () => void;
+  /** Доп. класс — если нужно переопределить позиционирование в шапке. */
+  className?: string;
+}
+
+/**
+ * Кнопка-бургер, открывающая мобильный drawer у Sidebar. По умолчанию видна
+ * ТОЛЬКО на мобилке (< 768px) — на десктопе сайдбар-рейл виден и так. Ставится
+ * в шапку приложения; по клику родитель ставит у Sidebar mobileOpen=true.
+ */
+export const SidebarToggle: React.FC<ISidebarToggleProps> = ({ onClick, className }) => {
+  const classes = [styles.toggle, className].filter(Boolean).join(' ');
+  return (
+    <button type="button" className={classes} onClick={onClick} aria-label="Открыть меню">
+      <Icon name="menu" size="md" />
+    </button>
+  );
+};

src/TextArea/TextArea.module.scss

@@ -1,6 +1,8 @@
 @import '../tokens/tokens';
 
 .textarea {
+  width: 100%;
+  box-sizing: border-box;
   padding: 11px 13px;
   border: 1px solid $gray-300;
   border-radius: $r-sm;

src/TextArea/TextArea.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Поля/TextArea',
+  component: TextArea,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {
+  render: () => {
+    const [v, setV] = useState('');
+    return <TextArea value={v} onChange={setV} placeholder="Многострочный текст…" rows={4} />;
+  },
+};

src/TextInput/TextInput.module.scss

@@ -1,6 +1,8 @@
 @import '../tokens/tokens';
 
 .input {
+  width: 100%;
+  box-sizing: border-box;
   padding: 11px 13px;
   border: 1px solid $gray-300;
   border-radius: $r-sm;

src/TextInput/TextInput.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { TextInput } from './TextInput';
+
+const meta: Meta<typeof TextInput> = {
+  title: 'Поля/TextInput',
+  component: TextInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextInput>;
+
+export const Default: Story = {
+  render: () => {
+    const [v, setV] = useState('');
+    return <TextInput value={v} onChange={setV} placeholder="Введите текст" />;
+  },
+};
+
+export const ReadOnly: Story = {
+  render: () => <TextInput value="Значение только для чтения" onChange={() => undefined} readOnly />,
+};
+
+export const DateField: Story = {
+  render: () => {
+    const [v, setV] = useState('2026-08-13');
+    return <TextInput type="date" value={v} onChange={setV} />;
+  },
+};

src/Toggle/Toggle.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Toggle } from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Поля/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Toggle> = {
+  render: () => {
+    const [c, setC] = useState(false);
+    return <Toggle checked={c} onChange={setC} onLabel={c ? 'Да' : 'Нет'} />;
+  },
+};

src/index.ts

@@ -45,5 +45,11 @@ export { ConfirmHost } from './ConfirmDialog/ConfirmDialog';
 export { confirmModal } from './ConfirmDialog/confirmModal';
 export type { IConfirmOptions } from './ConfirmDialog/confirmModal';
 
+// --- Навигация ---
+export { Sidebar } from './Sidebar/Sidebar';
+export type { ISidebarItem, ISidebarProps } from './Sidebar/Sidebar';
+export { SidebarToggle } from './Sidebar/SidebarToggle';
+export type { ISidebarToggleProps } from './Sidebar/SidebarToggle';
+
 // --- Хук анимации перестановки строк таблицы (FLIP) ---
 export { useFlipRows } from './useFlipRows';

src/tokens/_tokens.scss

@@ -144,3 +144,24 @@ $sp-7: 28px; $sp-8: 32px;
   background: $grad-hairline;
   border: 0;
 }
+
+// ---- Брейкпоинты (адаптивность) ----
+// Единые точки перелома для ВСЕХ компонентов ui-kit. Используй миксин below():
+//   @include below($bp-md) { ... правила для экранов уже 768px ... }
+$bp-xs: 350px;   // очень маленькая мобилка (страховочный минимум)
+$bp-sm: 640px;   // крупный телефон
+$bp-md: 768px;   // планшет / граница «мобилка ↔ десктоп»
+$bp-lg: 1024px;  // небольшой ноутбук
+$bp-xl: 1280px;  // широкий монитор
+
+@mixin below($bp) {
+  @media (max-width: $bp) {
+    @content;
+  }
+}
+
+@mixin above($bp) {
+  @media (min-width: ($bp + 1)) {
+    @content;
+  }
+}