sidebar in mobile

2025-04-13 10:22:49 +03:30
parent 715d58a3b8
commit 15af39fc84
8 changed files with 199 additions and 4 deletions
@@ -0,0 +1,101 @@
+'use client'
+import { FC } from 'react'
+import { Building4, CodeCircle, DocumentText, Element3, Element4, Home2, UserSquare } from 'iconsax-react'
+import SideBarItem from './SideBarItem'
+import { useSharedStore } from './store/sharedStore'
+import { clx } from '../helpers/utils'
+import Image from 'next/image'
+import { usePathname } from 'next/navigation'
+
+const SideBar: FC = () => {
+
+    const { openSidebar, setOpenSidebar } = useSharedStore()
+    const pathname = usePathname()
+    const isActive = (name: string) => {
+        if (pathname === '/' && name === 'home') {
+            return true
+        }
+        return pathname.includes(name)
+    }
+
+    const iconSizeSideBar = 20
+
+    return (
+        <>
+            {
+                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 z-10' onClick={() => setOpenSidebar(false)} />
+            }
+            <div
+                className={clx(
+                    'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible   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'
+                )}
+            >
+                <div className='flex justify-center'>
+                    <Image src={'/images/logo.svg'} width={140} height={40} alt='logo' className='w-[140px]' />
+                </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>
+
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<Home2 variant={isActive('home') ? 'Bold' : 'Outline'} color={isActive('home') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title='صفحه اصلی'
+                            isActive={isActive('home')}
+                            link={'/'}
+                        />
+
+                        <SideBarItem
+                            icon={<Element3 variant={isActive('products') ? 'Bold' : 'Outline'} color={isActive('products') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'محصولات'}
+                            isActive={isActive('products')}
+                            link={'/products'}
+                        />
+
+                        <SideBarItem
+                            icon={<Element4 variant={isActive('danak-services') ? 'Bold' : 'Outline'} color={isActive('danak-services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'خدمات دناک'}
+                            isActive={isActive('danak-services')}
+                            link={'/danak-services'}
+                        />
+
+                        <SideBarItem
+                            icon={<UserSquare variant={isActive('representatives') ? 'Bold' : 'Outline'} color={isActive('representatives') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'نمایندگان'}
+                            isActive={isActive('representatives')}
+                            link={'/representatives'}
+                        />
+
+                        <SideBarItem
+                            icon={<CodeCircle variant={isActive('developers') ? 'Bold' : 'Outline'} color={isActive('developers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'توسعه دهندگان'}
+                            isActive={isActive('developers')}
+                            link={'/developers'}
+                        />
+
+                        <SideBarItem
+                            icon={<Building4 variant={isActive('about') ? 'Bold' : 'Outline'} color={isActive('about') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'درباره ما'}
+                            isActive={isActive('about')}
+                            link={'/about'}
+                        />
+
+                        <SideBarItem
+                            icon={<DocumentText variant={isActive('blogs') ? 'Bold' : 'Outline'} color={isActive('blogs') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={'بلاگ'}
+                            isActive={isActive('blogs')}
+                            link={'/blogs'}
+                        />
+
+                    </div>
+
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default SideBar