category learning

src/shared/SideBar.tsx

@@ -14,6 +14,7 @@ import ReceiptSubMenu from './components/ReceiptSubMenu'
 import CustomerSubMenu from './components/CustomerSubMenu'
 import TicketSubMenu from './components/TicketSubMenu'
 import UsersSubMenu from './components/UsersSubMenu'
+import LearningSubMenu from './components/LearningSubMenu'
 
 const SideBar: FC = () => {
 
@@ -213,7 +214,7 @@ const SideBar: FC = () => {
                             icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.learning')}
                             isActive={isActive('learning')}
-                            link={Pages.learning}
+                            link={Pages.learning.list}
                         />
                     </div>
 
@@ -272,7 +273,9 @@ const SideBar: FC = () => {
                                         <TicketSubMenu />
                                         : subMenuName === 'users' ?
                                             <UsersSubMenu />
-                                            : null
+                                            : subMenuName === 'learning' ?
+                                                <LearningSubMenu />
+                                                : null
                     }
                 </div>
             }

src/shared/components/LearningSubMenu.tsx

@@ -0,0 +1,52 @@
+import { Teacher } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import SubMenuItem from './SubMenuItem'
+import { useLocation } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const LearningSubMenu: FC = () => {
+
+    const { t } = useTranslation('global')
+    const location = useLocation()
+
+    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'>
+                <Teacher
+                    size={24}
+                    color='#000'
+                    variant='Bold'
+                />
+                <div className='text-xs'>
+                    {t('sidebar.learning')}
+                </div>
+            </div>
+
+            <div className='flex flex-col mt-10 gap-4'>
+                <SubMenuItem
+                    title={t('learning.learnings')}
+                    isActive={isActive('list')}
+                    link={Pages.learning.list}
+                />
+                <SubMenuItem
+                    title={t('learning.new_learning')}
+                    isActive={isActive('create')}
+                    link={Pages.learning.create}
+                />
+                <SubMenuItem
+                    title={t('learning.category_learning')}
+                    isActive={isActive('category')}
+                    link={Pages.learning.category}
+                />
+            </div>
+
+        </div>
+    )
+}
+
+export default LearningSubMenu