198 lines
10 KiB
TypeScript
198 lines
10 KiB
TypeScript
'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';
|
|
|
|
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('settings')}</span>
|
|
</h2>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/user" 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('User')}</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 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_settings')}</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 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_settings')}</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('management')}</span>
|
|
</h2>
|
|
|
|
<li className="nav-item">
|
|
<Link href="/manage-brands" 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('manage_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 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('manage_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 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('manage_added_products')}</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 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('Account Settings')}</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
<li className="nav-item">
|
|
<Link href="/pricing" className="group nav-link">
|
|
<div className="flex items-center">
|
|
<IconDollarSignCircle className="w-12 h-12 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; |