Untitled
user_5257650
plain_text
2 years ago
31 kB
6
Indexable
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import AnimateHeight from 'react-animate-height';
import { useTranslation } from 'react-i18next';
import PerfectScrollbar from 'react-perfect-scrollbar';
import { useDispatch, useSelector } from 'react-redux';
import { useGeneralSettings } from '../../hooks/useGeneralSettings';
import { toggleSidebar } from '../../store/themeConfigSlice';
const Sidebar = () => {
const router = useRouter();
const [currentMenu, setCurrentMenu] = useState('');
const [errorSubMenu, setErrorSubMenu] = useState(false);
const themeConfig = useSelector((state) => state.themeConfig);
const semidark = useSelector((state) => state.themeConfig.semidark);
const { isLoading, data: generalSettings, refetch } = useGeneralSettings();
const toggleMenu = (value) => {
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 = selector.closest('ul.sub-menu');
if (ul) {
let ele = ul.closest('li.menu').querySelectorAll('.nav-link') || [];
if (ele.length) {
ele = ele[0];
setTimeout(() => {
ele.click();
});
}
}
}
if (router.pathname.includes('popular')) {
setCurrentMenu('popular');
}
if (router.pathname.includes('highlights')) {
setCurrentMenu('highlights');
}
if (router.pathname.includes('news')) {
setCurrentMenu('news');
}
if (router.pathname.includes('administration')) {
setCurrentMenu('administration');
}
}, []);
useEffect(() => {
setActiveRoute();
if (window.innerWidth < 1024 && themeConfig.sidebar) {
dispatch(toggleSidebar());
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [router.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');
};
const dispatch = useDispatch();
const { t } = useTranslation();
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-[#1E2328] text-gray-200 dark:bg-black">
<div className="flex items-center justify-between px-4 py-3">
<Link href="/admin/dashboard" className="main-logo flex shrink-0 items-center">
{isLoading ? (
<Image className="h-[40px] w-[200px] rounded-md p-0.5" width={0} height={0} sizes="100" src="/KOKO-football.png" alt="img" />
) : generalSettings?.site_logo ? (
<Image className="h-[40px] w-[200px] rounded-md p-0.5" width={0} height={0} sizes="100" src={generalSettings.site_logo} alt="img" />
) : (
<Image className="h-[40px] w-[200px] rounded-md p-0.5" width={0} height={0} sizes="100" src="/KOKO-football.png" alt="img" />
)}
</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())}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="m-auto h-5 w-5">
<path d="M13 19L7 12L13 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button>
</div>
<PerfectScrollbar className="relative h-[calc(100vh-80px)]">
<ul className="relative space-y-0.5 p-4 py-0 font-semibold">
<li className="nav-item">
<ul>
<li className="nav-item">
<Link href="/admin/dashboard" className="group">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Dashboard')}</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link href="/admin/live_matches" className="group">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Manage Live')}</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link href="/admin/manage_app" className="group">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.5 19.5h3m-6.75 2.25h10.5a2.25 2.25 0 002.25-2.25v-15a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 4.5v15a2.25 2.25 0 002.25 2.25z"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Manage App')}</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link href="/admin/fixtures" className="group">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Fixtures')}</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link href="/admin/notifications" className="group">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Notifications')}</span>
</div>
</Link>
</li>
<li className="menu nav-item">
<button type="button" className={`${currentMenu === 'popular' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('popular')}>
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary "
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Popular')}</span>
</div>
<div className={currentMenu === 'popular' ? 'rotate-90' : 'rtl:rotate-180'}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5L15 12L9 19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</button>
<AnimateHeight duration={300} height={currentMenu === 'popular' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500">
<li className="pt-1">
<Link className="ml-3 rounded-md bg-gray-300" href="/admin/popular/leagues">
{t('Leagues')}
</Link>
</li>
<li className="pt-1">
<Link className="ml-3 rounded-md bg-gray-300" href="/admin/popular/teams">
{t('Teams')}
</Link>
</li>
<li className="pt-1">
<Link className="ml-3 rounded-md bg-gray-300" href="/admin/popular/players">
{t('Players')}
</Link>
</li>
</ul>
</AnimateHeight>
</li>
<li className="menu nav-item">
<button type="button" className={`${currentMenu === 'highlights' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('highlights')}>
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Highlights')}</span>
</div>
<div className={currentMenu === 'highlights' ? 'rotate-90' : 'rtl:rotate-180'}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5L15 12L9 19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</button>
<AnimateHeight duration={300} height={currentMenu === 'highlights' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500">
<li className="pt-1">
<Link className="ml-3 rounded-md bg-gray-300" href="/admin/highlights/type">
{t('Types')}
</Link>
</li>
<li className="pt-1">
<Link className="ml-3 rounded-md bg-gray-300" href="/admin/highlights">
{t('Highlights')}
</Link>
</li>
</ul>
</AnimateHeight>
</li>
<li className="menu nav-item">
<button type="button" className={`${currentMenu === 'news' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('news')}>
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('News')}</span>
</div>
<div className={currentMenu === 'news' ? 'rotate-90' : 'rtl:rotate-180'}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5L15 12L9 19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</button>
<AnimateHeight duration={300} height={currentMenu === 'news' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500">
<li className="pt-2">
<Link className="ml-3 rounded-md bg-gray-300" href="/admin/news/type">
{t('Types')}
</Link>
</li>
<li className="pt-2">
<Link className="ml-3 rounded-md bg-gray-300" href="/admin/news">
{t('News')}
</Link>
</li>
</ul>
</AnimateHeight>
</li>
{/* <li className="nav-item">
<Link href="/admin/delete_account" className="group">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Delete Account Request')}</span>
</div>
</Link>
</li> */}
<li className="menu nav-item">
<button type="button" className={`${currentMenu === 'administration' ? 'active' : ''} nav-link group w-full`} onClick={() => toggleMenu('administration')}>
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6 !text-white group-hover:!text-primary"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
/>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span className="text-gray-200 ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{t('Administration')}</span>
</div>
<div className={currentMenu === 'administration' ? 'rotate-90' : 'rtl:rotate-180'}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 5L15 12L9 19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
</button>
<AnimateHeight duration={300} height={currentMenu === 'administration' ? 'auto' : 0}>
<ul className="sub-menu text-gray-500">
<li className="p-2">
<Link className="ml-3 rounded-md bg-gray-300" href="/admin/general_settings">
{t('General Settings')}
</Link>
</li>
{/* <li>
<Link href="/admin/cache_clear">{t('Cache Clear')}</Link>
</li> */}
</ul>
</AnimateHeight>
</li>
</ul>
</li>
</ul>
</PerfectScrollbar>
</div>
</nav>
</div>
);
};
export default Sidebar;
Editor is loading...
Leave a Comment