sidebar

src/config/SideBarSubMenu.ts

@@ -0,0 +1,7 @@
+export const SideBarItemHasSubMenu = [
+  "services",
+  "customers",
+  "receipt",
+  "users",
+  "transactions",
+];

src/langs/fa.json

@@ -68,6 +68,9 @@
     "setting": "تنظیمات",
     "logout": "خروج"
   },
+  "submenu": {
+    "services_list": "لیست سرویس ها"
+  },
   "header": {
     "search": "جستجو"
   },

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 (
         <div className='p-4 overflow-hidden'>
             <SideBar />
             <Header />
-            <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
+            <div className={clx(
-                <div className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
+                'flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]',
+                hasSubMenu && 'xl:ms-[305px]',
+            )}>
+                <div className={clx(
+                    `overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`,
+                )}>
                     <div>
                         <Routes>
                             <Route path={Pages.dashboard} element={<Home />} />

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 (
-        <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
+        <div className={clx(
+            'fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]',
+            hasSubMenu && 'xl:right-[320px] xl:w-[calc(100%-345px)] left-4',
+        )}>
 
             <div className='min-w-[270px] hidden xl:block'>
                 <Input

src/shared/SideBar.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react'
+import { 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 { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Home2, Logout, Messages3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
@@ -7,19 +8,44 @@ import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
 import { useSharedStore } from './store/sharedStore'
 import { clx } from '../helpers/utils'
+import ServicesSubMenu from './components/ServicesSubMenu'
+import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
+import TransactionsSubMenu from './components/TransactionsSubMenu'
 
 const SideBar: FC = () => {
 
     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 = () => {
             <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-[0px] block z-40'
+                    openSidebar && 'opacity-100 visible -translate-x-[0px] 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='flex-1 h-full overflow-y-auto no-scrollbar'>
-                    <div className='mt-10 px-12 text-header text-sm font-normal'>
+                    <div className={clx(
+                        'mt-10 px-12 text-header text-sm font-normal',
+                        hasSubMenu && 'px-2 text-center'
+                    )}>
                         {t('sidebar.menu')}
                     </div>
 
@@ -52,6 +87,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.services')}
                             isActive={isActive('services')}
                             link={Pages.services.mine}
+                            name='services'
                         />
                         <SideBarItem
                             icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
@@ -105,7 +141,10 @@ const SideBar: FC = () => {
                         />
                     </div>
 
-                    <div className='mt-10 px-12 text-header text-sm font-normal'>
+                    <div className={clx(
+                        'mt-10 px-12 text-header text-sm font-normal',
+                        hasSubMenu && 'px-2 text-center'
+                    )}>
                         {t('sidebar.other')}
                     </div>
 
@@ -129,7 +168,10 @@ const SideBar: FC = () => {
                     </div>
 
 
-                    <div className='mt-10 px-12 text-header text-sm font-normal'>
+                    <div className={clx(
+                        'mt-10 px-12 text-header text-sm font-normal',
+                        hasSubMenu && 'px-2 text-center text-xs'
+                    )}>
                         {t('sidebar.mnage_content')}
                     </div>
 
@@ -200,6 +242,20 @@ const SideBar: FC = () => {
                     </div>
                 </div>
             </div>
+
+            {
+                hasSubMenu && (openSidebar || window.innerWidth > 1000) &&
+                <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'>
+                    {
+                        subMenuName === 'services' ?
+                            <ServicesSubMenu />
+                            :
+                            subMenuName === 'transactions' ?
+                                <TransactionsSubMenu />
+                                : null
+                    }
+                </div>
+            }
         </>
     )
 }

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: 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 (
-        <Link onClick={props.isLogout ? handleLogout : undefined} to={props.link} className='flex text-xs gap-9 mt-4'>
+        <Link onClick={props.isLogout ? handleLogout : handleClick} to={props.link} className={clx(
+            'flex text-xs gap-9 mt-4',
+            hasSubMenu && 'flex-col',
+        )}>
             <div className={clx(
                 'w-1 bg-black h-6',
-                !props.isActive && 'invisible'
+                !props.isActive && 'invisible',
+                hasSubMenu && 'hidden',
             )}></div>
-            <div className='flex gap-3 items-center'>
+            <div className={clx(
+                'flex gap-3 items-center',
+                hasSubMenu && 'flex-col text-[10px]',
+            )}>
                 {props.icon}
                 <div className={props.isActive ? 'text-black' : ''}>
                     {props.title}

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 (
+        <div className='py-12'>
+            <div className='flex gap-3 items-center border-b pb-10 px-6'>
+                <Element3
+                    size={24}
+                    color='#000'
+                    variant='Bold'
+                />
+                <div className='text-xs'>
+                    {t('sidebar.services')}
+                </div>
+            </div>
+
+            <div className='flex flex-col mt-10 gap-4'>
+                <SubMenuItem
+                    title={t('submenu.services_list')}
+                    isActive={isActive('services')}
+                    link='/services'
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ServicesSubMenu

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: Props) => {
+    return (
+        <Link to={props.link} className={clx(
+            'flex text-xs gap-6 mt-4',
+        )}>
+            <div className={clx(
+                'w-1 bg-black h-6',
+                !props.isActive && 'invisible',
+            )}></div>
+            <div className={clx(
+                'flex gap-3 items-center',
+            )}>
+                <div className={props.isActive ? 'text-black' : 'text-description'}>
+                    {props.title}
+                </div>
+            </div>
+
+        </Link>
+    )
+}
+
+export default SubMenuItem

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 (
+        <div className='py-12'>
+            <div className='flex gap-3 items-center border-b pb-10 px-6'>
+                <Card
+                    size={24}
+                    color='#000'
+                    variant='Bold'
+                />
+                <div className='text-xs'>
+                    {t('sidebar.transactions')}
+                </div>
+            </div>
+
+            <div className='flex flex-col mt-10 gap-4'>
+                <SubMenuItem
+                    title={t('sidebar.services')}
+                    isActive={isActive('services')}
+                    link='/services'
+                />
+            </div>
+        </div>
+    )
+}
+
+export default TransactionsSubMenu

src/shared/store/sharedStore.ts

@@ -4,4 +4,8 @@ import { SharedStoreType } from "../types/SharedTypes";
 export const useSharedStore = create<SharedStoreType>((set) => ({
   openSidebar: false,
   setOpenSidebar: (value) => set({ openSidebar: value }),
+  hasSubMenu: false,
+  setSubtMenu: (value: boolean) => set({ hasSubMenu: value }),
+  subMenuName: "",
+  setSubMenuName: (value: string) => set({ subMenuName: value }),
 }));

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;
 };