import Image from "next/image"; import Link from "next/link"; import { useRouter } from "next/router"; import React from "react"; import { useSelector } from "react-redux"; export const GenericSidebar = ({ isRoute }) => { const router = useRouter(); const { loadedUser, error } = useSelector(state => state.loadedUser); const VenderRoutes = () => { return ( <ul> <li className={router.pathname === "/vendor/dashboard" ? "active" : ""}> <Link href="/vendor/dashboard"> <span className="d-flex cursor-pointer"> <Image className="" alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" /> <div className="mx-2">Dashboard</div> </span> </Link> </li> {loadedUser && loadedUser.approved == "approved" && ( <li className={router.pathname === "/vendor/activity-details" ? "active" : ""}> <Link href="/vendor/activity-details"> <span className="d-flex cursor-pointer"> <Image className="" alt="" width={25} height={18} src="/images/vendor/add-activity.svg" /> <div className="mx-2">Add Activity</div> </span> </Link> </li> )} <li className={router.pathname === "/vendor/business-details" ? "active" : ""}> <Link href="/vendor/business-details"> <span className="d-flex cursor-pointer"> <Image className="" alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" /> <div className="mx-2">Business Details</div> </span> </Link> </li> <li className={router.pathname === "/vendor/enquiries" ? "active" : ""}> <Link href="/vendor/enquiries"> <span className="d-flex cursor-pointer"> <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" /> <div className="mx-2">Enquiries</div> </span> </Link> </li> <li className={router.pathname === "/vendor/activities" ? "active" : ""}> <Link href="/vendor/activities"> <span className="d-flex cursor-pointer"> <Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" /> <div className="mx-2">Activities</div> </span> </Link> </li> <li className={router.pathname === "/vendor/reviews" ? "active" : ""}> <Link href="/vendor/reviews"> <span className="d-flex cursor-pointer"> <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" /> <div className="mx-2">Reviews</div> </span> </Link> </li> </ul> ); }; const AdminRoutes = () => { return ( <ul> <li className={router.pathname === "/admin/activities" ? "active" : ""}> <Link href="/admin/activities"> <span className="d-flex cursor-pointer"> <Image className="" alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" /> <div className="mx-2">Activities</div> </span> </Link> </li> <li className={router.pathname === "/admin/vendors" ? "active" : ""}> <Link href="/admin/vendors"> <span className="d-flex cursor-pointer"> <Image className="" alt="" width={25} height={18} src="/images/admin/icon-user.svg" /> <div className="mx-2">Vendor</div> </span> </Link> </li> <li className={router.pathname === "/admin/giftcards" ? "active" : ""}> <Link href="/admin/giftcards"> <span className="d-flex cursor-pointer"> <Image className="" alt="" width={22} height={15} src="/images/admin/icon-gift.svg" /> <div className="mx-2">Gift Card</div> </span> </Link> </li> <li className={router.pathname === "/admin/reviews" ? "active" : ""}> <Link href="/admin/reviews"> <span className="d-flex cursor-pointer"> <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" /> <div className="mx-2">Reviews</div> </span> </Link> </li> <li className={router.pathname === "/admin/contact-us-leads" ? "active" : ""}> <Link href="/admin/contact-us-leads"> <span className="d-flex cursor-pointer"> <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" /> <div className="mx-2">Contact Us Leads</div> </span> </Link> </li> <li className={router.pathname === "/admin/enquiries" ? "active" : ""}> <Link prefetch href="/admin/enquiries"> <span className="d-flex cursor-pointer"> <Image alt="" width={22} height={15} src="/images/admin/icon-gift.svg" /> <div className="mx-2">Enquiries</div> </span> </Link> </li> </ul> ); }; return ( <div className="h-100 d-flex flex-column justify-content-between bg-z-primary primary-sidebar" style={{ width: "15%", boxShadow: "8px 0px 16px -15px rgba(0,0,0,0.25)", "-webkit-box-shadow": "8px 0px 16px -15px rgba(0,0,0,0.25)", "-moz-box-shadow": "8px 0px 16px -15px rgba(0,0,0,0.25)" }} > {isRoute === "vendor" && <VenderRoutes />} {isRoute === "admin" && <AdminRoutes />} <div className="px-3 py-2" style={{ borderInlineStart: "4px solid #393e49" }} > <p className="text-white m-0" style={{ fontSize: 16 }}> {isRoute === "admin" ? "Admin" : "Vendor"} </p> </div> </div> ); };