Fulfillment-Frontend/src/components/Navbar/Navbar.tsx

import { Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme } from "@mantine/core";
import {
    IconArrowLeft,
    IconBarcode,
    IconBox,
    IconBuildingWarehouse,
    IconCash, IconChartDots,
    IconDashboard,
    IconFileBarcode,
    IconHome2,
    IconLogout,
    IconMan,
    IconMoon,
    IconShoppingCart,
    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";
import { setHideNavbar } from "../../features/uiSlice.ts";

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: IconCash,
        label: "Сделки",
        href: "/leads",
    },
    // {
    //     icon: IconTable,
    //     label: 'Таблица сделок',
    //     href: '/deals'
    // },
    {
        icon: IconMan,
        label: "Клиенты",
        href: "/clients",
    },
    {
        icon: IconBox,
        label: "Услуги",
        href: "/services",
    },
    {
        icon: IconBarcode,
        label: "Товары",
        href: "/products",
    },
    {
        icon: IconFileBarcode,
        label: "Штрихкоды",
        href: "/barcode",
    },
    {
        icon: IconBuildingWarehouse,
        label: "Склады отгрузки",
        href: "/shipping_warehouses",
    },
    {
        icon: IconShoppingCart,
        label: "Маркетплейсы",
        href: "/marketplaces",
    },
    {
        icon: IconChartDots,
        label: "Статистика",
        href: "/statistics",
    }
];

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"}
                align={"center"}
                gap={rem(30)}>

                <Center p={rem(5)}>
                    <Image
                        flex={1}
                        // 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="Выйти"
                />
                <NavbarLink
                    icon={IconArrowLeft}
                    href={"#"}
                    index={-1}
                    label={"Свернуть"}
                    onClick={() => {
                        dispatch(setHideNavbar(true));
                    }}
                />
            </Stack>
        </nav>
    );
}