diff --git a/src/config/SideBarSubMenu.ts b/src/config/SideBarSubMenu.ts new file mode 100644 index 0000000..3084413 --- /dev/null +++ b/src/config/SideBarSubMenu.ts @@ -0,0 +1,7 @@ +export const SideBarItemHasSubMenu = [ + "services", + "customers", + "receipt", + "users", + "transactions", +]; diff --git a/src/langs/fa.json b/src/langs/fa.json index 3dcf200..dff8bfb 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -68,6 +68,9 @@ "setting": "تنظیمات", "logout": "خروج" }, + "submenu": { + "services_list": "لیست سرویس ها" + }, "header": { "search": "جستجو" }, diff --git a/src/router/Main.tsx b/src/router/Main.tsx index 2685135..e31375a 100644 --- a/src/router/Main.tsx +++ b/src/router/Main.tsx @@ -21,14 +21,24 @@ import OtherServices from '../pages/service/OtherServices' import Footer from '../shared/Footer' import AnnouncementDetail from '../pages/annoncement/Detail' import DetailService from '../pages/service/DetailService' +import { clx } from '../helpers/utils' +import { useSharedStore } from '../shared/store/sharedStore' const MainRouter: FC = () => { + + const { hasSubMenu } = useSharedStore() + return (
-
-
+
+
} /> diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx index e7e73fe..5617e7c 100644 --- a/src/shared/Header.tsx +++ b/src/shared/Header.tsx @@ -7,14 +7,18 @@ import { Link } from 'react-router-dom' import { Pages } from '../config/Pages' import Notifications from '../pages/notification/Notification' import { useSharedStore } from './store/sharedStore' +import { clx } from '../helpers/utils' const Header: FC = () => { const { t } = useTranslation('global') - const { setOpenSidebar, openSidebar } = useSharedStore() + const { setOpenSidebar, openSidebar, hasSubMenu } = useSharedStore() return ( -
+
{ const { t } = useTranslation('global') - const { openSidebar, setOpenSidebar } = useSharedStore() + const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore() const location = useLocation() const isActive = (name: string) => { return location.pathname.includes(name) } + useEffect(() => { + + const split = location.pathname.split('/') + console.log('split', split); + + + if (SideBarItemHasSubMenu.includes(split[1])) { + setSubMenuName(split[1]) + setSubtMenu(true) + } else { + setSubMenuName('') + setSubtMenu(false) + } + + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [location.pathname]) + + const iconSizeSideBar = 20 + console.log(openSidebar); + + return ( <> { @@ -28,15 +54,24 @@ const SideBar: FC = () => {
- + { + !hasSubMenu ? + + : + + }
-
+
{t('sidebar.menu')}
@@ -52,6 +87,7 @@ const SideBar: FC = () => { title={t('sidebar.services')} isActive={isActive('services')} link={Pages.services.mine} + name='services' /> } @@ -105,7 +141,10 @@ const SideBar: FC = () => { />
-
+
{t('sidebar.other')}
@@ -129,7 +168,10 @@ const SideBar: FC = () => {
-
+
{t('sidebar.mnage_content')}
@@ -200,6 +242,20 @@ const SideBar: FC = () => {
+ + { + hasSubMenu && (openSidebar || window.innerWidth > 1000) && +
+ { + subMenuName === 'services' ? + + : + subMenuName === 'transactions' ? + + : null + } +
+ } ) } diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx index 271c00e..fd22bce 100644 --- a/src/shared/SideBarItem.tsx +++ b/src/shared/SideBarItem.tsx @@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react' import { Link } from 'react-router-dom' import { clx } from '../helpers/utils' import { Pages } from '../config/Pages' +import { useSharedStore } from './store/sharedStore' type Props = { icon: ReactNode, @@ -9,22 +10,38 @@ type Props = { isActive: boolean, link: string, isLogout?: boolean, + name?: string } const SideBarItem: FC = (props: Props) => { + const { hasSubMenu, setSubMenuName, setSubtMenu } = useSharedStore() const handleLogout = () => { localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME) window.location.href = Pages.auth.login } + const handleClick = () => { + if (props.name) { + setSubMenuName(props.name) + setSubtMenu(true) + } + } + return ( - +
-
+
{props.icon}
{props.title} diff --git a/src/shared/components/ServicesSubMenu.tsx b/src/shared/components/ServicesSubMenu.tsx new file mode 100644 index 0000000..70a999c --- /dev/null +++ b/src/shared/components/ServicesSubMenu.tsx @@ -0,0 +1,41 @@ +import { Element3 } from 'iconsax-react' +import { FC } from 'react' +import { useTranslation } from 'react-i18next' +import SubMenuItem from './SubMenuItem' +import { useLocation } from 'react-router-dom' + +const ServicesSubMenu: FC = () => { + + const location = useLocation() + const { t } = useTranslation('global') + + + const isActive = (name: string) => { + return location.pathname.includes(name) + } + + return ( +
+
+ +
+ {t('sidebar.services')} +
+
+ +
+ +
+
+ ) +} + +export default ServicesSubMenu \ No newline at end of file diff --git a/src/shared/components/SubMenuItem.tsx b/src/shared/components/SubMenuItem.tsx new file mode 100644 index 0000000..3a81f45 --- /dev/null +++ b/src/shared/components/SubMenuItem.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react' +import { Link } from 'react-router-dom' +import { clx } from '../../helpers/utils' + +type Props = { + title: string, + isActive: boolean, + link: string, + isLogout?: boolean, +} + +const SubMenuItem: FC = (props: Props) => { + return ( + +
+
+
+ {props.title} +
+
+ + + ) +} + +export default SubMenuItem \ No newline at end of file diff --git a/src/shared/components/TransactionsSubMenu.tsx b/src/shared/components/TransactionsSubMenu.tsx new file mode 100644 index 0000000..20e3f23 --- /dev/null +++ b/src/shared/components/TransactionsSubMenu.tsx @@ -0,0 +1,38 @@ +import { Card } from 'iconsax-react' +import { FC } from 'react' +import { useTranslation } from 'react-i18next' +import SubMenuItem from './SubMenuItem' + +const TransactionsSubMenu: FC = () => { + + const { t } = useTranslation('global') + + const isActive = (name: string) => { + return location.pathname.includes(name) + } + + return ( +
+
+ +
+ {t('sidebar.transactions')} +
+
+ +
+ +
+
+ ) +} + +export default TransactionsSubMenu \ No newline at end of file diff --git a/src/shared/store/sharedStore.ts b/src/shared/store/sharedStore.ts index 731c65a..d5c810c 100644 --- a/src/shared/store/sharedStore.ts +++ b/src/shared/store/sharedStore.ts @@ -4,4 +4,8 @@ import { SharedStoreType } from "../types/SharedTypes"; export const useSharedStore = create((set) => ({ openSidebar: false, setOpenSidebar: (value) => set({ openSidebar: value }), + hasSubMenu: false, + setSubtMenu: (value: boolean) => set({ hasSubMenu: value }), + subMenuName: "", + setSubMenuName: (value: string) => set({ subMenuName: value }), })); diff --git a/src/shared/types/SharedTypes.ts b/src/shared/types/SharedTypes.ts index b681e51..1b7e445 100644 --- a/src/shared/types/SharedTypes.ts +++ b/src/shared/types/SharedTypes.ts @@ -1,4 +1,8 @@ export type SharedStoreType = { openSidebar: boolean; setOpenSidebar: (value: boolean) => void; + hasSubMenu: boolean; + setSubtMenu: (value: boolean) => void; + subMenuName: string; + setSubMenuName: (value: string) => void; };