129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
import {Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
|
|
import {
|
|
IconBarcode,
|
|
IconBox,
|
|
IconCash, IconDashboard,
|
|
IconFileBarcode,
|
|
IconHome2,
|
|
IconLogout,
|
|
IconMan,
|
|
IconMoon,
|
|
IconSun,
|
|
} from '@tabler/icons-react';
|
|
import classes from './Navbar.module.css';
|
|
import {useAppDispatch} from "../../redux/store.ts";
|
|
import {logout} from "../../features/authSlice.ts";
|
|
import {useNavigate, useRouterState} from "@tanstack/react-router";
|
|
|
|
interface NavbarLinkProps {
|
|
icon: typeof IconHome2;
|
|
label?: string;
|
|
active?: boolean;
|
|
href: string;
|
|
|
|
onClick?(navlink: NavbarLinkProps): void;
|
|
|
|
index: number;
|
|
}
|
|
|
|
function NavbarLink(props: NavbarLinkProps) {
|
|
const {icon: Icon, label, active, onClick} = props;
|
|
return (
|
|
<Tooltip display={!label ? "none" : "flex"} label={label} position="right" transitionProps={{duration: 0}}>
|
|
<UnstyledButton onClick={() => onClick && onClick(props)}
|
|
className={classes.link}
|
|
data-active={active || undefined}>
|
|
<Icon style={{width: rem(20), height: rem(20)}} stroke={1.5}/>
|
|
</UnstyledButton>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
const mockdata = [
|
|
// {
|
|
// icon: IconHome2,
|
|
// label: 'Главная',
|
|
// href: '/'
|
|
// },
|
|
{
|
|
icon: IconCash,
|
|
label: 'Сделки',
|
|
href: '/leads'
|
|
},
|
|
{
|
|
icon: IconMan,
|
|
label: 'Клиенты',
|
|
href: '/clients'
|
|
},
|
|
{
|
|
icon: IconBox,
|
|
label: 'Услуги',
|
|
href: '/services'
|
|
},
|
|
{
|
|
icon: IconBarcode,
|
|
label: 'Товары',
|
|
href: '/products'
|
|
},
|
|
{
|
|
icon: IconFileBarcode,
|
|
label: 'Штрихкоды',
|
|
href: '/barcode'
|
|
}
|
|
];
|
|
|
|
export function Navbar() {
|
|
const dispatch = useAppDispatch();
|
|
const navigate = useNavigate();
|
|
const router = useRouterState();
|
|
const {colorScheme, toggleColorScheme} = useMantineColorScheme({keepTransitions: true});
|
|
const onLogoutClick = () => {
|
|
dispatch(logout());
|
|
navigate({to: '/login'});
|
|
}
|
|
const onNavlinkClick = (props: NavbarLinkProps) => {
|
|
navigate({to: props.href});
|
|
}
|
|
const links = mockdata.map((link, index) => (
|
|
<NavbarLink
|
|
{...link}
|
|
index={index}
|
|
key={link.label}
|
|
active={router.location.pathname === link.href}
|
|
onClick={onNavlinkClick}
|
|
/>
|
|
));
|
|
|
|
return (
|
|
<nav className={classes.navbar}>
|
|
<Flex direction={"column"} gap={rem(30)}>
|
|
<Center
|
|
p={rem(5)}
|
|
>
|
|
<Image
|
|
// style={{filter: "drop-shadow(0 0 30px #fff)"}}
|
|
src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
|
|
/>
|
|
</Center>
|
|
|
|
<div className={classes.navbarMain}>
|
|
<Stack justify="center" gap={rem(10)}>
|
|
{links}
|
|
</Stack>
|
|
</div>
|
|
</Flex>
|
|
|
|
<Stack w={"100%"} justify="center" gap={0}>
|
|
<NavbarLink icon={IconDashboard}
|
|
href={"/admin"}
|
|
index={-1}
|
|
label={"Панель администратора"}
|
|
onClick={() => onNavlinkClick({href: "/admin", index: -1, icon: IconDashboard})}
|
|
/>
|
|
<NavbarLink label={"Сменить тему"} onClick={toggleColorScheme}
|
|
icon={colorScheme == "dark" ? IconSun : IconMoon} href={"#"} index={-1}/>
|
|
<NavbarLink index={-1} href={"#"} onClick={onLogoutClick} icon={IconLogout} label="Выйти"/>
|
|
</Stack>
|
|
</nav>
|
|
);
|
|
} |