148 lines
3.2 KiB
TypeScript
148 lines
3.2 KiB
TypeScript
'use client';
|
||
import React, { useState, useEffect } from 'react';
|
||
import { Layout, Menu, Button, Drawer } from 'antd';
|
||
import { MenuOutlined } from '@ant-design/icons';
|
||
import Link from 'next/link';
|
||
import styles from './Header.module.scss';
|
||
import { useRouter, usePathname } from 'next/navigation';
|
||
import { useAuth } from '@/fsd/app/provider/AuthContext';
|
||
|
||
const { Header } = Layout;
|
||
|
||
const AppHeader: React.FC = () => {
|
||
const router = useRouter();
|
||
const pathname = usePathname();
|
||
const { isAuthenticated, logout } = useAuth();
|
||
const [currentKey, setCurrentKey] = useState('');
|
||
const [drawerOpen, setDrawerOpen] = useState(false); // Заменяем visible на open
|
||
const [isMobile, setIsMobile] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (pathname === '/create') {
|
||
setCurrentKey('1');
|
||
} else if (pathname === '/view') {
|
||
setCurrentKey('2');
|
||
} else if (pathname === '/search') {
|
||
setCurrentKey('3');
|
||
} else {
|
||
setCurrentKey('');
|
||
}
|
||
}, [pathname]);
|
||
|
||
useEffect(() => {
|
||
const handleResize = () => {
|
||
setIsMobile(window.innerWidth <= 580);
|
||
};
|
||
|
||
handleResize();
|
||
window.addEventListener('resize', handleResize);
|
||
|
||
return () => window.removeEventListener('resize', handleResize);
|
||
}, []);
|
||
|
||
const handleLogout = () => {
|
||
logout();
|
||
router.push('/login');
|
||
};
|
||
|
||
const handleLogoClick = () => {
|
||
setCurrentKey('1');
|
||
router.push('/create');
|
||
};
|
||
|
||
const showDrawer = () => {
|
||
setDrawerOpen(true);
|
||
};
|
||
|
||
const closeDrawer = () => {
|
||
setDrawerOpen(false);
|
||
};
|
||
|
||
const menuItems = [
|
||
{
|
||
key: '1',
|
||
label: (
|
||
<Link href='/create' className={styles.list_item}>
|
||
Создание вакансии
|
||
</Link>
|
||
),
|
||
},
|
||
{
|
||
key: '2',
|
||
label: (
|
||
<Link href='/view' className={styles.list_item}>
|
||
Просмотр вакансий
|
||
</Link>
|
||
),
|
||
},
|
||
{
|
||
key: '3',
|
||
label: (
|
||
<Link href='/search' className={styles.list_item}>
|
||
Поиск резюме
|
||
</Link>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Header className={styles.header}>
|
||
<div className={styles.logo} onClick={handleLogoClick}>
|
||
MTUCI JOBS
|
||
</div>
|
||
|
||
{isAuthenticated && (
|
||
<>
|
||
{isMobile ? (
|
||
<>
|
||
<div className={styles.burgerIcon} onClick={showDrawer}>
|
||
<MenuOutlined />
|
||
</div>
|
||
<Drawer
|
||
title='Меню'
|
||
placement='right'
|
||
onClose={closeDrawer}
|
||
open={drawerOpen} // Используем "open" вместо "visible"
|
||
>
|
||
<Menu
|
||
mode='vertical'
|
||
selectedKeys={[currentKey]}
|
||
items={menuItems} // Передаем элементы меню сюда
|
||
onClick={closeDrawer}
|
||
className={styles.menuBurger}
|
||
/>
|
||
<Button
|
||
type='primary'
|
||
onClick={handleLogout}
|
||
className={styles.logoutButtonBurger}
|
||
>
|
||
Выйти
|
||
</Button>
|
||
</Drawer>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Menu
|
||
theme='dark'
|
||
mode='horizontal'
|
||
selectedKeys={[currentKey]}
|
||
items={menuItems}
|
||
className={styles.menu}
|
||
/>
|
||
<Button
|
||
type='primary'
|
||
onClick={handleLogout}
|
||
className={styles.logoutButton}
|
||
>
|
||
Выйти
|
||
</Button>
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
</Header>
|
||
);
|
||
};
|
||
|
||
export default AppHeader;
|