38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import useOpenable from "@Front/Hooks/useOpenable";
|
|
import { Bars3BottomRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
|
import React, { useEffect } from "react";
|
|
|
|
import IconButton from "../../IconButton";
|
|
import BurgerModal from "./BurgerModal";
|
|
import classes from "./classes.module.scss";
|
|
import WindowStore from "@Front/Stores/WindowStore";
|
|
|
|
const headerBreakpoint = 1023;
|
|
|
|
export default function BurgerMenu() {
|
|
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"]}>
|
|
{isOpen ? (
|
|
<IconButton icon={<XMarkIcon />} onClick={toggle} />
|
|
) : (
|
|
<IconButton icon={<Bars3BottomRightIcon />} onClick={toggle} />
|
|
)}
|
|
<BurgerModal isOpen={isOpen} closeModal={close} />
|
|
</div>
|
|
);
|
|
}
|