feat: Sidebar + SidebarToggle, адаптивность компонентов (0.2.0)
This commit is contained in:
Тимур Городецкий
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 }}>
|
||||
Контент страницы. Бургер виден только на мобилке (< 768px) — нажми, drawer выедет слева.
|
||||
</p>
|
||||
<Sidebar
|
||||
items={ITEMS}
|
||||
activeId={active}
|
||||
onChange={setActive}
|
||||
brand="Портал заявок"
|
||||
collapsed={false}
|
||||
onToggleCollapsed={() => undefined}
|
||||
mobileOpen={open}
|
||||
onMobileClose={() => setOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user