34 lines
934 B
TypeScript
34 lines
934 B
TypeScript
import useOpenable from "@Front/Hooks/useOpenable";
|
|
import WindowStore from "@Front/Stores/WindowStore";
|
|
import { UserIcon } from "@heroicons/react/24/outline";
|
|
import React, { useEffect } from "react";
|
|
|
|
import IconButton from "../../IconButton";
|
|
import classes from "./classes.module.scss";
|
|
import ProfileModal from "./ProfileModal";
|
|
|
|
const headerBreakpoint = 1023;
|
|
|
|
export default function Profile() {
|
|
const { isOpen, toggle, close } = useOpenable();
|
|
|
|
useEffect(() => {
|
|
const onResize = (window: Window) => {
|
|
if (window.innerWidth < headerBreakpoint && isOpen) close();
|
|
};
|
|
|
|
const windowResizeSubscription = WindowStore.getInstance().onResize((window) => onResize(window));
|
|
|
|
return () => {
|
|
windowResizeSubscription();
|
|
};
|
|
}, [close, isOpen]);
|
|
|
|
return (
|
|
<div className={classes["root"]}>
|
|
<IconButton icon={<UserIcon />} onClick={toggle} />
|
|
<ProfileModal isOpen={isOpen} closeModal={close} />
|
|
</div>
|
|
);
|
|
}
|