diff --git a/src/front/Components/DesignSystem/Header/Profile/index.tsx b/src/front/Components/DesignSystem/Header/Profile/index.tsx index 6a3cc824..71901561 100644 --- a/src/front/Components/DesignSystem/Header/Profile/index.tsx +++ b/src/front/Components/DesignSystem/Header/Profile/index.tsx @@ -4,9 +4,12 @@ import Image from "next/image"; import ProfileIcon from "@Assets/icons/user.svg"; import ProfileModal from "./ProfileModal"; -type IProps = {}; -type IState = { +type IProps = { isModalOpen: boolean; + openProfileModal: () => void; + closeProfileModal: () => void; +}; +type IState = { }; export default class Profile extends React.Component { @@ -15,24 +18,14 @@ export default class Profile extends React.Component { this.state = { isModalOpen: false, }; - this.openModal = this.openModal.bind(this); - this.closeModal = this.closeModal.bind(this); } public override render(): JSX.Element { return (
- profile - {this.state.isModalOpen && } + profile + {this.props.isModalOpen && }
); } - - private openModal() { - this.setState({ isModalOpen: true }); - } - - private closeModal() { - this.setState({ isModalOpen: false }); - } } diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx index 96900ebd..403882ad 100644 --- a/src/front/Components/DesignSystem/Header/index.tsx +++ b/src/front/Components/DesignSystem/Header/index.tsx @@ -22,10 +22,12 @@ type IState = { open: EHeaderOpeningState; isBurgerMenuOpen: boolean; isNotificationMenuOpen: boolean; + isProfileMenuOpen: boolean; }; export default class Header extends React.Component { private onScrollYDirectionChange = () => { }; + private onWindowResize = () => { }; constructor(props: IProps) { super(props); @@ -34,11 +36,14 @@ export default class Header extends React.Component { open: EHeaderOpeningState.OPEN, isBurgerMenuOpen: false, isNotificationMenuOpen: false, + isProfileMenuOpen: false, }; this.openBurgerMenu = this.openBurgerMenu.bind(this); this.closeBurgerMenu = this.closeBurgerMenu.bind(this); this.openNotificationMenu = this.openNotificationMenu.bind(this); this.closeNotificationMenu = this.closeNotificationMenu.bind(this); + this.closeProfileMenu = this.closeProfileMenu.bind(this); + this.openProfileMenu = this.openProfileMenu.bind(this); this.visibility = this.visibility.bind(this); } public override render(): JSX.Element { @@ -55,7 +60,7 @@ export default class Header extends React.Component {
- +
@@ -69,10 +74,15 @@ export default class Header extends React.Component { this.onScrollYDirectionChange = WindowStore.getInstance().onScrollYDirectionChange((scrollYDirection) => this.visibility(scrollYDirection), ); + + this.onWindowResize = WindowStore.getInstance().onResize((window) => + this.onResize(window) + ); } public override componentWillUnmount() { this.onScrollYDirectionChange(); + this.onWindowResize(); } private visibility(scrollYDirection: number) { @@ -86,6 +96,13 @@ export default class Header extends React.Component { if (open !== this.state.open) this.setState({ open }); } + private onResize(window: Window) { + if (window.innerWidth === 1300) { + this.setState({ isBurgerMenuOpen: false }); + this.setState({ isProfileMenuOpen: false }); + } + } + private openBurgerMenu() { this.setState({ isBurgerMenuOpen: true }); } @@ -101,4 +118,12 @@ export default class Header extends React.Component { private closeNotificationMenu() { this.setState({ isNotificationMenuOpen: false }); } + + private openProfileMenu() { + this.setState({ isProfileMenuOpen: true }); + } + + private closeProfileMenu() { + this.setState({ isProfileMenuOpen: false }); + } } diff --git a/src/front/Stores/WindowStore.ts b/src/front/Stores/WindowStore.ts index 8ae1e77b..f40fb3f6 100644 --- a/src/front/Stores/WindowStore.ts +++ b/src/front/Stores/WindowStore.ts @@ -21,8 +21,17 @@ export default class WindowStore { }; } + public onResize(callback: (window: Window) => void) { + this.event.on("resize", callback); + return () => { + this.event.off("resize", callback); + }; + } + private iniEvents(): void { window.addEventListener("scroll", (e: Event) => this.scrollYHandler(e)); + window.addEventListener("resize", (e: Event) => this.resizeHandler()); + } private scrollYHandler = (() => { @@ -40,4 +49,8 @@ export default class WindowStore { previousYDirection = scrollYDirection; }; })(); + + private resizeHandler() { + this.event.emit("resize", window); + } }