src/features/Header/Header.tsx - main - misha_dev/game_guild_frontend

src/features/Header/Header.tsx
158 строк4 KB
misha-dev
fix: styling
28 апр 2025, 19:43
28 апр 2025, 19:434ecd0d2
import { useAppDispatch, useAppSelector } from '@/store';
import { logoutThunk } from '@/store/auth/thunks/logout-thunk';
import {
  MenuOutlined,
  ShoppingCartOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Avatar, Badge, Drawer, Dropdown, MenuProps } from 'antd';
import classNames from 'classnames';
import { useMemo, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router';

import { useGetCart } from '@/shared/hooks/cart/useGetCart';
import styles from './styles.module.scss';

export const Header = () => {
  const location = useLocation();
  const dispatch = useAppDispatch();
  const user = useAppSelector((state) => state.auth.user);
  const [isDrawerOpen, setDrawerOpen] = useState(false);

  const navigate = useNavigate();

  const { data: cartResponse } = useGetCart();

  const handleClickLogout = () => {
    dispatch(logoutThunk());
    navigate('/login');
  };

  const items: MenuProps['items'] = useMemo(
    () =>
      [
        {
          label: <Link to="/orders">Мои заказы</Link>,
          key: 'user-orders',
        },
        {
          label: <Link to="/admin/products">Управление</Link>,
          key: 'admin',
        },
        { type: 'divider' },
        {
          label: (
            <div style={{ color: 'red' }} onClick={handleClickLogout}>
              Выйти
            </div>
          ),
          key: 'logout',
        },
      ].filter(
        (item) => item.key !== 'admin' || user?.role === 'admin'
      ) as MenuProps['items'],
    [user]
  );

  const renderMenuLinks = () => (
    <>
      <Link
        to="/"
        className={classNames(styles.menuItem, {
          [styles.active]: location.pathname === '/',
        })}
        onClick={() => setDrawerOpen(false)}
      >
        Главная
      </Link>
      <Link
        to="/about"
        className={classNames(styles.menuItem, {
          [styles.active]: location.pathname === '/about',
        })}
        onClick={() => setDrawerOpen(false)}
      >
        О нас
      </Link>
      <Link
        to="/contacts"
        className={classNames(styles.menuItem, {
          [styles.active]: location.pathname === '/contacts',
        })}
        onClick={() => setDrawerOpen(false)}
      >
        Контакты
      </Link>
    </>
  );

  return (
    <header className={styles.wrapper}>
      <div className={styles.content}>
        <div className={styles.mainPart}>
          <Link to="/" className={styles.logoWrapper}>
            <img
              src="/src/assets/logo.png"
              className={styles.logo}
              alt="logo"
            />
            <h2 className={styles.title}>Игровая гильдия</h2>
          </Link>

          <div className={styles.menu}>{renderMenuLinks()}</div>

          <MenuOutlined
            className={styles.burgerIcon}
            onClick={() => setDrawerOpen(true)}
          />
        </div>

        {user ? (
          <div className={styles.userActions}>
            <Badge count={cartResponse?.totalQuantity}>
              <Link to="/cart">
                <ShoppingCartOutlined className={styles.cart} />
              </Link>
            </Badge>
            <Dropdown
              menu={{ items }}
              trigger={['click']}
              placement="bottomRight"
            >
              <Avatar
                size={35}
                icon={<UserOutlined />}
                className={styles.avatar}
              />
            </Dropdown>
          </div>
        ) : (
          <Avatar
            size={35}
            icon={<UserOutlined />}
            className={styles.avatar}
            onClick={() => navigate('/login')}
          />
        )}
      </div>

      <Drawer
        placement="left"
        open={isDrawerOpen}
        onClose={() => setDrawerOpen(false)}
        title={
          <div className={styles.drawerHeader}>
            <img
              src="/src/assets/logo.png"
              className={styles.drawerLogo}
              alt="logo"
            />
            <h2 className={styles.drawerTitle}>Игровая гильдия</h2>
          </div>
        }
      >
        <div className={styles.drawerMenu}>{renderMenuLinks()}</div>
      </Drawer>
    </header>
  );
};