Untitled
Anis
plain_text
2 years ago
17 kB
4
Indexable
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import AnimateHeight from "react-animate-height";
import { AiFillSetting } from "react-icons/ai";
import { BiSolidDashboard, BiSolidVideoRecording } from "react-icons/bi";
import { BsCalendar2DayFill } from "react-icons/bs";
import { FaAppStoreIos } from "react-icons/fa6";
import { FiMonitor } from "react-icons/fi";
import { HiMiniQueueList } from "react-icons/hi2";
import { RiLayout3Fill } from "react-icons/ri";
import { TbBellRingingFilled } from "react-icons/tb";
import PerfectScrollbar from "react-perfect-scrollbar";
import { useDispatch, useSelector } from "react-redux";
import { toggleSidebar } from "../../../store/themeConfigSlice";
const Sidebar = () => {
const pathname = usePathname();
const [currentMenu, setCurrentMenu] = useState("");
const semidark = useSelector((state) => state.themeConfig.semidark);
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();
// });
// }
// }
// }
// }, []);
// useEffect(() => {
// setActiveRoute();
// if (window.innerWidth < 1024 && themeConfig.sidebar) {
// dispatch(toggleSidebar());
// }
// }, [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');
// };
useEffect(() => {
if (pathname.includes("types")) {
setCurrentMenu("types");
}
if (pathname.includes("leagues")) {
setCurrentMenu("leagues");
}
}, [pathname]);
const dispatch = useDispatch();
return (
<div className={semidark ? "dark" : ""}>
<nav
className={`sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[220px] 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 h-10 shrink-0 items-center"
>
<h4 className="text-center text-2xl">Wind Football</h4>
</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 ${
pathname.includes("dashboard") && "active"
}`}
>
<div className="flex items-center">
<BiSolidDashboard
className={`shrink-0 group-hover:!text-primary ${
pathname.includes("dashboard") && "!text-primary"
}`}
/>
<span
className={`text-black ${
pathname.includes("dashboard") &&
"font-bold !text-primary"
} pl-3 dark:text-[#506690] dark:group-hover:text-white-dark`}
>
Dashboard
</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link
href="/admin/manage-live-matches"
className={`group ${
pathname.includes("manage-live-matches") && "active"
}`}
>
<div className="flex items-center">
<FiMonitor
className={`shrink-0 group-hover:!text-primary ${
pathname.includes("manage-live-matches") &&
"!text-primary"
}`}
/>
<span
className={`text-black ${
pathname.includes("manage-live-matches") &&
"font-bold !text-primary"
} pl-3 dark:text-[#506690] dark:group-hover:text-white-dark`}
>
Manage Live
</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link
href="/admin/manage-apps"
className={`group ${
pathname.includes("manage-apps") && "active"
}`}
>
<div className="flex items-center">
<FaAppStoreIos
className={`shrink-0 group-hover:!text-primary ${
pathname.includes("manage-apps") && "!text-primary"
}`}
/>
<span
className={`text-black ${
pathname.includes("manage-apps") &&
"font-bold !text-primary"
} pl-3 dark:text-[#506690] dark:group-hover:text-white-dark`}
>
Manage App
</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link
href="/admin/panels"
className={`group ${
pathname.includes("panels") && "active"
}`}
>
<div className="flex items-center">
<RiLayout3Fill
className={`shrink-0 group-hover:!text-primary ${
pathname.includes("panels") && "!text-primary"
}`}
/>
<span
className={`text-black ${
pathname.includes("panels") &&
"font-bold !text-primary"
} pl-3 dark:text-[#506690] dark:group-hover:text-white-dark`}
>
Panels
</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link
href="/admin/fixtures"
className={`group ${
pathname.includes("fixtures") && "active"
}`}
>
<div className="flex items-center">
<BsCalendar2DayFill
className={`shrink-0 group-hover:!text-primary ${
pathname.includes("fixtures") && "!text-primary"
}`}
/>
<span
className={`text-black ${
pathname.includes("fixtures") &&
"font-bold !text-primary"
} pl-3 dark:text-[#506690] dark:group-hover:text-white-dark`}
>
Fixtures
</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link
href="/admin/highlights"
className={`group ${
pathname.includes("highlights") && "active"
}`}
>
<div className="flex items-center">
<BiSolidVideoRecording
className={`shrink-0 group-hover:!text-primary ${
pathname.includes("highlights") && "!text-primary"
}`}
/>
<span
className={`text-black ${
pathname.includes("highlights") &&
"font-bold !text-primary"
} pl-3 dark:text-[#506690] dark:group-hover:text-white-dark`}
>
Highlights
</span>
</div>
</Link>
</li>
<li className="nav-item">
<Link
href="/admin/notifications"
className={`group ${
pathname.includes("notifications") && "active"
}`}
>
<div className="flex items-center">
<TbBellRingingFilled
className={`shrink-0 group-hover:!text-primary ${
pathname.includes("notifications") &&
"!text-primary"
}`}
/>
<span
className={`text-black ${
pathname.includes("notifications") &&
"font-bold !text-primary"
} pl-3 dark:text-[#506690] dark:group-hover:text-white-dark`}
>
Notifications
</span>
</div>
</Link>
</li>
<li className="nav-item">
<button
type="button"
className={`${
currentMenu === "types" || currentMenu === "leagues"
? "active"
: ""
} nav-link group w-full`}
onClick={() => toggleMenu("leagues")}
>
<div className="flex items-center">
<HiMiniQueueList
className={`h-6 w-6 shrink-0 group-hover:!text-primary ${
(pathname.includes("types") ||
pathname.includes("leagues")) &&
"!text-primary"
}`}
/>
<span
className={`pl-3 text-black dark:text-[#506690] dark:group-hover:text-white-dark ${
pathname.includes("types") &&
"font-bold !text-primary"
}`}
>
Types
</span>
</div>
<div
className={
currentMenu === "types" || currentMenu === "leagues"
? "!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 === "types" || currentMenu === "leagues"
? "auto"
: 0
}
>
<ul className="sub-menu text-gray-500">
<li>
<Link
className={`group ${
pathname.includes("ads") && "active"
}`}
href="/admin/types/ads"
>
Ads
</Link>
</li>
<li>
<Link
className={`group ${
pathname.includes("sports") && "active"
}`}
href="/admin/types/sports"
>
Sports
</Link>
</li>
<li>
<Link
className={`group ${
pathname.includes("leagues") && "active"
}`}
href="/admin/leagues"
>
Leagues
</Link>
</li>
</ul>
</AnimateHeight>
</li>
<li className="nav-item">
<Link
href="/admin/administration"
className={`group ${
pathname.includes("administration") && "active"
}`}
>
<div className="flex items-center">
<AiFillSetting
className={`shrink-0 group-hover:!text-primary ${
pathname.includes("administration") &&
"!text-primary"
}`}
/>
<span
className={`text-black ${
pathname.includes("notifications") &&
"font-bold !text-primary"
} pl-3 dark:text-[#506690] dark:group-hover:text-white-dark`}
>
Administration
</span>
</div>
</Link>
</li>
</ul>
</li>
</ul>
</PerfectScrollbar>
</div>
</nav>
</div>
);
};
export default Sidebar;
Editor is loading...
Leave a Comment