253 lines
14 KiB
TypeScript
253 lines
14 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 IconMenuComponents from '@/components/icon/menu/icon-menu-components';
|
|
import { usePathname } from 'next/navigation';
|
|
import { getTranslation } from '@/i18n';
|
|
import IconCaretDown from '../icon/icon-caret-down';
|
|
import IconMinus from '../icon/icon-minus';
|
|
|
|
const Sidebar = () => {
|
|
const dispatch = useDispatch();
|
|
const { t } = getTranslation();
|
|
const pathname = usePathname();
|
|
const [currentMenu, setCurrentMenu] = useState<string>('');
|
|
const [errorSubMenu, setErrorSubMenu] = useState(false);
|
|
const themeConfig = useSelector((state: IRootState) => state.themeConfig);
|
|
const semidark = useSelector((state: IRootState) => state.themeConfig.semidark);
|
|
const toggleMenu = (value: string) => {
|
|
setCurrentMenu((oldValue) => {
|
|
return 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();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
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-rtgray-900">
|
|
<div className="flex items-center justify-between px-4 pt-4">
|
|
<Link href="/" className="main-logo flex shrink-0 items-center">
|
|
<img className="max-w-[180px] h-auto flex" src="/assets/images/newfulllogo.png" alt="logo" />
|
|
</Link>
|
|
|
|
<button
|
|
type="button"
|
|
className="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-rtgray-500/10 rtl:rotate-180 dark:text-white-light dark:hover:bg-rtgray-900/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-md">
|
|
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 pb-3 pt-2 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08] dark:text-white dark:active:text-white">
|
|
<IconMinus className="hidden h-5 w-4 flex-none" />
|
|
<span>Customer</span>
|
|
</h2>
|
|
<li className="menu nav-item">
|
|
<Link href="#" className="nav-link group">
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white dark:active:text-white">Dashboard</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
<li className="menu nav-item">
|
|
<Link href="#" className="nav-link group">
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white dark:active:text-white">Sites</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
<li className="menu nav-item">
|
|
<button type="button" className={`nav-link group w-full`} onClick={() => toggleMenu('setting')}>
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white dark:active:text-white">Setting</span>
|
|
</div>
|
|
|
|
<div className={currentMenu !== 'setting' ? '-rotate-90 rtl:rotate-90' : ''}>
|
|
<IconCaretDown />
|
|
</div>
|
|
</button>
|
|
|
|
<AnimateHeight duration={300} height={currentMenu === 'setting' ? 'auto' : 0}>
|
|
<ul className="sub-menu text-gray-500">
|
|
<li>
|
|
<Link href="#">Profile</Link>
|
|
</li>
|
|
</ul>
|
|
</AnimateHeight>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<h2 className="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:text-white dark:bg-opacity-[0.08] dark:active:text-white">
|
|
<IconMinus className="hidden h-5 w-4 flex-none" />
|
|
<span>Admin</span>
|
|
</h2>
|
|
<li className="menu nav-item">
|
|
<Link href="/adminDashboard" className="nav-link group">
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white dark:active:text-white">Dashboard</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
<li className="menu nav-item">
|
|
<Link href="/sites" className="nav-link group">
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Sites</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
<li className="menu nav-item">
|
|
<Link href="#" className="nav-link group">
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Devices</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
{/*}
|
|
<h2 className="-mx-4 mb-1 flex items-center px-7 py-3 font-extrabold uppercase dark:bg-opacity-[0.08] dark:group-hover:text-white dark:text-white">
|
|
<IconMinus className="hidden h-5 w-4 flex-none" />
|
|
<span>Providers</span>
|
|
</h2>
|
|
<li className="menu nav-item">
|
|
<Link href="#" className="nav-link group">
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Solis</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
<li className="menu nav-item">
|
|
<Link href="#" className="nav-link group">
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Huawei</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="menu nav-item">
|
|
<button type="button" className={`${currentMenu === 'sungrow' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('sungrow')}>
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Sungrow</span>
|
|
</div>
|
|
|
|
<div className={currentMenu !== 'component' ? '-rotate-90 rtl:rotate-90' : ''}>
|
|
<IconCaretDown />
|
|
</div>
|
|
</button>
|
|
|
|
<AnimateHeight duration={300} height={currentMenu === 'sungrow' ? 'auto' : 0}>
|
|
<ul className="sub-menu text-gray-500 dark:text-white/90">
|
|
<li>
|
|
<Link href="/sungrow/plant">Plant</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/sungrow/device">Device</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/sungrow/maintenance">Maintenance</Link>
|
|
</li>
|
|
</ul>
|
|
</AnimateHeight>
|
|
</li>
|
|
|
|
<li className="menu nav-item">
|
|
<Link href="#" className="nav-link group">
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">CSI</span>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
|
|
<li className="menu nav-item">
|
|
<button type="button" className={`${currentMenu === 'chint' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('chint')}>
|
|
<div className="flex items-center">
|
|
<IconMenuComponents className="shrink-0 group-hover:!text-primary" />
|
|
<span className="text-black ltr:pl-3 rtl:pr-3 dark:text-white dark:group-hover:text-white">Chint</span>
|
|
</div>
|
|
|
|
<div className={currentMenu !== 'component' ? '-rotate-90 rtl:rotate-90' : ''}>
|
|
<IconCaretDown />
|
|
</div>
|
|
</button>
|
|
|
|
<AnimateHeight duration={300} height={currentMenu === 'chint' ? 'auto' : 0}>
|
|
<ul className="sub-menu text-gray-500 dark:text-white/90">
|
|
<li>
|
|
<Link href="/chint/sites">Sites</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/chint/gateway">Gateway</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/chint/inverters">Inverters</Link>
|
|
</li>
|
|
</ul>
|
|
</AnimateHeight>
|
|
</li>
|
|
*/}
|
|
|
|
</ul>
|
|
</PerfectScrollbar>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|