196 lines
11 KiB
JavaScript
196 lines
11 KiB
JavaScript
import { Link } from "@inertiajs/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { FaBookOpenReader } from "react-icons/fa6";
|
|
import { IoBookOutline } from "react-icons/io5";
|
|
import { MdOutlineCategory } from "react-icons/md";
|
|
|
|
const SidebarAdmin = ({ showSidebar, setShowSidebar, active = "" }) => {
|
|
const [collapseInventory, setCollapseInventory] = useState(false);
|
|
const [collapseActivity, setCollapseActivity] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
active == "admin.item" ||
|
|
active == "admin.select.room" ||
|
|
active == "admin.room"
|
|
) {
|
|
setCollapseInventory(true);
|
|
}
|
|
|
|
if (active == "admin.checkout" || active == "admin.retur") {
|
|
setCollapseActivity(true);
|
|
}
|
|
|
|
return () => {
|
|
setCollapseInventory(false);
|
|
setCollapseActivity(false);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`h-[100dvh] z-[99] bg-slate-900 flex max-w-[90%] md:min-w-0 w-[400px] md:w-[200px] lg:w-[300px] fixed ${
|
|
showSidebar ? "translate-x-0" : "-translate-x-[100%]"
|
|
} md:translate-x-0 text-[20px] overflow-y-auto duration-300 max-w-[90%] ease-in-out flex-col px-[34px] py-[22px] custom-scrollbar-sidebar`}
|
|
>
|
|
<div className="flex mb-[32px] flex-row gap-4 items-center mt-12">
|
|
<span className="font-semibold text-[16px] md:text-base flex items-center gap-3">
|
|
<FaBookOpenReader size={18} className="text-white" />
|
|
<span className="text-white text-[20px] md:text-base flex-1">
|
|
Rumah Baca Kita
|
|
</span>
|
|
</span>
|
|
</div>
|
|
{/* <div className="h-[71px]"></div> */}
|
|
<p className="text-gray-200 text-xs py-4">Menu</p>
|
|
<Link href="/admin/">
|
|
<div
|
|
className={`flex w-full items-center gap-4 py-4 md:py-2 ${
|
|
active == "Dashboard"
|
|
? "fill-white"
|
|
: "fill-gray-400"
|
|
}`}
|
|
>
|
|
<svg
|
|
width="17"
|
|
height="17"
|
|
viewBox="0 0 17 17"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M5.37505 0.924988H3.50005C2.81712 0.924988 2.16215 1.19629 1.67925 1.67919C1.19635 2.1621 0.925049 2.81706 0.925049 3.49999V5.37499C0.925049 6.05792 1.19635 6.71288 1.67925 7.19579C2.16215 7.67869 2.81712 7.95001 3.50005 7.95001H5.37505C6.05798 7.95001 6.71294 7.67869 7.19585 7.19579C7.67875 6.71288 7.95007 6.05792 7.95007 5.37499V3.49999C7.95007 2.81706 7.67875 2.1621 7.19585 1.67919C6.71294 1.19629 6.05798 0.924988 5.37505 0.924988ZM6.55005 5.37499C6.55005 5.68662 6.42625 5.98549 6.2059 6.20584C5.98555 6.42619 5.68668 6.54999 5.37505 6.54999H3.50005C3.18842 6.54999 2.88955 6.42619 2.6692 6.20584C2.44885 5.98549 2.32505 5.68662 2.32505 5.37499V3.49999C2.32505 3.18836 2.44885 2.88949 2.6692 2.66914C2.88955 2.44879 3.18842 2.32499 3.50005 2.32499H5.37505C5.68668 2.32499 5.98555 2.44879 6.2059 2.66914C6.42625 2.88949 6.55005 3.18836 6.55005 3.49999V5.37499Z"
|
|
strokeWidth="0.2"
|
|
/>
|
|
<path
|
|
d="M13.5 0.924988H11.625C10.9421 0.924988 10.2871 1.19629 9.80425 1.67919C9.32132 2.1621 9.05005 2.81706 9.05005 3.49999V5.37499C9.05005 6.05792 9.32132 6.71288 9.80425 7.19579C10.2871 7.67869 10.9421 7.95001 11.625 7.95001H13.5C14.183 7.95001 14.8379 7.67869 15.3208 7.19579C15.8037 6.71288 16.075 6.05792 16.075 5.37499V3.49999C16.075 2.81706 15.8037 2.1621 15.3208 1.67919C14.8379 1.19629 14.183 0.924988 13.5 0.924988ZM14.675 5.37499C14.675 5.68662 14.5512 5.98549 14.3309 6.20584C14.1105 6.42619 13.8116 6.54999 13.5 6.54999H11.625C11.3134 6.54999 11.0145 6.42619 10.7942 6.20584C10.5738 5.98549 10.45 5.68662 10.45 5.37499V3.49999C10.45 3.18836 10.5738 2.88949 10.7942 2.66914C11.0145 2.44879 11.3134 2.32499 11.625 2.32499H13.5C13.8116 2.32499 14.1105 2.44879 14.3309 2.66914C14.5512 2.88949 14.675 3.18836 14.675 3.49999V5.37499Z"
|
|
strokeWidth="0.2"
|
|
/>
|
|
<path
|
|
d="M5.37505 9.04999H3.50005C2.81712 9.04999 2.16215 9.32134 1.67925 9.80419C1.19635 10.2871 0.925049 10.9421 0.925049 11.625V13.5C0.925049 14.183 1.19635 14.8379 1.67925 15.3208C2.16215 15.8037 2.81712 16.075 3.50005 16.075H5.37505C6.05798 16.075 6.71294 15.8037 7.19585 15.3208C7.67875 14.8379 7.95007 14.183 7.95007 13.5V11.625C7.95007 10.9421 7.67875 10.2871 7.19585 9.80419C6.71294 9.32134 6.05798 9.04999 5.37505 9.04999ZM6.55005 13.5C6.55005 13.8117 6.42625 14.1105 6.2059 14.3309C5.98555 14.5512 5.68668 14.675 5.37505 14.675H3.50005C3.18842 14.675 2.88955 14.5512 2.6692 14.3309C2.44885 14.1105 2.32505 13.8117 2.32505 13.5V11.625C2.32505 11.3134 2.44885 11.0145 2.6692 10.7942C2.88955 10.5738 3.18842 10.45 3.50005 10.45H5.37505C5.68668 10.45 5.98555 10.5738 6.2059 10.7942C6.42625 11.0145 6.55005 11.3134 6.55005 11.625V13.5Z"
|
|
strokeWidth="0.2"
|
|
/>
|
|
<path
|
|
d="M13.5 9.04999H11.625C10.9421 9.04999 10.2871 9.32134 9.80425 9.80419C9.32132 10.2871 9.05005 10.9421 9.05005 11.625V13.5C9.05005 14.183 9.32132 14.8379 9.80425 15.3208C10.2871 15.8037 10.9421 16.075 11.625 16.075H13.5C14.183 16.075 14.8379 15.8037 15.3208 15.3208C15.8037 14.8379 16.075 14.183 16.075 13.5V11.625C16.075 10.9421 15.8037 10.2871 15.3208 9.80419C14.8379 9.32134 14.183 9.04999 13.5 9.04999ZM14.675 13.5C14.675 13.8117 14.5512 14.1105 14.3309 14.3309C14.1105 14.5512 13.8116 14.675 13.5 14.675H11.625C11.3134 14.675 11.0145 14.5512 10.7942 14.3309C10.5738 14.1105 10.45 13.8117 10.45 13.5V11.625C10.45 11.3134 10.5738 11.0145 10.7942 10.7942C11.0145 10.5738 11.3134 10.45 11.625 10.45H13.5C13.8116 10.45 14.1105 10.5738 14.3309 10.7942C14.5512 11.0145 14.675 11.3134 14.675 11.625V13.5Z"
|
|
strokeWidth="0.2"
|
|
/>
|
|
</svg>
|
|
<span
|
|
className={`text-[16px] ${
|
|
active == "Dashboard"
|
|
? "text-white"
|
|
: "text-gray-400"
|
|
}`}
|
|
>
|
|
Dashboard
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link href="/admin/user">
|
|
<div
|
|
className={`flex w-full items-center gap-4 py-4 md:py-2 ${
|
|
active == "Users"
|
|
? "stroke-white"
|
|
: "stroke-gray-400"
|
|
}`}
|
|
>
|
|
<svg
|
|
width="15"
|
|
height="17"
|
|
viewBox="0 0 14 17"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M13 16C13 13.0795 9.83696 10.7054 7 10.7054C4.16303 10.7054 1 13.0795 1 16M7 8.05892C7.90928 8.05892 8.78133 7.68707 9.42429 7.02516C10.0672 6.36326 10.4285 5.46553 10.4285 4.52946C10.4285 3.59339 10.0672 2.69566 9.42429 2.03375C8.78133 1.37185 7.90928 1 7 1C6.09072 1 5.21867 1.37185 4.57571 2.03375C3.93275 2.69566 3.57154 3.59339 3.57154 4.52946C3.57154 5.46553 3.93275 6.36326 4.57571 7.02516C5.21867 7.68707 6.09072 8.05892 7 8.05892Z"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
|
|
<span
|
|
className={`text-[16px] ${
|
|
active == "Users"
|
|
? "text-white"
|
|
: "text-gray-400"
|
|
}`}
|
|
>
|
|
Users
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link href="/admin/category">
|
|
<div
|
|
className={`flex w-full items-center gap-4 py-4 md:py-2 ${
|
|
active == "Category"
|
|
? "stroke-white"
|
|
: "stroke-gray-400"
|
|
}`}
|
|
>
|
|
<MdOutlineCategory
|
|
className={`${
|
|
active == "Category"
|
|
? "text-white"
|
|
: "text-gray-400"
|
|
}`}
|
|
/>
|
|
|
|
<span
|
|
className={`text-[16px] ${
|
|
active == "Category"
|
|
? "text-white"
|
|
: "text-gray-400"
|
|
}`}
|
|
>
|
|
Category
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link href="/admin/materi">
|
|
<div
|
|
className={`flex w-full items-center gap-4 py-4 md:py-2 ${
|
|
active == "Materi"
|
|
? "stroke-white"
|
|
: "stroke-gray-400"
|
|
}`}
|
|
>
|
|
<IoBookOutline
|
|
className={`${
|
|
active == "Materi"
|
|
? "text-white"
|
|
: "text-gray-400"
|
|
}`}
|
|
/>
|
|
|
|
<span
|
|
className={`text-[16px] ${
|
|
active == "Materi"
|
|
? "text-white"
|
|
: "text-gray-400"
|
|
}`}
|
|
>
|
|
Materi
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
|
|
</div>
|
|
<div
|
|
onClick={setShowSidebar}
|
|
className={`duration-500 ease-in-out min-h-[100dvh] w-screen flex z-[90] ${
|
|
showSidebar
|
|
? "bg-black/50 backdrop-blur-sm pointer-events-auto"
|
|
: "bg-black/0 backdrop-blur-none pointer-events-none"
|
|
} fixed`}
|
|
></div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SidebarAdmin;
|