芝麻web文件管理V1.00

编辑当前文件:/home/qrafawbu/reginaeigbe.com/folder/admin/tmp/resources/js/Admin/Components/Sidebar/Index.jsx

import { IonIcon } from "@ionic/react";
import {
    mic,
    search,
    ellipsisHorizontal,
    cube,
    newspaperOutline,
    chatboxOutline,
    fileTray,
    peopleOutline,
    idCardOutline,
    chevronForward,
    starOutline,
    pencilOutline,
    shieldOutline,
    imageOutline,
    mailOpenOutline,
    sendOutline,
    cardOutline,
    cogOutline,
    cashOutline,
} from "ionicons/icons";
import { Link, usePage } from "@inertiajs/react";
import { useState } from "react";
import hasPermission from "@/Admin/Utils/hasPermission";

export default function Sidebar() {
 const { auth } = usePage().props;
 const [toggle, setToggle] = useState(false);
 const [expandMenu, setExpandMenu] = useState({
 postMenu:
 !!route().current("admin.posts.*") ||
 !!route().current("admin.categories.*") ||
 !!route().current("admin.tags.*"),
 pageMenu: !!route().current("admin.pages.*"),
 appearanceMenu:
 !!route().current("admin.themes.*") ||
 !!route().current("admin.menus.*"),
 portfolioMenu: !!route().current("admin.portfolios.*"),
 serviceMenu: !!route().current("admin.services.*"),
 caseStudyMenu: !!route().current("admin.case.study.*"),
 teamMenu: !!route().current("admin.teams.*"),
 testimonialMenu: !!route().current("admin.testimonials.*"),
 userMenu:
 !!route().current("admin.users.*") ||
 !!route().current("admin.roles.permissions.*"),
 settingsMenu: !!route().current("admin.settings.*"),
 });
 const handleToggle = () => {
 var body = document.body;
 if (toggle) {
 setToggle(false);
 body.classList.remove("yoo-sidebar-active");
 } else {
 setToggle(true);
 body.classList.add("yoo-sidebar-active");
 }
 };
 return (
 <>
 {/* .yoo-header */}
 <div className="yoo-sidebarheader-toggle" onClick={handleToggle}>
 <div className="yoo-button-bar1" />
 <div className="yoo-button-bar2" />
 <div className="yoo-button-bar3" />
 </div>
 {/* .yoo-sidebarheader-toggle */}
 <div className="yoo-sidebarheader yoo-with-boxed-icon">
 <div className="yoo-sidebarheader-in">
 <div className="yoo-sidebar-nav">
 <ul className="yoo-sidebar-nav-list yoo-mp0">
 <li
 className={`yoo-sidebar-has-children ${
 route().current("admin.dashboard") &&
 "active"
 }`}
 >
 <Link href={route("admin.dashboard")}>
 
 
 <IonIcon icon={cube} />
 
 
 Dashboard
 
 
 </Link>
 </li>
 <li
 className="yoo-sidebar-has-children"
 onClick={() =>
 setExpandMenu({
 ...expandMenu,
 postMenu: !expandMenu.postMenu,
 })
 }
 >
 <a href="#">
 
 
 <IonIcon icon={newspaperOutline} />
 
 
 Posts
 
 
 </a>
 <ul
 className="yoo-sidebar-nav-dropdown"
 style={
 expandMenu.postMenu
 ? { display: "block" }
 : { display: "none" }
 }
 >
 {hasPermission("posts.index") && (
 <li
 className={`${
 route().current(
 "admin.posts.index"
 ) && "active"
 }`}
 >
 <Link
 href={route(
 "admin.posts.index"
 )}
 >
 
 
 All posts
 
 
 </Link>
 </li>
 )}
 {hasPermission("posts.create") && (
 <li
 className={`${
 route().current(
 "admin.posts.create"
 ) && "active"
 }`}
 >
 <Link
 href={route(
 "admin.posts.create"
 )}
 >
 
 
 Add new
 
 
 </Link>
 </li>
 )}
 {hasPermission("post_category.index") && (
 <li
 className={`${
 route().current(
 "admin.categories.index"
 ) && "active"
 }`}
 >
 <Link
 href={route(
 "admin.categories.index"
 )}
 >
 
 
 Categories
 
 
 </Link>
 </li>
 )}
 {hasPermission("post_tags.index") && (
 <li
 className={`${
 route().current(
 "admin.tags.index"
 ) && "active"
 }`}
 >
 <Link
 href={route("admin.tags.index")}
 >
 
 
 Tags
 
 
 </Link>
 </li>
 )}
 </ul>

<IonIcon
 icon={chevronForward}
 role="img"
 className="md hydrated"
 aria-label="chevron forward"
 />
 
 </li>
 {hasPermission("comments.index") && (
 <li
 className={`yoo-sidebar-has-children ${
 route().current("admin.comments.*") &&
 "active"
 }`}
 >
 <Link href={route("admin.comments.index")}>
 
 
 <IonIcon
 icon={chatboxOutline}
 />
 
 
 Comments
 
 
 </Link>
 </li>
 )}
 {hasPermission("subscribers.index") && (
 <li
 className={`yoo-sidebar-has-children ${
 route().current(
 "admin.subscribers.*"
 ) && "active"
 }`}
 >
 <Link
 href={route("admin.subscribers.index")}
 >
 
 
 <IonIcon
 icon={mailOpenOutline}
 />
 
 
 Subscribers
 
 
 </Link>
 </li>
 )}
 {hasPermission("contacts.index") && (
 <li
 className={`yoo-sidebar-has-children ${
 route().current("admin.contacts.*") &&
 "active"
 }`}
 >
 <Link href={route("admin.contacts.index")}>
 
 
 <IonIcon icon={sendOutline} />
 
 
 Contacts
 
 
 </Link>
 </li>
 )}
 <li
 className={`yoo-sidebar-has-children ${
 route().current("admin.pricing.plans.*") &&
 "active"
 }`}
 >
 <Link href={route("admin.pricing.plans.index")}>
 
 
 <IonIcon icon={cashOutline} />
 
 
 Pricing Plan
 
 
 </Link>
 </li>
 <li
 className={`yoo-sidebar-has-children ${
 route().current(
 "admin.payment.history.*"
 ) && "active"
 }`}
 >
 <Link
 href={route("admin.payment.history.index")}
 >
 
 
 <IonIcon icon={cardOutline} />
 
 
 Payment History
 
 
 </Link>
 </li>
 <li
 className="yoo-sidebar-has-children"
 onClick={() =>
 setExpandMenu({
 ...expandMenu,
 portfolioMenu:
 !expandMenu.portfolioMenu,
 })
 }
 >
 <a href="#">
 
 
 <IonIcon icon={idCardOutline} />
 
 
 Portfolios
 
 
 </a>
 <ul
 className="yoo-sidebar-nav-dropdown"
 style={
 expandMenu.portfolioMenu
 ? { display: "block" }
 : { display: "none" }
 }
 >
 {hasPermission("portfolios.index") && (
 <li
 className={`${
 route().current(
 "admin.portfolios.index"
 ) && "active"
 }`}
 >
 <Link
 href={route(
 "admin.portfolios.index"
 )}
 >
 
 
 All Portfolio
 
 
 </Link>
 </li>
 )}
 {hasPermission("portfolios.create") && (
 <li
 className={`${
 route().current(
 "admin.portfolios.create"
 ) && "active"
 }`}
 >
 <Link
 href={route(
 "admin.portfolios.create"
 )}
 >
 
 
 Add new
 
 
 </Link>
 </li>
 )}
 {hasPermission(
 "portfolio_categories.index"
 ) && (
 <li
 className={`${
 route().current(
 "admin.portfolios.categories.index"
 ) && "active"
 }`}
 >
 <Link
 href={route(
 "admin.portfolios.categories.index"
 )}
 >
 
 
 Categories
 
 
 </Link>
 </li>
 )}
 </ul>

<IonIcon
 icon={chevronForward}
 role="img"
 className="md hydrated"
 aria-label="chevron forward"
 />
 
 </li>
 <li
 className="yoo-sidebar-has-children"
 onClick={() =>
 setExpandMenu({
 ...expandMenu,
 pageMenu: !expandMenu.pageMenu,
 })
 }
 >
 <a href="#">
 
 
 <IonIcon icon={fileTray} />
 
 
 Pages
 
 
 </a>
 <ul
 className="yoo-sidebar-nav-dropdown"
 style={
 expandMenu.pageMenu
 ? { display: "block" }
 : { display: "none" }
 }
 >
 {hasPermission("pages.index") && (
 <li
 className={
 route().current(
 "admin.pages.index"
 )
 ? "active"
 : ""
 }
 >
 <Link
 href={route(
 "admin.pages.index"
 )}
 >
 
 
 All Pages
 
 
 </Link>
 </li>
 )}
 {hasPermission("pages.create") && (
 <li>
 <Link
 href={route(
 "admin.pages.create"
 )}
 >
 
 
 Add New Page
 
 
 </Link>
 </li>
 )}
 </ul>
 
 <IonIcon
 icon={chevronForward}
 role="img"
 className="md hydrated"
 aria-label="chevron forward"
 />
 
 </li>
 <li
 className="yoo-sidebar-has-children"
 onClick={() =>
 setExpandMenu({
 ...expandMenu,
 appearanceMenu:
 !expandMenu.appearanceMenu,
 })
 }
 >
 <a href="#">
 
 
 <IonIcon icon={pencilOutline} />
 
 
 Appearance
 
 
 </a>
 <ul
 className="yoo-sidebar-nav-dropdown"
 style={
 expandMenu.appearanceMenu
 ? { display: "block" }
 : { display: "none" }
 }
 >
 {hasPermission("appearance.themes") && (
 <li
 className={
 route().current(
 "admin.themes.index"
 )
 ? "active"
 : ""
 }
 >
 <Link
 href={route(
 "admin.themes.index"
 )}
 >
 
 
 Themes
 
 
 </Link>
 </li>
 )}
 {hasPermission("appearance.customize") && (
 <li>
 <Link
 href={route(
 "admin.customize.customize"
 )}
 >
 
 
 Customize
 
 
 </Link>
 </li>
 )}
 {hasPermission("appearance.menus") && (
 <li
 className={
 route().current(
 "admin.menus.index"
 )
 ? "active"
 : ""
 }
 >
 <Link
 href={route(
 "admin.menus.index"
 )}
 >
 
 
 Menus
 
 
 </Link>
 </li>
 )}
 </ul>
 
 <IonIcon
 icon={chevronForward}
 role="img"
 className="md hydrated"
 aria-label="chevron forward"
 />
 
 </li>
 <li
 className="yoo-sidebar-has-children"
 onClick={() =>
 setExpandMenu({
 ...expandMenu,
 userMenu: !expandMenu.userMenu,
 })
 }
 >
 <a href="#">
 
 
 <IonIcon icon={peopleOutline} />
 
 
 Users
 
 
 </a>
 <ul
 className="yoo-sidebar-nav-dropdown"
 style={
 expandMenu.userMenu
 ? { display: "block" }
 : { display: "none" }
 }
 >
 {hasPermission("users.index") && (
 <li
 className={
 route().current(
 "admin.users.index"
 )
 ? "active"
 : ""
 }
 >
 <Link
 href={route(
 "admin.users.index"
 )}
 >
 
 
 All Users
 
 
 </Link>
 </li>
 )}
 {hasPermission("users.create") && (
 <li
 className={
 route().current(
 "admin.users.create"
 )
 ? "active"
 : ""
 }
 >
 <Link
 href={route(
 "admin.users.create"
 )}
 >
 
 
 Add User
 
 
 </Link>
 </li>
 )}
 {auth.user.role_name === "admin" && (
 <li
 className={
 route().current(
 "admin.roles.permissions.index"
 )
 ? "active"
 : ""
 }
 >
 <Link
 href={route(
 "admin.roles.permissions.index"
 )}
 >
 
 
 Role & Permission
 
 
 </Link>
 </li>
 )}
 </ul>
 
 <IonIcon
 icon={chevronForward}
 role="img"
 className="md hydrated"
 aria-label="chevron forward"
 />
 
 </li>

<li
 className="yoo-sidebar-has-children"
 onClick={() =>
 setExpandMenu({
 ...expandMenu,
 settingsMenu: !expandMenu.settingsMenu,
 })
 }
 >
 <a href="#">
 
 
 <IonIcon icon={cogOutline} />
 
 
 Settings
 
 
 </a>
 <ul
 className="yoo-sidebar-nav-dropdown"
 style={
 expandMenu.settingsMenu
 ? { display: "block" }
 : { display: "none" }
 }
 >
 <li
 className={`${
 route().current(
 "admin.settings.payment.gateway"
 ) && "active"
 }`}
 >
 <Link
 href={route(
 "admin.settings.payment.gateway"
 )}
 >
 
 
 Payment Gateways
 
 
 </Link>
 </li>
 <li
 className={`${
 route().current(
 "admin.settings.smtp.setting"
 ) && "active"
 }`}
 >
 <Link
 href={route(
 "admin.settings.smtp.setting"
 )}
 >
 
 
 SMTP Settings
 
 
 </Link>
 </li>
 </ul>

<IonIcon
 icon={chevronForward}
 role="img"
 className="md hydrated"
 aria-label="chevron forward"
 />
 
 </li>
 </ul>
 {/* .yoo-sidebar-nav-list */}
 </div>
 </div>
 </div>
 </>
 );
}