motorstate-frontend/components/layouts/sidebar.tsx

'use client';
import PerfectScrollbar from 'react-perfect-scrollbar';
import { useDispatch, useSelector } from 'react-redux';
import Link from 'next/link';
import { toggleSidebar } from '@/store/themeConfigSlice';
import AnimateHeight from 'react-animate-height';
import { IRootState } from '@/store';
import { useState, useEffect } from 'react';
import IconCaretsDown from '@/components/icon/icon-carets-down';
import IconCaretDown from '@/components/icon/icon-caret-down';
import IconMinus from '@/components/icon/icon-minus';
import { usePathname } from 'next/navigation';
import { getTranslation } from '@/i18n';
import IconDollarSignCircle from '../icon/icon-dollar-sign-circle';
import { Import } from "lucide-react";

const Sidebar = () => {
  const dispatch = useDispatch();
  const { t } = getTranslation();
  const pathname = usePathname();
  const [currentMenu, setCurrentMenu] = useState<string>('');
  const themeConfig = useSelector((state: IRootState) => state.themeConfig);
  const semidark = useSelector((state: IRootState) => state.themeConfig.semidark);

  const toggleMenu = (value: string) => {
    setCurrentMenu((oldValue) => (oldValue === value ? '' : value));
  };

  useEffect(() => {
    const selector = document.querySelector('.sidebar ul a[href="' + window.location.pathname + '"]');
    if (selector) {
      selector.classList.add('active');
      const ul: any = selector.closest('ul.sub-menu');
      if (ul) {
        let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link') || [];
        if (ele.length) {
          ele = ele[0];
          setTimeout(() => {
            ele.click();
          });
        }
      }
    }
  }, [pathname]);

  useEffect(() => {
    setActiveRoute();
    if (window.innerWidth < 1024 && themeConfig.sidebar) {
      dispatch(toggleSidebar());
    }
  }, [pathname]);

  const setActiveRoute = () => {
    let allLinks = document.querySelectorAll('.sidebar ul a.active');
    for (let i = 0; i < allLinks.length; i++) {
      const element = allLinks[i];
      element?.classList.remove('active');
    }
    const selector = document.querySelector('.sidebar ul a[href="' + window.location.pathname + '"]');
    selector?.classList.add('active');
  };

  return (
    <div className={semidark ? 'dark' : ''}>
      <nav
        className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300 ${semidark ? 'text-white-dark' : ''}`}
      >
        <div className="h-full bg-white dark:bg-black">
          <div className="flex items-center justify-between px-4 py-3">
            <Link href="/" className="main-logo flex shrink-0 items-center">
              <img className="ml-[5px] w-[164px] h-[40px] flex-none block dark:hidden" src="/assets/images/logo_dark.png" alt="logo" />
              <img className="ml-[5px] w-[164px] h-[40px] flex-none hidden dark:block" src="/assets/images/logo_light.png" alt="logo" />
              {/* <span className="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">Data4Autos</span> */}
            </Link>
            <button
              type="button"
              className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-gray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-dark-light/10"
              onClick={() => dispatch(toggleSidebar())}
            >
              <IconCaretsDown className="m-auto rotate-90" />
            </button>
          </div>
          <PerfectScrollbar className="relative h-[calc(100vh-80px)]">
            <ul className="relative space-y-0.5 p-4 py-0 font-semibold">
              {/* <li className="menu nav-item">
                <button
                  type="button"
                  className={`${currentMenu === 'dashboard' ? 'active' : ''} nav-link group w-full`}
                  onClick={() => toggleMenu('dashboard')}
                >
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">🏠</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('dashboard')}</span>
                  </div>
                  <div className={currentMenu !== 'dashboard' ? '-rotate-90 rtl:rotate-90' : ''}>
                    <IconCaretDown />
                  </div>
                </button>
                <AnimateHeight duration={300} height={currentMenu === 'dashboard' ? 'auto' : 0}> */}
              <li className="nav-item">
                <Link href="/" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 group-hover:!text-primary">🏠</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Dashboard')}</span>
                  </div>
                </Link>
              </li>
              {/* </AnimateHeight>
              </li> */}

              <h2 className="-mx-4 mb-1 flex items-center bg-[#00d1ff] px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
                <IconMinus className="hidden h-5 w-4 flex-none" />
                <span>{t('Integrations')}</span>
              </h2>

              <li className="nav-item">
                <Link href="/motorstate-settings" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 text-lg group-hover:!text-primary">⚡</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('MotorState')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/ebay-settings" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 text-lg group-hover:!text-primary">🛍️</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('eBay')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/store-settings" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 text-lg group-hover:!text-primary">🛒</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Store')}</span>
                  </div>
                </Link>
              </li>

              <h2 className="-mx-4 mb-1 flex items-center bg-[#00d1ff] px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
                <IconMinus className="hidden h-5 w-4 flex-none" />
                <span>{t('Manage')}</span>
              </h2>

              <li className="nav-item">
                <Link href="/manage-brands" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 text-lg group-hover:!text-primary">🏷️</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Brands')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/manage-products" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 text-lg group-hover:!text-primary">📦</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Products')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/manage-added-products" className="group nav-link">
                  <div className="flex items-center">
                    {/* <span className="shrink-0 text-lg group-hover:!text-primary"><img src="https://lucide.dev/icons/import.svg" width="26"/></span> */}
                    <span className="shrink-0 text-lg group-hover:!text-primary">
                    <Import className="h-5 w-5 text-black/60 dark:text-white/60 group-hover:text-primary transition-colors" />
                  </span>
                    
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Imports')}</span>
                  </div>
                </Link>
              </li>
              <h2 className="-mx-4 mb-1 flex items-center bg-[#00d1ff] px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
                <IconMinus className="hidden h-5 w-4 flex-none" />
                <span>{t('account')}</span>
              </h2>

              <li className="nav-item">
                <Link href="/account-setting" className="group nav-link">
                  <div className="flex items-center">
                    <span className="shrink-0 text-lg group-hover:!text-primary">👤</span>
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('My Account')}</span>
                  </div>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/pricing" className="group nav-link">
                  <div className="flex items-center">
                    <IconDollarSignCircle  className="text-gray-600 group-hover:text-primary transition" />
                    <span className="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Pricing Plan')}</span>
                  </div>
                </Link>
              </li>
            </ul>
          </PerfectScrollbar>
        </div>
      </nav>
    </div>
  );
};

export default Sidebar;