117 lines
4.0 KiB
TypeScript
117 lines
4.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { FaAngleDown, FaAngleRight } from 'react-icons/fa';
|
|
import { GiHamburgerMenu } from 'react-icons/gi';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { RoutesLinks } from '../../Routes';
|
|
import { useTranslation } from 'react-i18next';
|
|
import KarimLogo from './KarimLogo';
|
|
import { useWindowSize } from '../../Hooks/useWindowSize';
|
|
import Etaxi from './Etaxi';
|
|
import { usePageState } from '../../lib/state mangment/LayoutPagestate';
|
|
|
|
interface SidebarProps {}
|
|
|
|
const Sidebar: React.FC<SidebarProps> = () => {
|
|
const { pathname } = useLocation();
|
|
// const {isOpenAddModel ,isOpenEditModel} = usePageState(state => state)
|
|
// useEffect(() => {
|
|
// if(isOpenAddModel || isOpenEditModel){
|
|
// setIsOpenSide(true);
|
|
// document.getElementById('DashboardLayout_Body')?.classList.add('DashboardLayout_Body_Open');
|
|
// }
|
|
|
|
|
|
|
|
// }, [isOpenAddModel ,isOpenEditModel])
|
|
|
|
|
|
|
|
const [isOpenSide, setIsOpenSide] = useState<boolean>(false);
|
|
const [openDropdown, setOpenDropdown] = useState<number | null>(null);
|
|
const [t] = useTranslation();
|
|
const windowSize = useWindowSize()
|
|
|
|
const handleHamburgerMenu = () => {
|
|
setIsOpenSide(true);
|
|
document.getElementById('DashboardLayout_Body')?.classList.add('DashboardLayout_Body_Open');
|
|
};
|
|
|
|
const handleImg = () => {
|
|
setIsOpenSide(false);
|
|
document.getElementById('DashboardLayout_Body')?.classList.remove('DashboardLayout_Body_Open');
|
|
setOpenDropdown(null);
|
|
};
|
|
|
|
const handleDropdown = (index: number) => {
|
|
setOpenDropdown((prev) => (prev === index ? null : index));
|
|
};
|
|
|
|
return (
|
|
<div className={isOpenSide ? 'SideBar SideBar_Open' : 'SideBar noOpen'}>
|
|
<div className='SideBar_Top'>
|
|
<div onClick={handleImg}>
|
|
<img src="../Logo.png" width={isOpenSide ? 70 : 150} alt="" />
|
|
{/* <Etaxi/> */}
|
|
</div>
|
|
<div className='HamburgerMenu' onClick={handleHamburgerMenu}>
|
|
<GiHamburgerMenu />
|
|
</div>
|
|
</div>
|
|
<div className='RoutesLinks'>
|
|
{RoutesLinks?.map((item: any, index: number) => {
|
|
const isActive = pathname === item?.href;
|
|
const isDropdownOpen = openDropdown === index;
|
|
|
|
if (item?.hidden) {
|
|
return null;
|
|
}
|
|
|
|
if (item?.href ) {
|
|
return (
|
|
<Link
|
|
to={item?.href}
|
|
className={isActive ? 'SideBar_Link Active_SideBar_Link' : 'SideBar_Link'}
|
|
key={index}
|
|
>
|
|
{React.cloneElement(item.icon, { size: 30 })}
|
|
<div className='Link_Text'>{t(`${item?.name}`)}</div>
|
|
</Link>
|
|
);
|
|
} else {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<div
|
|
onClick={() => handleDropdown(index)}
|
|
className={
|
|
isDropdownOpen
|
|
? 'SideBar_Link DropDown DropDown_SideBar_Link Open'
|
|
: 'SideBar_Link DropDown'
|
|
}
|
|
>
|
|
{React.cloneElement(item.icon, { size: 30 })}
|
|
<div className='DropDown_Text'>{t(`${item?.name}`)}</div>
|
|
<div className='DropDown_Svg'>{isDropdownOpen ? <FaAngleDown /> : <FaAngleRight />}</div>
|
|
</div>
|
|
{isDropdownOpen &&
|
|
item?.children?.map((child: any, childIndex: number) => {
|
|
if (child?.href) {
|
|
return (
|
|
<Link to={child?.href} className={'SideBar_Link'} key={childIndex}>
|
|
{React.cloneElement(child.icon, { size: 30 })}
|
|
<div className='Link_Text'>{t(`${child?.name}`)}</div>
|
|
</Link>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|