Панель со списками заявок (#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>
This commit was merged in pull request #1.
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
// Тёмное боковое меню портала (фирменный navy-градиент, золотой маркер
|
||||
// активного пункта — как в остальном дизайне).
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
width: 240px;
|
||||
padding: $sp-3 0;
|
||||
background: $grad-header;
|
||||
border-radius: $r-lg;
|
||||
box-shadow: $sh-2;
|
||||
overflow: hidden;
|
||||
transition: width .2s;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
align-self: flex-end;
|
||||
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;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
cursor: pointer;
|
||||
transition: .16s;
|
||||
|
||||
&:hover {
|
||||
border-color: $gold-400;
|
||||
color: $gold-300;
|
||||
}
|
||||
}
|
||||
|
||||
.navCollapsed {
|
||||
width: 56px;
|
||||
|
||||
.toggle {
|
||||
align-self: center;
|
||||
margin: 0 0 $sp-2;
|
||||
}
|
||||
|
||||
.item {
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user