danak-website/src/shared/SideBar.tsx

'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'
import Button from '@/components/Button'
import Link from 'next/link'
import { CONSOLE_URL, LOGIN_URL } from '@/config/const'

const SideBar: FC = () => {

    const { openSidebar, setOpenSidebar, isLogin } = 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 flex flex-col 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'}
                        />

                        <SideBarItem
                            icon={<DocumentText variant={isActive('contact') ? 'Bold' : 'Outline'} color={isActive('contact') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={'تماس با ما'}
                            isActive={isActive('contact')}
                            link={'/contact'}
                        />

                    </div>

                    {typeof window !== 'undefined' && (
                        (() => {
                            if (!isLogin)
                                return (
                                    <div className='flex-1 flex items-end justify-center px-12'>
                                        <Link className='w-full' href={`${LOGIN_URL}?redirect=${encodeURIComponent(window.location.href)}`}>
                                            <Button
                                                label='ورود | ثبت نام'
                                            />
                                        </Link>
                                    </div>
                                )
                            else
                                return (
                                    <div className='flex-1 flex items-end justify-center px-12'>
                                        <Link className='w-full' href={`${CONSOLE_URL}/dashboard`}>
                                            <Button
                                                label='ناحیه کاربری'
                                            />
                                        </Link>
                                    </div>
                                )
                        })()
                    )}

                </div>
            </div>
        </>
    )
}

export default SideBar