🎨 add functionalities when submenu close on resize breakpoint using windowStore

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<IProps, IState> {
@@ -15,24 +18,14 @@ export default class Profile extends React.Component<IProps, IState> {
 		this.state = {
 			isModalOpen: false,
 		};
-		this.openModal = this.openModal.bind(this);
-		this.closeModal = this.closeModal.bind(this);
 	}
 
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<Image alt="profile" src={ProfileIcon} className={classes["profile-icon"]} onClick={this.openModal} />
-				{this.state.isModalOpen && <ProfileModal isOpen={this.state.isModalOpen} closeModal={this.closeModal} />}
+				<Image alt="profile" src={ProfileIcon} className={classes["profile-icon"]} onClick={this.props.openProfileModal} />
+				{this.props.isModalOpen && <ProfileModal isOpen={this.props.isModalOpen} closeModal={this.props.closeProfileModal} />}
 			</div>
 		);
 	}
-
-	private openModal() {
-		this.setState({ isModalOpen: true });
-	}
-
-	private closeModal() {
-		this.setState({ isModalOpen: false });
-	}
 }

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<IProps, IState> {
 	private onScrollYDirectionChange = () => { };
+	private onWindowResize = () => { };
 
 	constructor(props: IProps) {
 		super(props);
@@ -34,11 +36,14 @@ export default class Header extends React.Component<IProps, IState> {
 			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<IProps, IState> {
 						<Notifications isModalOpen={this.state.isNotificationMenuOpen} openNotificationModal={this.openNotificationMenu} closeNotificationModal={this.closeNotificationMenu} />
 					</div>
 					<div className={classes["profile-section"]}>
-						<Profile />
+						<Profile isModalOpen={this.state.isProfileMenuOpen} closeProfileModal={this.closeProfileMenu} openProfileModal={this.openProfileMenu} />
 					</div>
 					<div className={classes["burger-menu"]}>
 						<BurgerMenu isModalOpen={this.state.isBurgerMenuOpen} closeBurgerMenu={this.closeBurgerMenu} openBurgerMenu={this.openBurgerMenu} />
@@ -69,10 +74,15 @@ export default class Header extends React.Component<IProps, IState> {
 		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<IProps, IState> {
 		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<IProps, IState> {
 	private closeNotificationMenu() {
 		this.setState({ isNotificationMenuOpen: false });
 	}
+
+	private openProfileMenu() {
+		this.setState({ isProfileMenuOpen: true });
+	}
+
+	private closeProfileMenu() {
+		this.setState({ isProfileMenuOpen: false });
+	}
 }

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);
+	}
 }