add receipt

src/shared/Header.tsx

@@ -14,7 +14,7 @@ const Header: FC = () => {
     const { setOpenSidebar, openSidebar } = 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='fixed z-10 right-4 left-4 xl:right-[317px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-335px)]'>
 
             <div className='min-w-[270px] hidden xl:block'>
                 <Input

src/shared/SideBar.tsx

@@ -11,6 +11,7 @@ import { clx } from '../helpers/utils'
 import ServicesSubMenu from './components/ServicesSubMenu'
 import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
 import TransactionsSubMenu from './components/TransactionsSubMenu'
+import ReceiptSubMenu from './components/ReceiptSubMenu'
 
 const SideBar: FC = () => {
 
@@ -43,8 +44,6 @@ const SideBar: FC = () => {
 
     const iconSizeSideBar = 20
 
-    console.log(openSidebar);
-
 
     return (
         <>
@@ -252,7 +251,9 @@ const SideBar: FC = () => {
                             :
                             subMenuName === 'transactions' ?
                                 <TransactionsSubMenu />
-                                : null
+                                : subMenuName === 'receipts' ?
+                                    <ReceiptSubMenu />
+                                    : null
                     }
                 </div>
             }

src/shared/components/ReceiptSubMenu.tsx

@@ -0,0 +1,46 @@
+import { Receipt21 } 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 ReceiptSubMenu: 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'>
+                <Receipt21
+                    size={24}
+                    color='#000'
+                    variant='Bold'
+                />
+                <div className='text-xs'>
+                    {t('receip.receips')}
+                </div>
+            </div>
+
+            <div className='flex flex-col mt-10 gap-4'>
+                <SubMenuItem
+                    title={t('receip.receip_list')}
+                    isActive={isActive('list')}
+                    link={Pages.receipts.index}
+                />
+                <SubMenuItem
+                    title={t('receip.add_receip')}
+                    isActive={isActive('create')}
+                    link={Pages.receipts.create}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ReceiptSubMenu

src/shared/components/SubMenuItem.tsx

@@ -12,14 +12,14 @@ type Props = {
 const SubMenuItem: FC<Props> = (props: Props) => {
     return (
         <Link to={props.link} className={clx(
-            'flex text-xs gap-6 mt-4',
+            'flex text-xs gap-6 mt-1',
         )}>
             <div className={clx(
                 'w-1 bg-black h-6',
                 !props.isActive && 'invisible',
             )}></div>
             <div className={clx(
-                'flex gap-3 items-center',
+                'flex gap-3 items-center mt-1',
             )}>
                 <div className={props.isActive ? 'text-black' : 'text-description'}>
                     {props.title}