new order to sidebar

src/components/Button.tsx

@@ -14,7 +14,7 @@ type Props = {
 const Button: FC<Props> = memo((props: Props) => {
 
     const buttonClass = clx(
-        'flex rounded-xl items-center justify-center text-center h-10 text-sm  bg-primary text-white w-full',
+        'flex rounded-xl items-center justify-center text-center h-10 text-sm  bg-primary w-full',
         props.disabled && 'cursor-not-allowed opacity-60',
         props.className
     );

src/locale/fa.ts

@@ -10,9 +10,15 @@ export const fa = {
     announcement: "انتشارات",
     criticisms: "انتقادات",
     learning: "آموزش",
+    submitYourOrder: "سفارش خودرا ثبت کنید",
+    submitYourOrderDescription: "کارت ویزیت ، کاتالوگ ، بروشور و...",
+    newOrder: "سفارش جدید",
   },
   notif: {
     natification: "اعلان‌ها",
     all_read: "خواندن همه",
   },
+  header: {
+    search: "جستجو",
+  },
 };

src/shared/Sidebar.tsx

@@ -1,12 +1,13 @@
 import { type FC } from 'react'
 import LogoImage from '@/assets/images/logo.svg'
-import { DocumentText, Element3, Home2, Logout, Messages3, NotificationStatus, Receipt21, Teacher } from 'iconsax-react'
+import { AddSquare, DocumentText, Element3, Home2, Messages3, NotificationStatus, Receipt21, Teacher } from 'iconsax-react'
 import SideBarItem from './SidebarItem'
 import { useLocation } from 'react-router-dom'
 import { Paths } from '../config/Paths'
 import { useSharedStore } from './store/useSharedStore'
 import { clx } from '../helpers/utils'
 import { t } from '../locale'
+import Button from '@/components/Button'
 
 const SideBar: FC = () => {
 
@@ -26,12 +27,12 @@ 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',
+                    '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-[240px] bg-white flex-col py-12',
                     openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
                 )}
             >
                 <div className='px-6'>
-                    <div className='flex border-b-2 border-border pb-14'>
+                    <div className='flex border-b-2 border-border pb-10'>
                         <img src={LogoImage} className='w-[120px]' />
                     </div>
                 </div>
@@ -102,7 +103,20 @@ const SideBar: FC = () => {
 
                     <div className='flex-1 items-end mt-14 pb-8'>
 
-                        <div className='text-xs text-[#8C90A3]'>
+                        <div className='bg-[#F5F7FC] rounded-2xl p-4 text-center'>
+                            <div className='text-[15px] font-medium'>{t('sidebar.submitYourOrder')}</div>
+                            <div className='mt-2.5 text-[13px] text-[#7B7E8B]'>{t('sidebar.submitYourOrderDescription')}</div>
+                            <Button
+                                className='flex items-center mt-2.5'
+                            >
+                                <div className='flex gap-1'>
+                                    <AddSquare size={iconSizeSideBar} color='black' />
+                                    <div>{t('sidebar.newOrder')}</div>
+                                </div>
+                            </Button>
+                        </div>
+
+                        {/* <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem
                                 icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                 title={t('sidebar.logout')}
@@ -110,7 +124,7 @@ const SideBar: FC = () => {
                                 link={`#`}
                                 isLogout
                             />
-                        </div>
+                        </div> */}
                     </div>
                 </div>
             </div>