negareh-admin/src/shared/Sidebar.tsx

import { type FC } from 'react';
import LogoImage from '@/assets/images/logo.svg';
import {
  AddSquare,
  DocumentText,
  Element3,
  ElementEqual,
  Home2,
  Messages3,
  MessageText,
  NotificationStatus,
  People,
  Printer,
  Profile2User,
  Receipt21,
  Teacher,
  User,
} 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 = () => {
  const { openSidebar, setOpenSidebar } = useSharedStore();
  const location = useLocation();

  const isActive = (name: string) => {
    return location.pathname.includes(name);
  };

  const iconSizeSideBar = 20;

  return (
    <>
      {openSidebar && (
        <div
          className="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-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: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-[#F5F7FC] pb-10">
            <img src={LogoImage} className="w-[120px]" />
          </div>
        </div>

        <div className="flex-1 h-full overflow-y-auto no-scrollbar px-6">
          <div className="mt-10 text-description px-6 text-header text-sm font-bold">{t('sidebar.menu')}</div>

          <div className="mt-3">
            <SideBarItem
              icon={<Home2 size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.mainPage')}
              isActive={isActive('/home')}
              link={Paths.home}
            />

            <SideBarItem
              icon={<MessageText size={iconSizeSideBar} color="#4F5260" />}
              title={'درخواست ها'}
              isActive={isActive('requests')}
              link={Paths.requests.list}
            />

            <SideBarItem
              icon={<Element3 size={iconSizeSideBar} color="#4F5260" />}
              title={'سفارشات'}
              isActive={isActive('order')}
              link={Paths.order.list}
            />

            <SideBarItem
              icon={<Receipt21 size={iconSizeSideBar} color="#4F5260" />}
              title={'پیش فاکتور'}
              isActive={isActive('/proforma-invoice')}
              link={Paths.perfomaInvoice.list}
            />

            <SideBarItem
              icon={<ElementEqual size={iconSizeSideBar} color="#4F5260" />}
              title={'محصولات'}
              isActive={isActive('product')}
              link={Paths.product.list}
            />

            <SideBarItem
              icon={<People size={iconSizeSideBar} color="#4F5260" />}
              title={'مشتریان'}
              isActive={isActive('customer')}
              link={Paths.users.list}
            />

            <SideBarItem
              icon={<Printer size={iconSizeSideBar} color="#4F5260" />}
              title={'چاپ'}
              isActive={isActive('print')}
              link={Paths.print.list}
            />

            <SideBarItem
              icon={<User size={iconSizeSideBar} color="#4F5260" />}
              title={'ادمین'}
              isActive={isActive('admin')}
              link={Paths.admin.list}
            />
          </div>

          <div className="mt-10 px-6 text-description text-sm font-bold">{t('sidebar.other')}</div>

          <div className="mt-3">
            <SideBarItem
              icon={<Profile2User size={iconSizeSideBar} color="#4F5260" />}
              title={'کاربران'}
              isActive={isActive('/tickets')}
              link={Paths.tickets.list}
            />

            <SideBarItem
              icon={<Messages3 size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.tickets')}
              isActive={isActive('/tickets')}
              link={Paths.tickets.list}
            />

            <SideBarItem
              icon={<NotificationStatus size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.announcement')}
              isActive={isActive('/announcement')}
              link={Paths.announcement.list}
            />

            <SideBarItem
              icon={<DocumentText size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.criticisms')}
              isActive={isActive('/criticisms')}
              link={Paths.criticisms.list}
            />

            <SideBarItem
              icon={<Teacher size={iconSizeSideBar} color="#4F5260" />}
              title={t('sidebar.learning')}
              isActive={isActive('/learning')}
              link={Paths.learning.list}
            />
          </div>

          <div className="flex-1 items-end mt-14 pb-8">
            <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')}
                                isActive={isActive('logout')}
                                link={`#`}
                                isLogout
                            />
                        </div> */}
          </div>
        </div>
      </div>
    </>
  );
};

export default SideBar;