sidebar

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'>
-                    <img src={LogoImage} className='w-[140px]' />
+                    {
+                        !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>
+            }
         </>
     )
 }