formik and yup in request design
This commit is contained in:
hamid zarghami
+144
-109
@@ -1,124 +1,159 @@
|
||||
import { type FC, useEffect } from 'react'
|
||||
import LogoImage from '../assets/images/logo.svg'
|
||||
import LogoSmall from '../assets/images/logo-small.svg'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
DocumentText,
|
||||
Home2,
|
||||
Logout,
|
||||
} from 'iconsax-react'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { useSharedStore } from './store/sharedStore'
|
||||
import { clx } from '../helpers/utils'
|
||||
import { Paths } from '../config/Paths'
|
||||
import BuyCatalog from './components/BuyCatalog'
|
||||
|
||||
import { Brush2, DocumentText, Home2, Logout } from "iconsax-react";
|
||||
import { type FC, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import LogoSmall from "../assets/images/logo-small.svg";
|
||||
import LogoImage from "../assets/images/logo.svg";
|
||||
import { Paths } from "../config/Paths";
|
||||
import { clx } from "../helpers/utils";
|
||||
import BuyCatalog from "./components/BuyCatalog";
|
||||
import SideBarItem from "./SideBarItem";
|
||||
import { useSharedStore } from "./store/sharedStore";
|
||||
|
||||
const SideBar: FC = () => {
|
||||
const { t } = useTranslation("global");
|
||||
const {
|
||||
openSidebar,
|
||||
setOpenSidebar,
|
||||
hasSubMenu,
|
||||
setSubMenuName,
|
||||
setSubtMenu,
|
||||
subMenuName,
|
||||
} = useSharedStore();
|
||||
const location = useLocation();
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
||||
const location = useLocation()
|
||||
const isActive = (path: string) => {
|
||||
const pathname = location.pathname;
|
||||
if (path === "/") return pathname === "/";
|
||||
return pathname === path || pathname.startsWith(path + "/");
|
||||
};
|
||||
|
||||
const isActive = (path: string) => {
|
||||
const pathname = location.pathname
|
||||
if (path === '/') return pathname === '/'
|
||||
return pathname === path || pathname.startsWith(path + '/')
|
||||
useEffect(() => {
|
||||
const split = location.pathname.split("/");
|
||||
|
||||
if (split[1] === "dashboard" || split[1] === "products") {
|
||||
setSubMenuName(split[1]);
|
||||
setSubtMenu(true);
|
||||
} else {
|
||||
setSubMenuName("");
|
||||
setSubtMenu(false);
|
||||
}
|
||||
}, [location.pathname, setSubMenuName, setSubtMenu]);
|
||||
|
||||
useEffect(() => {
|
||||
const split = location.pathname.split('/')
|
||||
const iconSizeSideBar = 20;
|
||||
|
||||
if (split[1] === 'dashboard' || split[1] === 'products') {
|
||||
setSubMenuName(split[1])
|
||||
setSubtMenu(true)
|
||||
} else {
|
||||
setSubMenuName('')
|
||||
setSubtMenu(false)
|
||||
}
|
||||
}, [location.pathname, setSubMenuName, setSubtMenu])
|
||||
return (
|
||||
<>
|
||||
{openSidebar && (
|
||||
<div
|
||||
className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10"
|
||||
onClick={() => setOpenSidebar(false)}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={clx(
|
||||
"fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12",
|
||||
openSidebar && "opacity-100 visible translate-x-0 block z-40",
|
||||
hasSubMenu && "w-24 rounded-tl-none! rounded-bl-none!",
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
{!hasSubMenu ? (
|
||||
<img src={LogoImage} className="w-[140px]" />
|
||||
) : (
|
||||
<img src={LogoSmall} className="w-7" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
const iconSizeSideBar = 20
|
||||
<div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
|
||||
<div
|
||||
className={clx(
|
||||
"mt-10 px-12 text-header text-sm font-normal",
|
||||
hasSubMenu && "px-2 text-center",
|
||||
)}
|
||||
>
|
||||
{t("sidebar.menu")}
|
||||
</div>
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
|
||||
}
|
||||
<div
|
||||
className={clx(
|
||||
'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
|
||||
openSidebar && 'opacity-100 visible translate-x-0 block z-40',
|
||||
hasSubMenu && 'w-24 rounded-tl-none! rounded-bl-none!'
|
||||
)}
|
||||
>
|
||||
<div className='flex justify-center'>
|
||||
{
|
||||
!hasSubMenu ?
|
||||
<img src={LogoImage} className='w-[140px]' />
|
||||
:
|
||||
<img src={LogoSmall} className='w-7' />
|
||||
}
|
||||
</div>
|
||||
<div className="text-xs text-[#8C90A3]">
|
||||
<SideBarItem
|
||||
icon={
|
||||
<Home2
|
||||
variant={isActive(Paths.home) ? "Bold" : "Outline"}
|
||||
color={isActive(Paths.home) ? "black" : "#8C90A3"}
|
||||
size={iconSizeSideBar}
|
||||
/>
|
||||
}
|
||||
title={t("sidebar.home_page")}
|
||||
isActive={isActive(Paths.home)}
|
||||
link={Paths.home}
|
||||
activeName={Paths.home}
|
||||
/>
|
||||
|
||||
<div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
|
||||
<SideBarItem
|
||||
icon={
|
||||
<DocumentText
|
||||
variant={isActive(Paths.catalog.list) ? "Bold" : "Outline"}
|
||||
color={isActive(Paths.catalog.list) ? "black" : "#8C90A3"}
|
||||
size={iconSizeSideBar}
|
||||
/>
|
||||
}
|
||||
title={t("sidebar.catalog")}
|
||||
isActive={isActive(Paths.catalog.list)}
|
||||
link={Paths.catalog.list}
|
||||
activeName={Paths.catalog.list}
|
||||
/>
|
||||
|
||||
<div className={clx(
|
||||
'mt-10 px-12 text-header text-sm font-normal',
|
||||
hasSubMenu && 'px-2 text-center'
|
||||
)}>
|
||||
{t('sidebar.menu')}
|
||||
</div>
|
||||
<SideBarItem
|
||||
icon={
|
||||
<Brush2
|
||||
variant={
|
||||
isActive(Paths.designer.request) ? "Bold" : "Outline"
|
||||
}
|
||||
color={isActive(Paths.designer.request) ? "black" : "#8C90A3"}
|
||||
size={iconSizeSideBar}
|
||||
/>
|
||||
}
|
||||
title={t("sidebar.request_design")}
|
||||
isActive={isActive(Paths.designer.request)}
|
||||
link={Paths.designer.request}
|
||||
activeName={Paths.designer.request}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Home2 variant={isActive(Paths.home) ? 'Bold' : 'Outline'} color={isActive(Paths.home) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.home_page')}
|
||||
isActive={isActive(Paths.home)}
|
||||
link={Paths.home}
|
||||
activeName={Paths.home}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<DocumentText variant={isActive(Paths.catalog.list) ? 'Bold' : 'Outline'} color={isActive(Paths.catalog.list) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.catalog')}
|
||||
isActive={isActive(Paths.catalog.list)}
|
||||
link={Paths.catalog.list}
|
||||
activeName={Paths.catalog.list}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 flex flex-col justify-end mt-14'>
|
||||
<BuyCatalog />
|
||||
<div className='text-xs text-[#8C90A3] mt-5'>
|
||||
<SideBarItem
|
||||
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title="خروج"
|
||||
isActive={isActive('logout')}
|
||||
link={`#`}
|
||||
isLogout
|
||||
activeName=''
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-end mt-14">
|
||||
<BuyCatalog />
|
||||
<div className="text-xs text-[#8C90A3] mt-5">
|
||||
<SideBarItem
|
||||
icon={
|
||||
<Logout
|
||||
variant={isActive("logout") ? "Bold" : "Outline"}
|
||||
color={isActive("logout") ? "black" : "#8C90A3"}
|
||||
size={iconSizeSideBar}
|
||||
/>
|
||||
}
|
||||
title="خروج"
|
||||
isActive={isActive("logout")}
|
||||
link={`#`}
|
||||
isLogout
|
||||
activeName=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* منوی فرعی */}
|
||||
{
|
||||
hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
|
||||
<div className='fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border'>
|
||||
{
|
||||
subMenuName === 'dashboard' ? null
|
||||
// <DashboardSubMenu />
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
{/* منوی فرعی */}
|
||||
{hasSubMenu && (openSidebar || window.innerWidth > 1139) && (
|
||||
<div className="fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border">
|
||||
{subMenuName === "dashboard"
|
||||
? null
|
||||
: // <DashboardSubMenu />
|
||||
null}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default SideBar
|
||||
export default SideBar;
|
||||
|
||||
Reference in New Issue
Block a user