feat: make mobile navbar close when clicking on header, make it occupy full height

Author: kemuru

web/src/layout/Header/MobileHeader.tsx

@@ -1,8 +1,5 @@
-import React, { useContext, useMemo, useRef } from "react";
+import React, { useState } from "react";
 import styled, { css } from "styled-components";
-
-import { useClickAway, useToggle } from "react-use";
-
 import HamburgerIcon from "svgs/header/hamburger.svg";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -37,30 +34,35 @@ const StyledLightButton = styled(LightButton)`
   }
 `;
 
-const OpenContext = React.createContext({
-  isOpen: false,
-  toggleIsOpen: () => {
-    // Placeholder
-  },
-});
-
-export function useOpenContext() {
-  return useContext(OpenContext);
-}
+const Overlay = styled.div<{ isOpen: boolean }>`
+  display: ${({ isOpen }) => (isOpen ? "block" : "none")};
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  height: 64px;
+  z-index: 1;
+`;
 
 const MobileHeader = () => {
-  const [isOpen, toggleIsOpen] = useToggle(false);
-  const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleIsOpen(false));
-  const memoizedContext = useMemo(() => ({ isOpen, toggleIsOpen }), [isOpen, toggleIsOpen]);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenNavbar = () => {
+    setIsOpen(true);
+  };
+
+  const handleCloseNavbar = () => {
+    setIsOpen(false);
+  };
+
   return (
-    <Container ref={containerRef}>
-      <OpenContext.Provider value={memoizedContext}>
-        <Logo />
-        <NavBar />
-        <StyledLightButton text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
-      </OpenContext.Provider>
+    <Container>
+      {isOpen ? <Overlay {...{ isOpen }} onClick={handleCloseNavbar} /> : null}
+
+      <Logo />
+      <StyledLightButton text="" Icon={HamburgerIcon} onClick={handleOpenNavbar} />
+      <NavBar {...{ isOpen, handleCloseNavbar }} />
     </Container>
   );
 };
+
 export default MobileHeader;

web/src/layout/Header/navbar/DappList.tsx

@@ -15,6 +15,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import Product from "./Product";
+import { IDappList } from "./index";
 
 const Header = styled.h1`
   padding-top: 32px;
@@ -136,10 +137,6 @@ const ITEMS = [
   },
 ];
 
-interface IDappList {
-  toggleIsDappListOpen: () => void;
-}
-
 const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
   const containerRef = useRef(null);
   useClickAway(containerRef, () => toggleIsDappListOpen());

web/src/layout/Header/navbar/Explore.tsx

@@ -6,8 +6,6 @@ import { Link, useLocation } from "react-router-dom";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
-import { useOpenContext } from "../MobileHeader";
-
 const Container = styled.div`
   display: flex;
   gap: 0px;
@@ -59,9 +57,12 @@ const links = [
   { to: "/get-pnk", text: "Get PNK" },
 ];
 
-const Explore: React.FC = () => {
+interface IExplore {
+  handleCloseNavbar: () => void;
+}
+
+const Explore: React.FC<IExplore> = ({ handleCloseNavbar }) => {
   const location = useLocation();
-  const { toggleIsOpen } = useOpenContext();
 
   return (
     <Container>
@@ -70,7 +71,7 @@ const Explore: React.FC = () => {
         <LinkContainer key={text}>
           <StyledLink
             to={to}
-            onClick={toggleIsOpen}
+            onClick={handleCloseNavbar}
             isActive={to === "/" ? location.pathname === "/" : location.pathname.startsWith(to)}
           >
             {text}

web/src/layout/Header/navbar/Menu/Help.tsx

@@ -17,7 +17,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 
 import Onboarding from "components/Popup/MiniGuides/Onboarding";
 
-import { IHelp } from "..";
+import { IHelp } from "../index";
 import Debug from "../Debug";
 
 const Container = styled.div`

web/src/layout/Header/navbar/index.tsx

@@ -6,14 +6,9 @@ import { useAccount } from "wagmi";
 
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
 
-import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
-
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import { Overlay } from "components/Overlay";
-
-import { useOpenContext } from "../MobileHeader";
-
 import DappList from "./DappList";
 import Explore from "./Explore";
 import Menu from "./Menu";
@@ -40,7 +35,7 @@ const Container = styled.div<{ isOpen: boolean }>`
   top: 0;
   left: 0;
   right: 0;
-  max-height: calc(100vh - 160px);
+  height: 100%;
   overflow-y: auto;
   z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
@@ -94,28 +89,25 @@ export interface IDappList {
   toggleIsDappListOpen: () => void;
 }
 
-const NavBar: React.FC = () => {
+interface INavBar {
+  isOpen: boolean;
+  handleCloseNavbar: () => void;
+}
+
+const NavBar: React.FC<INavBar> = ({ isOpen, handleCloseNavbar }) => {
   const { isConnected } = useAccount();
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
-  const { isOpen } = useOpenContext();
-  useLockOverlayScroll(isOpen);
 
   return (
     <>
       <Wrapper {...{ isOpen }}>
         <StyledOverlay>
           <Container {...{ isOpen }}>
-            <LightButton
-              text="Kleros Solutions"
-              onClick={() => {
-                toggleIsDappListOpen();
-              }}
-              Icon={KlerosSolutionsIcon}
-            />
+            <LightButton text="Kleros Solutions" onClick={toggleIsDappListOpen} Icon={KlerosSolutionsIcon} />
             <hr />
-            <Explore />
+            <Explore {...{ handleCloseNavbar }} />
             <hr />
             <WalletContainer>
               <ConnectWallet />