791 lines
33 KiB
TypeScript
791 lines
33 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { Sidebar } from "flowbite-react";
|
|
import { useEffect, useState } from "react";
|
|
import classNames from "classnames";
|
|
import { css } from "@emotion/css";
|
|
import { FaChevronDown, FaChevronUp } from "react-icons/fa";
|
|
import { SidebarLinkBetter } from "../ui/link-better";
|
|
import { detectCase } from "@/lib/utils/detectCase";
|
|
import { useLocal } from "@/lib/utils/use-local";
|
|
import { get_user } from "@/lib/utils/get_user";
|
|
import { siteurl } from "@/lib/utils/siteurl";
|
|
import { ScrollArea } from "../ui/scroll-area";
|
|
import { LuChevronsLeftRight } from "react-icons/lu";
|
|
import { Popover } from "../Popover/Popover";
|
|
import { HiEye } from "react-icons/hi";
|
|
import { MdOutlineMoreVert } from "react-icons/md";
|
|
import api from "@/lib/utils/axios";
|
|
import { PiUserSwitch } from "react-icons/pi";
|
|
import { IoIosLogOut } from "react-icons/io";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "../ui/tooltip";
|
|
import ImageBetter from "../ui/Image";
|
|
|
|
interface TreeMenuItem {
|
|
title: string;
|
|
href?: string;
|
|
children?: TreeMenuItem[];
|
|
icon?: any;
|
|
}
|
|
|
|
interface TreeMenuProps {
|
|
data: TreeMenuItem[];
|
|
minimaze: () => void;
|
|
onClick?: () => void;
|
|
mini: boolean;
|
|
}
|
|
|
|
const SidebarBetterTree: React.FC<TreeMenuProps> = ({
|
|
data,
|
|
minimaze,
|
|
mini,
|
|
onClick,
|
|
}) => {
|
|
const [currentPage, setCurrentPage] = useState("");
|
|
const [notification, setNotification] = useState(false as boolean);
|
|
const [profile, setProfile] = useState(false as boolean);
|
|
const local = useLocal({
|
|
data: data,
|
|
ready: false as boolean,
|
|
});
|
|
useEffect(() => {
|
|
if (typeof location === "object") {
|
|
const newPage = window.location.pathname;
|
|
setCurrentPage(newPage);
|
|
}
|
|
const run = async () => {
|
|
local.ready = false;
|
|
local.render();
|
|
|
|
setTimeout(() => {
|
|
local.ready = true;
|
|
local.render();
|
|
}, 1000);
|
|
};
|
|
if (typeof window === "object") {
|
|
run();
|
|
}
|
|
}, []);
|
|
|
|
const isChildActive = (items: TreeMenuItem[]): boolean => {
|
|
return items.some((item) => {
|
|
if (item.href && currentPage.startsWith(item.href)) return true;
|
|
if (item.children) return isChildActive(item.children); // Rekursif
|
|
return false;
|
|
});
|
|
};
|
|
const renderTree = (items: TreeMenuItem[], depth: number = 0) => {
|
|
return items.map((item, index) => {
|
|
const hasChildren = item.children && item.children.length > 0;
|
|
let isActive = item.href && detectCase(currentPage, item.href);
|
|
let isParentActive = hasChildren && isChildActive(item.children!);
|
|
const [isOpen, setIsOpen] = useState(isParentActive);
|
|
useEffect(() => {
|
|
if (isParentActive) {
|
|
setIsOpen(true);
|
|
}
|
|
}, [isParentActive]);
|
|
const itemStyle = {
|
|
paddingLeft:
|
|
mini && !depth
|
|
? "10px"
|
|
: !hasChildren && !depth
|
|
? "13px"
|
|
: !mini
|
|
? `${depth * 16}px`
|
|
: "0px",
|
|
};
|
|
return (
|
|
<React.Fragment key={item.href || item.title || index}>
|
|
{hasChildren ? (
|
|
<li className="relative ">
|
|
<div className="w-full flex flex-row items-center justify-center">
|
|
<div
|
|
className={cx(
|
|
mini ? "flex flex-row" : "flex flex-row flex-grow"
|
|
)}
|
|
>
|
|
{mini && !depth ? (
|
|
<>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className={classNames(
|
|
"transition-all font-bold text-sidebar-label relative flex-row flex items-center cursor-pointer items-center text-base flex flex-row ",
|
|
isActive
|
|
? " text-base"
|
|
: " hover:bg-card-layer hover:shadow-md hover:text-primary",
|
|
mini
|
|
? "transition-all duration-200 justify-center ml-0 rounded-lg"
|
|
: "py-2.5 px-4 rounded-md flex-grow mx-2 pr-0",
|
|
!depth && !hasChildren ? "px-2" : "",
|
|
css`
|
|
& > span {
|
|
white-space: wrap !important;
|
|
}
|
|
`,
|
|
mini
|
|
? isParentActive
|
|
? "bg-linear-sidebar-active text-white font-normal p-1 shadow-md w-[50px]"
|
|
: isActive
|
|
? !depth
|
|
? "bg-linear-sidebar-active text-white font-normal p-1 shadow-md"
|
|
: " bg-layer text-primary font-bold p-1 "
|
|
: "text-primary bg-transparent p-1 hover:bg-card-layer hover:shadow-md w-[50px]"
|
|
: isActive
|
|
? !depth
|
|
? " bg-linear-sidebar-active font-bold text-white shadow-md "
|
|
: " bg-layer text-primary font-bold "
|
|
: "text-white"
|
|
)}
|
|
onClick={() => {
|
|
if (mini) {
|
|
minimaze();
|
|
}
|
|
setIsOpen(!isOpen);
|
|
}}
|
|
style={mini ? {} : itemStyle}
|
|
>
|
|
<div
|
|
className={cx(
|
|
"flex flex-row items-center flex-grow",
|
|
mini
|
|
? " justify-center rounded-md "
|
|
: " px-3",
|
|
mini
|
|
? isParentActive
|
|
? "bg-linear-sidebar-active text-white font-bold "
|
|
: "text-primary"
|
|
: isActive
|
|
? "font-bold "
|
|
: ""
|
|
)}
|
|
>
|
|
{!depth ? (
|
|
<div
|
|
className={classNames(
|
|
" w-8 h-8 text-center flex flex-row items-center justify-center",
|
|
!mini ? "mr-1 p-2 " : " text-lg ",
|
|
mini
|
|
? css`
|
|
background: transparent !important;
|
|
`
|
|
: ``
|
|
)}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
|
|
{!mini ? (
|
|
<>
|
|
<div className="pl-2 flex-grow text-xs line-clamp-2">
|
|
{item.title}
|
|
</div>
|
|
<div className="text-md px-1">
|
|
{isOpen ? (
|
|
<FaChevronUp />
|
|
) : (
|
|
<FaChevronDown />
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent
|
|
className="bg-linear-sidebar-active text-white border border-primary shadow-md transition-all "
|
|
side="right"
|
|
>
|
|
<p>{item.title}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div
|
|
className={classNames(
|
|
"transition-all font-bold text-sidebar-label relative flex-row flex items-center cursor-pointer items-center text-base flex flex-row ",
|
|
isActive
|
|
? " text-base"
|
|
: " hover:bg-card-layer hover:shadow-md hover:text-primary",
|
|
mini
|
|
? "transition-all duration-200 justify-center ml-0 rounded-lg"
|
|
: "py-2.5 px-4 rounded-md flex-grow mx-2 pr-0",
|
|
!depth && !hasChildren ? "px-2" : "",
|
|
css`
|
|
& > span {
|
|
white-space: wrap !important;
|
|
}
|
|
`,
|
|
mini
|
|
? isActive
|
|
? !depth
|
|
? "bg-linear-sidebar-active text-white font-normal p-1 shadow-md"
|
|
: " bg-layer text-primary font-bold p-1 "
|
|
: "text-primary bg-transparent p-1 hover:bg-card-layer hover:shadow-md w-[50px]"
|
|
: isActive
|
|
? !depth
|
|
? " bg-linear-sidebar-active font-bold text-white shadow-md "
|
|
: " bg-layer text-primary font-bold "
|
|
: "text-sidebar-label"
|
|
)}
|
|
onClick={() => {
|
|
if (mini) {
|
|
minimaze();
|
|
}
|
|
setIsOpen(!isOpen);
|
|
}}
|
|
style={mini ? {} : itemStyle}
|
|
>
|
|
<div
|
|
className={cx(
|
|
"flex flex-row items-center flex-grow",
|
|
mini ? " justify-center rounded-md " : " px-3",
|
|
mini
|
|
? isParentActive
|
|
? "bg-linear-sidebar-active text-white font-bold "
|
|
: "text-primary"
|
|
: isActive
|
|
? "font-bold "
|
|
: ""
|
|
)}
|
|
>
|
|
{!depth ? (
|
|
<div
|
|
className={classNames(
|
|
" w-8 h-8 text-center flex flex-row items-center justify-center",
|
|
!mini ? "mr-1 p-2 " : " text-lg ",
|
|
mini
|
|
? css`
|
|
background: transparent !important;
|
|
`
|
|
: ``
|
|
)}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
|
|
{!mini ? (
|
|
<>
|
|
<div className="pl-2 flex-grow text-xs line-clamp-2">
|
|
{item.title}
|
|
</div>
|
|
<div className="text-md px-1">
|
|
{isOpen ? <FaChevronUp /> : <FaChevronDown />}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<Sidebar.ItemGroup
|
|
className={classNames(
|
|
"border-none mt-0",
|
|
isOpen ? "" : "hidden",
|
|
mini ? "hidden" : ""
|
|
)}
|
|
>
|
|
{renderTree(item.children!, depth + 1)}
|
|
</Sidebar.ItemGroup>
|
|
</li>
|
|
) : (
|
|
<li className="relative">
|
|
<div className="w-full flex flex-row items-center justify-center">
|
|
<div
|
|
className={cx(
|
|
mini ? "flex flex-row" : "flex flex-row w-full"
|
|
)}
|
|
>
|
|
{mini ? (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div>
|
|
<SidebarLinkBetter
|
|
href={item.href}
|
|
onClick={() => {
|
|
if (item?.href) setCurrentPage(item.href);
|
|
if (typeof onClick === "function") {
|
|
onClick();
|
|
}
|
|
}}
|
|
className={classNames(
|
|
"transition-all font-bold relative flex-row flex items-center cursor-pointer items-center text-base flex flex-row ",
|
|
isActive
|
|
? " text-base"
|
|
: "hover:bg-card-layer hover:shadow-md hover:text-primary",
|
|
mini
|
|
? "transition-all duration-200 justify-center ml-0 rounded-lg"
|
|
: "py-2.5 px-4 rounded-md flex-grow mx-2",
|
|
!depth && !hasChildren ? "px-2" : "",
|
|
css`
|
|
& > span {
|
|
white-space: wrap !important;
|
|
}
|
|
`,
|
|
mini
|
|
? isActive
|
|
? !depth
|
|
? "bg-linear-sidebar-active text-white font-normal p-1 shadow-md"
|
|
: " bg-layer text-primary font-bold p-1 "
|
|
: "text-primary bg-transparent p-1 hover:bg-card-layer hover:shadow-md"
|
|
: isActive
|
|
? !depth
|
|
? " bg-linear-sidebar-active font-bold text-white shadow-md"
|
|
: " bg-linear-sidebar-active text-white font-bold "
|
|
: "text-sidebar-label"
|
|
)}
|
|
style={mini ? {} : itemStyle} // Terapkan gaya berdasarkan depth
|
|
>
|
|
<div className="flex flex-row items-center">
|
|
{!depth ? (
|
|
<div
|
|
className={classNames(
|
|
" text-dark-700 w-8 h-8 rounded-lg text-center flex flex-row items-center justify-center",
|
|
!mini ? "mr-1 p-2" : " text-lg"
|
|
)}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{!mini ? (
|
|
<>
|
|
<div className="pl-2 text-xs line-clamp-1">
|
|
{item.title}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
</SidebarLinkBetter>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent
|
|
className="bg-linear-sidebar-active text-white border border-primary shadow-md transition-all "
|
|
side="right"
|
|
>
|
|
<p>{item.title}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
) : (
|
|
<SidebarLinkBetter
|
|
href={item.href}
|
|
onClick={() => {
|
|
if (item?.href) setCurrentPage(item.href);
|
|
if (typeof onClick === "function") {
|
|
onClick();
|
|
}
|
|
}}
|
|
className={classNames(
|
|
"transition-all font-bold relative flex-row flex items-center cursor-pointer items-center text-base flex flex-row ",
|
|
isActive
|
|
? " text-base"
|
|
: "hover:bg-card-layer hover:shadow-md hover:text-primary",
|
|
mini
|
|
? "transition-all duration-200 justify-center ml-0 rounded-lg"
|
|
: "py-2.5 px-4 rounded-md flex-grow mx-2",
|
|
!depth && !hasChildren ? "px-2" : "",
|
|
css`
|
|
& > span {
|
|
white-space: wrap !important;
|
|
}
|
|
`,
|
|
mini
|
|
? isActive
|
|
? !depth
|
|
? "bg-linear-sidebar-active text-white font-normal p-1 shadow-md"
|
|
: " bg-layer text-primary font-bold p-1 "
|
|
: "text-primary bg-transparent p-1 hover:bg-card-layer hover:shadow-md"
|
|
: isActive
|
|
? !depth
|
|
? " bg-linear-sidebar-active font-bold text-white shadow-md"
|
|
: " bg-linear-sidebar-active text-white font-bold "
|
|
: "text-sidebar-label"
|
|
)}
|
|
style={mini ? {} : itemStyle} // Terapkan gaya berdasarkan depth
|
|
>
|
|
<div className="flex flex-row items-center">
|
|
{!depth ? (
|
|
<div
|
|
className={classNames(
|
|
" text-dark-700 w-8 h-8 rounded-lg text-center flex flex-row items-center justify-center",
|
|
!mini ? "mr-1 p-2" : " text-lg"
|
|
)}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{!mini ? (
|
|
<>
|
|
<div className="pl-2 text-xs line-clamp-1">
|
|
{item.title}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
</SidebarLinkBetter>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col flex-grow bg-white relative rounded-b-2xl">
|
|
<div
|
|
className={cx(
|
|
"hidden md:flex bg-linear-sidebar-active text-white p-1 md:absolute top-0 right-[-13px] cursor-pointer rounded-lg shadow-md",
|
|
css`
|
|
z-index: 1;
|
|
`
|
|
)}
|
|
onClick={() => {
|
|
minimaze();
|
|
localStorage.setItem("mini", !mini ? "true" : "false");
|
|
}}
|
|
>
|
|
<LuChevronsLeftRight />
|
|
</div>
|
|
<div className={classNames("flex flex-grow lg:!block ", {})}>
|
|
<Sidebar
|
|
aria-label="Sidebar with multi-level dropdown example"
|
|
className={classNames(
|
|
"relative pt-0 rounded-none w-full",
|
|
mini ? "w-20" : "md:w-64",
|
|
css`
|
|
> div {
|
|
border-radius: 0px;
|
|
background: transparent;
|
|
padding-top: 0;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
`
|
|
)}
|
|
>
|
|
<ScrollArea className="w-full h-full">
|
|
<div className="w-full h-full relative ">
|
|
<div className="flex h-full flex-col w-full">
|
|
<Sidebar.Items>
|
|
<Sidebar.ItemGroup
|
|
className={cx(
|
|
"border-none mt-0 pt-0 md:pt-4",
|
|
mini ? "flex flex-col gap-y-2" : ""
|
|
)}
|
|
>
|
|
{renderTree(data)}
|
|
</Sidebar.ItemGroup>
|
|
</Sidebar.Items>
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
</Sidebar>
|
|
</div>
|
|
<div className="flex flex-col gap-y-4">
|
|
<div
|
|
className={cx(
|
|
"flex flex-col flex-grow gap-y-2",
|
|
mini ? "justify-center" : "px-4"
|
|
)}
|
|
>
|
|
<div className="hidden md:flex flex-row justify-center flex-grow">
|
|
<Popover
|
|
classNameTrigger={cx("flex flex-row justify-center flex-grow")}
|
|
popoverClassName={cx(
|
|
"max-w-[24rem] bg-white shadow-lg rounded-lg"
|
|
)}
|
|
placement={"right-start"}
|
|
arrow={false}
|
|
className="rounded-md w-full "
|
|
onOpenChange={(open: any) => {
|
|
setNotification(open);
|
|
}}
|
|
open={notification}
|
|
content={
|
|
<div className="max-w-[24rem]">
|
|
<div className="block rounded-t-xl bg-gray-50 py-2 px-4 text-center text-base font-medium text-gray-700">
|
|
Notifications
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<a
|
|
href="#"
|
|
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<div className="w-full pl-3">
|
|
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
|
New message from
|
|
<span className="font-semibold text-gray-900 ">
|
|
Bonnie Green
|
|
</span>
|
|
: "Hey, what's up? All set for the presentation?"
|
|
</div>
|
|
<div className="text-md font-medium text-primary-700 ">
|
|
a few moments ago
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<div className="w-full pl-3">
|
|
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
|
New message from
|
|
<span className="font-semibold text-gray-900 ">
|
|
Bonnie Green
|
|
</span>
|
|
: "Hey, what's up? All set for the presentation?"
|
|
</div>
|
|
<div className="text-md font-medium text-primary-700 ">
|
|
a few moments ago
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<div className="w-full pl-3">
|
|
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
|
New message from
|
|
<span className="font-semibold text-gray-900 ">
|
|
Bonnie Green
|
|
</span>
|
|
: "Hey, what's up? All set for the presentation?"
|
|
</div>
|
|
<div className="text-md font-medium text-primary-700 ">
|
|
a few moments ago
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex border-y py-3 px-4 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<div className="w-full pl-3">
|
|
<div className="mb-1.5 text-md font-normal text-gray-500 ">
|
|
New message from
|
|
<span className="font-semibold text-gray-900 ">
|
|
Bonnie Green
|
|
</span>
|
|
: "Hey, what's up? All set for the presentation?"
|
|
</div>
|
|
<div className="text-md font-medium text-primary-700 ">
|
|
a few moments ago
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
className="block rounded-b-xl bg-gray-50 py-2 text-center text-base font-normal text-gray-900 hover:bg-gray-100 dark:bg-gray-700 dark:hover:underline"
|
|
>
|
|
<div className="inline-flex items-center gap-x-2">
|
|
<HiEye className="h-6 w-6" />
|
|
<span>View all</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
}
|
|
>
|
|
<div
|
|
className={cx(
|
|
"flex flex-row items-center gap-x-2 items-center text-sm rounded-md font-bold",
|
|
mini
|
|
? "justify-center text-primary w-50 p-1 px-2"
|
|
: "text-sidebar-label w-full p-2",
|
|
false ? "" : "hover:bg-card-layer hover:shadow-md"
|
|
)}
|
|
>
|
|
<div
|
|
className={classNames(
|
|
" w-8 h-8 text-center flex flex-row items-center justify-center ",
|
|
!mini ? "mr-1 p-2 " : " text-lg ",
|
|
mini
|
|
? css`
|
|
background: transparent !important;
|
|
`
|
|
: ``
|
|
)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={20}
|
|
height={20}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="none" stroke="currentColor" strokeWidth={2}>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M6 19v-9a6 6 0 0 1 6-6v0a6 6 0 0 1 6 6v9M6 19h12M6 19H4m14 0h2m-9 3h2"
|
|
></path>
|
|
<circle cx={12} cy={3} r={1}></circle>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
{!mini && "Notifications"}
|
|
</div>
|
|
</Popover>
|
|
</div>
|
|
|
|
<div
|
|
className={cx(
|
|
"flex flex-row w-full p-2 items-center gap-x-2 items-center text-white text-sm hidden",
|
|
mini ? "justify-center" : ""
|
|
)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={20}
|
|
height={20}
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g fill="currentColor">
|
|
<path d="M6.5 3.75c-.526 0-1.25.63-1.25 1.821V18.43c0 1.192.724 1.821 1.25 1.821h6.996a.75.75 0 1 1 0 1.5H6.5c-1.683 0-2.75-1.673-2.75-3.321V5.57c0-1.648 1.067-3.321 2.75-3.321h7a.75.75 0 0 1 0 1.5z"></path>
|
|
<path d="M16.53 7.97a.75.75 0 0 0-1.06 0v3.276H9.5a.75.75 0 0 0 0 1.5h5.97v3.284a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0 .22-.532v-.002a.75.75 0 0 0-.269-.575z"></path>
|
|
</g>
|
|
</svg>
|
|
{!mini && "Sign Out"}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-row w-full p-4 pt-0">
|
|
<div
|
|
className={cx(
|
|
"flex flex-row justify-center flex-grow rounded-lg",
|
|
mini ? "py-4" : "p-4 bg-primary "
|
|
)}
|
|
>
|
|
<ImageBetter
|
|
src={siteurl(
|
|
get_user("profile.avatar")
|
|
? get_user("profile.avatar")
|
|
: get_user("photo")
|
|
)}
|
|
alt="Profile"
|
|
className="h-8 w-8 rounded-full object-cover"
|
|
defaultSrc={siteurl("/404-img.jpg")}
|
|
/>
|
|
{!mini && (
|
|
<div className="flex flex-row items-center flex-grow font-bold text-white">
|
|
<div className=" px-2 h-full flex flex-col text-xs flex-grow">
|
|
<div>
|
|
{get_user("employee.name")
|
|
? get_user("employee.name")
|
|
: "-"}
|
|
</div>
|
|
<div className="font-normal">
|
|
{get_user("email") ? get_user("email") : "-"}
|
|
</div>
|
|
</div>
|
|
|
|
<Popover
|
|
classNameTrigger={cx("flex flex-row justify-center")}
|
|
popoverClassName={cx(
|
|
"max-w-[24rem] bg-white shadow-lg rounded-lg"
|
|
)}
|
|
placement={"right-start"}
|
|
arrow={false}
|
|
className="rounded-md w-full "
|
|
onOpenChange={(open: any) => {
|
|
setProfile(open);
|
|
}}
|
|
open={profile}
|
|
content={
|
|
<div className="max-w-[24rem] rounded-xl overflow-hidden">
|
|
<div className="block bg-gray-50 py-2 px-4 text-sm font-medium text-gray-700">
|
|
Profile
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div
|
|
onClick={async () => {
|
|
if (typeof window === "object")
|
|
navigate(
|
|
`${process.env.NEXT_PUBLIC_API_PORTAL}/choose-roles?state=${process.env.NEXT_PUBLIC_NAME}`
|
|
);
|
|
}}
|
|
className="cursor-pointer px-4 py-2 flex border-y hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<div className="w-full">
|
|
<div className="text-sm items-center font-normal text-primary-700 flex flex-row gap-x-2">
|
|
<PiUserSwitch />
|
|
Switch Role
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
onClick={async () => {
|
|
await api.delete(
|
|
process.env.NEXT_PUBLIC_BASE_URL +
|
|
"/api/destroy-cookies"
|
|
);
|
|
localStorage.removeItem("user");
|
|
if (typeof window === "object")
|
|
navigate(
|
|
`${process.env.NEXT_PUBLIC_API_PORTAL}/logout`
|
|
);
|
|
}}
|
|
className="cursor-pointer px-4 py-2 flex hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-600"
|
|
>
|
|
<div className="w-full">
|
|
<div className="text-sm items-center font-normal text-primary-700 flex flex-row gap-x-2">
|
|
<IoIosLogOut />
|
|
Sign Out
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="text-white cursor-pointer h-full flex flex-row items-center">
|
|
<MdOutlineMoreVert />
|
|
</div>
|
|
</Popover>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SidebarBetterTree;
|