137 lines
5.2 KiB
TypeScript
137 lines
5.2 KiB
TypeScript
import { useState } from "react";
|
||
import BurgerIcon from "./icons/BurgerIcon";
|
||
import { Transition } from "react-transition-group";
|
||
import BellIcon from "./icons/BellIcon";
|
||
import ParamsIcon from "./icons/ParamsIcon";
|
||
import WorkIcon from "./icons/WorkIcon";
|
||
import ExitIcon from "./icons/ExitIcon";
|
||
import useAuthStore from "../stores/useAuthStore";
|
||
import { useClickAway } from "@uidotdev/usehooks";
|
||
import useModalStore from "../stores/useModalStore";
|
||
import SettingsModal from "./modals/SettingsModal";
|
||
import CompanyModal from "./modals/CompanyModal";
|
||
|
||
function Menu() {
|
||
const [isShow, setIsShow] = useState<boolean>(false);
|
||
const { user, setUser } = useAuthStore();
|
||
const ref = useClickAway<HTMLDivElement>(() => {
|
||
setIsShow(false);
|
||
});
|
||
|
||
const { setModal } = useModalStore();
|
||
|
||
function logout() {
|
||
setUser(null);
|
||
}
|
||
|
||
function handleClickSettings() {
|
||
setIsShow(false);
|
||
setModal(<SettingsModal />);
|
||
}
|
||
|
||
function handleClickCompany() {
|
||
setIsShow(false);
|
||
setModal(<CompanyModal />);
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<span className="relative z-20 cursor-pointer">
|
||
<button
|
||
onClick={() => setIsShow(true)}
|
||
className={`p-3 transition-colors relative z-20 ${
|
||
isShow
|
||
? "bg-[#49A1F5] text-white pointer-events-none"
|
||
: "hover:bg-neutral-200"
|
||
}`}
|
||
>
|
||
<BurgerIcon />
|
||
</button>
|
||
</span>
|
||
|
||
<Transition in={isShow} timeout={150} mountOnEnter unmountOnExit>
|
||
{(state) => (
|
||
<div className={`${state}`}>
|
||
<div className="absolute top-0 left-0 z-20 w-full h-full bg-black bg-opacity-10"></div>
|
||
<div ref={ref} className="absolute z-20 ml-2 mt-3.5">
|
||
<div className="relative">
|
||
<svg
|
||
width="12"
|
||
height="10"
|
||
viewBox="0 0 12 10"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="absolute -top-2.5 left-2.5 drop-shadow"
|
||
>
|
||
<path
|
||
d="M5.14251 1.42916C5.53091 0.781817 6.46909 0.781816 6.85749 1.42915L12 10H0L5.14251 1.42916Z"
|
||
fill="white"
|
||
/>
|
||
</svg>
|
||
<div className="relative w-[240px] bg-white rounded-lg shadow">
|
||
<div className="border-b border-[#DAE0E5] p-6 flex flex-col items-center justify-center gap-4">
|
||
<div className="rounded-full bg-[#E6ECF2] w-[88px] h-[88px] flex justify-center items-center">
|
||
<p className="text-2xl font-semibold ml-0.5 mt-0.5">
|
||
{user?.name.split(" ")[0][0]}
|
||
{user?.name.split(" ")[1][0]}
|
||
</p>
|
||
</div>
|
||
<div className="space-y-1 text-center">
|
||
<p className="text-sm">{user?.name}</p>
|
||
<p className="text-[#77828C] text-xs">{user?.username}</p>
|
||
</div>
|
||
</div>
|
||
<div className="border-b border-[#DAE0E5] py-3 space-y-2">
|
||
<button
|
||
disabled
|
||
className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
|
||
>
|
||
<span className="text-[#77828C] py-1">
|
||
<BellIcon />
|
||
</span>
|
||
Уведомления
|
||
</button>
|
||
<button
|
||
className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
|
||
onClick={handleClickSettings}
|
||
>
|
||
<span className="text-[#77828C] py-1">
|
||
<ParamsIcon />
|
||
</span>
|
||
Настройки
|
||
</button>
|
||
</div>
|
||
<div className="border-b border-[#DAE0E5] py-2">
|
||
<button
|
||
className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
|
||
onClick={handleClickCompany}
|
||
>
|
||
<span className="text-[#77828C] py-1">
|
||
<WorkIcon />
|
||
</span>
|
||
Компания
|
||
</button>
|
||
</div>
|
||
<div className="py-2">
|
||
<button
|
||
onClick={logout}
|
||
className="text-sm flex items-center gap-2 px-4 w-full hover:bg-[#E6ECF2] transition-colors disabled:hover:bg-inherit disabled:opacity-50"
|
||
>
|
||
<span className="text-[#77828C] py-1">
|
||
<ExitIcon />
|
||
</span>
|
||
Выход
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Transition>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Menu;
|