102 lines
3.7 KiB
JavaScript
102 lines
3.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Layout, Drawer, Button } from 'antd';
|
|
import { Link } from 'react-router-dom';
|
|
import {
|
|
MenuFoldOutlined,
|
|
MenuUnfoldOutlined,
|
|
} from '@ant-design/icons';
|
|
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
|
|
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
|
|
import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
|
|
import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
|
|
import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
|
|
import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';
|
|
|
|
|
|
const { Sider } = Layout;
|
|
|
|
const EmployeeSidebar = () => {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
const showDrawer = () => {
|
|
setVisible(true);
|
|
};
|
|
|
|
const closeDrawer = () => {
|
|
setVisible(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
className="menu-button"
|
|
type="primary"
|
|
onClick={showDrawer}
|
|
icon={visible ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
/>
|
|
<Drawer
|
|
title="Menu"
|
|
placement="left"
|
|
onClose={closeDrawer}
|
|
visible={visible}
|
|
bodyStyle={{ padding: 0 }}
|
|
width={200}
|
|
>
|
|
<div className="drawer-menu">
|
|
<Link to="/employee-dashboard" className="drawer-link">
|
|
<img src={HomeIcon} alt="Home" className="drawer-icon" />
|
|
</Link>
|
|
<Link to="/employee/categories" className="drawer-link">
|
|
<img src={CategoriesIcon} alt="Categories" className="drawer-icon" />
|
|
</Link>
|
|
<Link to="/employee/manage-customers" className="drawer-link">
|
|
<img src={AddCustomerIcon} alt="Add Customer" className="drawer-icon" />
|
|
</Link>
|
|
<Link to="/employee/orders" className="drawer-link">
|
|
<img src={OrdersIcon} alt="Orders" className="drawer-icon" />
|
|
</Link>
|
|
<Link to="/employee/profile" className="drawer-link">
|
|
<img src={ProfileIcon} alt="Profile" className="drawer-icon" />
|
|
</Link>
|
|
<Link to="/employee/logout" className="drawer-link">
|
|
<img src={LogoutIcon} alt="Logout" className="drawer-icon" />
|
|
</Link>
|
|
</div>
|
|
</Drawer>
|
|
<Sider
|
|
className="desktop-sidebar"
|
|
breakpoint="lg"
|
|
collapsedWidth="0"
|
|
width={200}
|
|
style={{ height: '100vh' }}
|
|
>
|
|
<div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
|
|
<div className="text-black">t.</div>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<Link to="/employee-dashboard" className="my-6">
|
|
<img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
|
|
</Link>
|
|
<Link to="/employee/categories" className="my-6">
|
|
<img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
|
|
</Link>
|
|
<Link to="/employee/manage-customers" className="my-6">
|
|
<img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
|
|
</Link>
|
|
<Link to="/employee/orders" className="my-6">
|
|
<img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
|
|
</Link>
|
|
<Link to="/employee/profile" className="my-6">
|
|
<img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
|
|
</Link>
|
|
<Link to="/employee/logout" className="my-6">
|
|
<img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
|
|
</Link>
|
|
</div>
|
|
</Sider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EmployeeSidebar;
|