hamid zarghami
101 lines
4.6 KiB
TypeScript
101 lines
4.6 KiB
TypeScript
'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 |