fixes header interaction

Topledger · Feb 13, 2024 · 74bc4d9 · 74bc4d9
1 parent 994d536
commit 74bc4d9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 9 deletions.
diff --git a/assets/styles/mixins.scss b/assets/styles/mixins.scss
@@ -81,12 +81,12 @@
 @mixin animFadeInTop($duration: 0.5s, $delay: 0s, $ease: ease-in-out) {
   @keyframes fadeInTop {
     0% {
-      opacity: 0;
-      transform: translateY(-20px);
+      height: 0%;
+      // transform: translateY(-20px);
     }
     100% {
-      opacity: 1;
-      transform: translateY(0);
+      height: 100%;
+      // transform: translateY(0);
     }
   }
 

diff --git a/components/Header/components/HeaderMenu/index.js b/components/Header/components/HeaderMenu/index.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import cx from "classnames";
 
 import Icon from "components/Icon";
@@ -48,13 +48,27 @@ const MenuItem = ({ icon, title, description, href, target, comingSoon }) => {
 };
 
 const HeaderMenu = ({ children, menuItems }) => {
+  const containerRef = useRef();
   const [isOpen, setIsOpen] = useState();
 
+  useEffect(() => {
+    if (isOpen) {
+      const handleClick = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("click", handleClick);
+      return () => document.removeEventListener("click", handleClick);
+    }
+  }, [isOpen]);
+
   return (
     <>
       <span
-        className={styles.headerLink}
+        className={cx(styles.headerLink, { [styles.headerLinkOpen]: isOpen })}
         onClick={() => setIsOpen((isOpen) => !isOpen)}
+        ref={containerRef}
       >
         <span>
           {children}{" "}

diff --git a/components/Header/components/HeaderMenu/index.module.scss b/components/Header/components/HeaderMenu/index.module.scss
@@ -35,7 +35,7 @@ $header-out-animation-delay: 0.3s;
   // position: relative;
   cursor: pointer;
 
-  &:hover {
+  &.headerLinkOpen {
     .headerMenu {
       @include header-menu-hover;
 
@@ -85,7 +85,9 @@ $header-out-animation-delay: 0.3s;
   @include header-menu;
 
   &:hover {
-    @include header-menu-hover;
+    @include min-width(lg) {
+      @include header-menu-hover;
+    }
 
     @include mobile {
       display: block;

diff --git a/components/Header/index.js b/components/Header/index.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import cx from "classnames";
 import Image from "next/image";
 import BarsOutlinedIcon from "@ant-design/icons/BarsOutlined";
@@ -83,6 +83,18 @@ const Header = ({ className }) => {
     setIsHeaderOpen((isHeaderOpen) => !isHeaderOpen);
   };
 
+  useEffect(() => {
+    if (isHeaderOpen) {
+      const handleClick = (e) => {
+        if (!e.target.closest(`.${styles.appHeader}`)) {
+          setIsHeaderOpen(false);
+        }
+      };
+      document.addEventListener("click", handleClick);
+      return () => document.removeEventListener("click", handleClick);
+    }
+  }, [isHeaderOpen]);
+
   return (
     <header className={cx(styles.appHeader, className)}>
       <span className={styles.headerWrapper}>