responsive sidebar and footer reponsive and home responsive

src/langs/fa.json

@@ -85,6 +85,13 @@
     "buy": "خرید",
     "other_services": "سایر سرویس ها"
   },
+  "footer": {
+    "home": "صفحه اصلی",
+    "other_services": "سایر سرویس ها",
+    "my_services": "سرویس های من",
+    "announcements": "اطلاعیه ها",
+    "tickets": "تیکت ها"
+  },
   "ticket": {
     "tickets": "تیکت ها",
     "new_ticket": "تیکت جدید",

src/pages/home/Home.tsx

@@ -17,22 +17,24 @@ const Home: FC = () => {
     return (
         <div className='w-full flex gap-6'>
             <div className='flex-1'>
-                <Carousel autoplay className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
+                <Carousel prevArrow={() => null} nextArrow={() => null} autoplay={false} className="rounded-xl h-fit dltr" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
                     <div className='relative drtl'>
                         <img src={BannerImage} className='w-full rounded-3xl' />
-                        <div className='absolute  size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
+                        <div className='absolute  size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
-                            <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
+                            <div className='sm:flex hidden justify-end w-full'>
-                                {t('home.new')}
+                                <button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
-                            </button>
+                                    {t('home.new')}
+                                </button>
+                            </div>
 
                             <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
-                                <div>
+                                <div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
                                     سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                                 </div>
-                                <div className='mt-3 text-border text-xs'>
+                                <div className='xl:mt-3 mt-2 text-border text-xs'>
                                     ۸ دقیقه مطالعه
                                 </div>
-                                <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
+                                <button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
                                     <div>
                                         {t('home.study')}
                                     </div>
@@ -43,19 +45,21 @@ const Home: FC = () => {
                     </div>
                     <div className='relative drtl'>
                         <img src={BannerImage} className='w-full rounded-3xl' />
-                        <div className='absolute  size-full top-0 right-0 py-6 px-8 flex flex-col justify-between'>
+                        <div className='absolute  size-full top-0 right-0 xl:py-6 py-4 xl:px-8 px-4 flex flex-col xl:justify-between'>
-                            <button className="px-8 w-fit py-1.5 bg-white bg-opacity-10 text-white text-sm rounded-full shadow-md ">
+                            <div className='sm:flex hidden justify-end w-full'>
-                                {t('home.new')}
+                                <button className="xl:px-8 px-4 w-fit xl:py-1.5 py-1 bg-white bg-opacity-10 text-white xl:text-sm text-xs rounded-full shadow-md ">
-                            </button>
+                                    {t('home.new')}
+                                </button>
+                            </div>
 
                             <div className='max-w-[340px] font-medium text-white text-lg leading-10'>
-                                <div>
+                                <div className='xl:tetx-base leading-7 text-xs truncate xl:overflow-auto'>
                                     سفارش نرم‌افزار اختصاصی: سرمایه‌ای برای آینده یا فقط هزینه‌ای برای امروز؟
                                 </div>
-                                <div className='mt-3 text-border text-xs'>
+                                <div className='xl:mt-3 mt-2 text-border text-xs'>
                                     ۸ دقیقه مطالعه
                                 </div>
-                                <button className='mt-3 px-4 h-9 flex gap-2 items-center text-xs rounded-2.5 bg-black text-white'>
+                                <button className='xl:mt-3 mt-2 xl:px-4 px-2 xl:h-9 h-6 flex gap-2 items-center xl:text-xs text-[10px] xl:rounded-2.5 rounded-lg bg-black text-white'>
                                     <div>
                                         {t('home.study')}
                                     </div>
@@ -66,7 +70,7 @@ const Home: FC = () => {
                     </div>
                 </Carousel>
 
-                <div className='mt-8 text-sm flex gap-6 items-center'>
+                <div className='mt-8 flex-wrap text-sm flex gap-6 items-center'>
                     <ItemDashboard
                         title={t('home.myservice')}
                         icon={<Element3 size={20} color='black' />}
@@ -105,8 +109,8 @@ const Home: FC = () => {
                     <TitleLine title={t('home.access')} />
                 </div>
 
-                <div className='mt-8 flex gap-6 items-center'>
+                <div className='mt-8 flex flex-wrap gap-6 items-center'>
-                    <div className='flex-1 h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
+                    <div className='flex-1 min-w-[40%] xl:min-w-[20%] h-[160px] rounded-3xl bg-white flex flex-col gap-4 justify-center items-center'>
                         <img src={AccessbilityImage} className='w-10' />
                         <div className='text-xs'>
                             {t('home.add_access')}

src/pages/home/components/BoxNewAccessbility.tsx

@@ -14,7 +14,7 @@ const BoxNewAccessbility: FC = () => {
         <>
             <div
                 onClick={() => setOpen(true)}
-                className="flex-1 flex justify-center items-center h-[160px]"
+                className="flex-1 min-w-[40%] xl:min-w-[20%]  flex justify-center items-center h-[160px]"
                 style={{
                     position: 'relative',
                 }}

src/pages/home/components/DanakLearning.tsx

@@ -9,7 +9,7 @@ const DanakLearning: FC = () => {
     const { t } = useTranslation('global')
 
     return (
-        <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden xl:block h-fit px-5 py-7 rounded-3xl'>
+        <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
             <div className='flex justify-between items-center'>
                 <div>
                     {t('home.danak_learning')}

src/pages/home/components/ItemDashboard.tsx

@@ -11,7 +11,7 @@ type Props = {
 const ItemDashboard: FC<Props> = (props: Props) => {
 
     return (
-        <div className='p-6 flex-1 h-[178px] bg-white rounded-3xl'>
+        <div className='p-6 min-w-[40%] xl:min-w-[20%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
             <div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
                 {props.icon}
             </div>

src/pages/service/OtherServices.tsx

@@ -70,8 +70,8 @@ const OtherServices: FC = () => {
                     <TitleLine title={t('service.selected_danak')} />
                 </div>
 
-                <div className='flex gap-6 items-center mt-8'>
+                <div className='flex flex-wrap gap-6 items-center mt-8'>
-                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                    <div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
                         <div className='flex gap-2 items-center'>
                             <div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
                             <div>
@@ -96,7 +96,7 @@ const OtherServices: FC = () => {
                             </Button>
                         </div>
                     </div>
-                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                    <div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
                         <div className='flex gap-2 items-center'>
                             <div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
                             <div>
@@ -121,7 +121,7 @@ const OtherServices: FC = () => {
                             </Button>
                         </div>
                     </div>
-                    <div className='flex-1 bg-white rounded-3xl p-6'>
+                    <div className='flex-1 min-w-[45%] bg-white rounded-3xl p-6'>
                         <div className='flex gap-2 items-center'>
                             <div className='size-[50px] bg-[#FF7B00] rounded-xl'></div>
                             <div>

src/router/Main.tsx

@@ -18,13 +18,14 @@ import Wallet from '../pages/wallet/Wallet'
 import ReceiptsDetail from '../pages/receipts/Detail'
 import Profile from '../pages/profile/Profile'
 import OtherServices from '../pages/service/OtherServices'
+import Footer from '../shared/Footer'
 
 const MainRouter: FC = () => {
     return (
         <div className='p-4 overflow-hidden'>
             <SideBar />
             <Header />
-            <div className='flex-1 ms-[269px] mt-[81px]'>
+            <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
                 <div className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
                     <div>
                         <Routes>
@@ -47,6 +48,7 @@ const MainRouter: FC = () => {
                     </div>
                 </div>
             </div>
+            <Footer />
         </div>
     )
 }

src/shared/Footer.tsx

@@ -0,0 +1,68 @@
+import { Element3, Element4, Home2, Messages3, NotificationStatus } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const Footer: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='xl:hidden'>
+            <div className='h-[90px] '></div>
+            <div className='fixed bottom-2 right-4 left-4 bg-white h-[60px] rounded-2xl flex justify-between items-center px-5'>
+                <div className='text-description flex flex-col items-center gap-1.5'>
+                    <Home2
+                        className='size-5'
+                        color='#8C90A3'
+                    />
+                    <div className='text-[10px]'>
+                        {t('footer.home')}
+                    </div>
+                </div>
+                <div className='text-description flex flex-col items-center gap-1.5'>
+                    <Element4
+                        className='size-5'
+                        color='#8C90A3'
+                    />
+                    <div className='text-[10px]'>
+                        {t('footer.other_services')}
+                    </div>
+                </div>
+
+                <div className='text-description flex flex-col items-center gap-1.5'>
+                    <div className='bg-white p-1 rounded-full -mt-7'>
+                        <div className='bg-black flex justify-center items-center size-10 rounded-full'>
+                            <Element3
+                                className='size-5'
+                                color='white'
+                            />
+                        </div>
+                    </div>
+                    <div className='text-[10px] '>
+                        {t('footer.my_services')}
+                    </div>
+                </div>
+                <div className='text-description flex flex-col items-center gap-1.5'>
+                    <NotificationStatus
+                        className='size-5'
+                        color='#8C90A3'
+                    />
+                    <div className='text-[10px]'>
+                        {t('footer.announcements')}
+                    </div>
+                </div>
+                <div className='text-description flex flex-col items-center gap-1.5'>
+                    <Messages3
+                        className='size-5'
+                        color='#8C90A3'
+                    />
+                    <div className='text-[10px]'>
+                        {t('footer.tickets')}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Footer

src/shared/Header.tsx

@@ -1,29 +1,36 @@
 import { FC } from 'react'
 import Input from '../components/Input'
-import { ArrowDown2, Element3, Wallet } from 'iconsax-react'
+import { ArrowDown2, Element3, HambergerMenu, Wallet } from 'iconsax-react'
 import AvatarImage from '../assets/images/Avatar.png'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Pages } from '../config/Pages'
 import Notifications from '../pages/notification/Notification'
+import LogoImage from '../assets/images/logo.svg'
+import { useSharedStore } from './store/sharedStore'
 
 const Header: FC = () => {
 
     const { t } = useTranslation('global')
+    const { setOpenSidebar, openSidebar } = useSharedStore()
 
     return (
-        <div className='fixed  left-4 right-[285px] top-4 h-16 flex items-center px-6 bg-white justify-between rounded-[32px] w-[calc(100%-305px)]'>
+        <div className='fixed 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='min-w-[270px]'>
+            <div className='min-w-[270px] hidden xl:block'>
                 <Input
                     variant='search'
                     placeholder={t('header.search')}
                 />
             </div>
-            <div className='flex gap-6 items-center'>
+            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
-                <Element3 size={18} color='black' />
+                <HambergerMenu size={24} color='black' />
+            </div>
+            <img src={LogoImage} className='h-6 absolute right-0 left-0 mx-auto' />
+            <div className='flex xl:gap-6 gap-3 items-center'>
+                <Element3 color='black' className='xl:size-[18px] size-4' />
                 <Link to={Pages.wallet}>
-                    <Wallet size={18} color='black' />
+                    <Wallet className='xl:size-[18px] size-4' color='black' />
                 </Link>
                 <Notifications />
                 <div className='flex gap-2 items-center'>
@@ -32,7 +39,7 @@ const Header: FC = () => {
                             <img src={AvatarImage} className='size-full object-cover' />
                         </Link>
                     </div>
-                    <div className='flex gap-1 items-center'>
+                    <div className='xl:flex hidden gap-1 items-center'>
                         <div className='text-xs'>مهرداد مظفری</div>
                         <ArrowDown2 size={14} color='#8C90A3' />
                     </div>

src/shared/SideBar.tsx

@@ -5,10 +5,13 @@ import { Card, DocumentText, Element3, Element4, Home2, Logout, Messages3, Notif
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
+import { useSharedStore } from './store/sharedStore'
+import { clx } from '../helpers/utils'
 
 const SideBar: FC = () => {
 
     const { t } = useTranslation('global')
+    const { openSidebar, setOpenSidebar } = useSharedStore()
     const location = useLocation()
 
     const isActive = (name: string) => {
@@ -18,106 +21,116 @@ const SideBar: FC = () => {
     const iconSizeSideBar = 20
 
     return (
-        <div className='fixed right-4 top-4 bottom-4 rounded-[32px] w-[250px] bg-white flex flex-col py-12'>
+        <>
-            <div className='flex justify-center'>
+            {
-                <img src={LogoImage} className='w-[140px]' />
+                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
-            </div>
+            }
-
+            <div
-            <div className='flex-1 h-full overflow-y-auto no-scrollbar'>
+                className={clx(
-                <div className='mt-10 px-12 text-header text-sm font-normal'>
+                    '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',
-                    {t('sidebar.menu')}
+                    openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
+                )}
+            >
+                <div className='flex justify-center'>
+                    <img src={LogoImage} className='w-[140px]' />
                 </div>
 
-                <div className='text-xs text-[#8C90A3]'>
+                <div className='flex-1 h-full overflow-y-auto no-scrollbar'>
-                    <SideBarItem
+                    <div className='mt-10 px-12 text-header text-sm font-normal'>
-                        icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                        {t('sidebar.menu')}
-                        title={t('sidebar.mainpage')}
+                    </div>
-                        isActive={isActive('dashboard')}
-                        link={Pages.dashboard}
-                    />
-                    <SideBarItem
-                        icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        title={t('sidebar.myservice')}
-                        isActive={isActive('services')}
-                        link={Pages.services.mine}
-                    />
-                    <SideBarItem
-                        icon={<Element4 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        title={t('sidebar.other_service')}
-                        isActive={isActive('other-service')}
-                        link={Pages.services.other}
-                    />
-                    <SideBarItem
-                        icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        title={t('sidebar.receipt_list')}
-                        isActive={isActive('receipts')}
-                        link={Pages.receipts.index}
-                    />
-                    <SideBarItem
-                        icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        title={t('sidebar.transactions')}
-                        isActive={isActive('transactions')}
-                        link={Pages.transactions}
-                    />
-                </div>
 
-                <div className='mt-10 px-12 text-header text-sm font-normal'>
-                    {t('sidebar.other')}
-                </div>
-
-                <div className='text-xs text-[#8C90A3]'>
-                    <SideBarItem
-                        icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        title={t('sidebar.ticket')}
-                        isActive={isActive('tickets')}
-                        link={Pages.ticket.list}
-                    />
-                </div>
-                <div className='text-xs text-[#8C90A3]'>
-                    <SideBarItem
-                        icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        title={t('sidebar.announcement')}
-                        isActive={isActive('announcement')}
-                        link={Pages.announcement}
-                    />
-                </div>
-                <div className='text-xs text-[#8C90A3]'>
-                    <SideBarItem
-                        icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        title={t('sidebar.criticisms')}
-                        isActive={isActive('criticisms')}
-                        link={Pages.criticisms}
-                    />
-                </div>
-                <div className='text-xs text-[#8C90A3]'>
-                    <SideBarItem
-                        icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                        title={t('sidebar.learning')}
-                        isActive={isActive('learning')}
-                        link={Pages.learning}
-                    />
-                </div>
-
-                <div className='flex-1 items-end mt-14'>
                     <div className='text-xs text-[#8C90A3]'>
                         <SideBarItem
-                            icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.setting')}
+                            title={t('sidebar.mainpage')}
-                            isActive={isActive('setting')}
+                            isActive={isActive('dashboard')}
-                            link={Pages.setting}
+                            link={Pages.dashboard}
+                        />
+                        <SideBarItem
+                            icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.myservice')}
+                            isActive={isActive('services')}
+                            link={Pages.services.mine}
+                        />
+                        <SideBarItem
+                            icon={<Element4 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.other_service')}
+                            isActive={isActive('other-service')}
+                            link={Pages.services.other}
+                        />
+                        <SideBarItem
+                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.receipt_list')}
+                            isActive={isActive('receipts')}
+                            link={Pages.receipts.index}
+                        />
+                        <SideBarItem
+                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.transactions')}
+                            isActive={isActive('transactions')}
+                            link={Pages.transactions}
+                        />
+                    </div>
+
+                    <div className='mt-10 px-12 text-header text-sm font-normal'>
+                        {t('sidebar.other')}
+                    </div>
+
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.ticket')}
+                            isActive={isActive('tickets')}
+                            link={Pages.ticket.list}
                         />
                     </div>
                     <div className='text-xs text-[#8C90A3]'>
                         <SideBarItem
-                            icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
-                            title={t('sidebar.logout')}
+                            title={t('sidebar.announcement')}
-                            isActive={isActive('logout')}
+                            isActive={isActive('announcement')}
-                            link={`#`}
+                            link={Pages.announcement}
                         />
                     </div>
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.criticisms')}
+                            isActive={isActive('criticisms')}
+                            link={Pages.criticisms}
+                        />
+                    </div>
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.learning')}
+                            isActive={isActive('learning')}
+                            link={Pages.learning}
+                        />
+                    </div>
+
+                    <div className='flex-1 items-end mt-14'>
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.setting')}
+                                isActive={isActive('setting')}
+                                link={Pages.setting}
+                            />
+                        </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')}
+                                isActive={isActive('logout')}
+                                link={`#`}
+                            />
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
+        </>
     )
 }
 

src/shared/store/sharedStore.ts

@@ -0,0 +1,7 @@
+import { create } from "zustand";
+import { SharedStoreType } from "../types/SharedTypes";
+
+export const useSharedStore = create<SharedStoreType>((set) => ({
+  openSidebar: false,
+  setOpenSidebar: (value) => set({ openSidebar: value }),
+}));

src/shared/types/SharedTypes.ts

@@ -0,0 +1,4 @@
+export type SharedStoreType = {
+  openSidebar: boolean;
+  setOpenSidebar: (value: boolean) => void;
+};