feat: make mobile navbar close when clicking on header, make it occup…

web/src/components/DisputeView/DisputeInfo/index.tsx

@@ -95,7 +95,7 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
       {
         icon: CalendarIcon,
         name: getPeriodPhrase(period ?? 0),
-        value: !displayAsList ? new Date(date * 1000).toLocaleString() : formatDate(date),
+        value: !displayAsList ? `${new Date(date * 1000).toLocaleString()} (Local Time)` : formatDate(date),
         display: !isUndefined(period) && !isUndefined(date),
         style: "grid-column: 2 / 4;",
       },

web/src/layout/Header/MobileHeader.tsx

@@ -1,10 +1,9 @@
-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 { useLockBodyScroll } from "react-use";
+
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import LightButton from "components/LightButton";
@@ -33,30 +32,25 @@ const StyledLightButton = styled(LightButton)`
   }
 `;
 
-const OpenContext = React.createContext({
-  isOpen: false,
-  toggleIsOpen: () => {
-    // Placeholder
-  },
-});
+const MobileHeader = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  useLockBodyScroll(isOpen);
 
-export function useOpenContext() {
-  return useContext(OpenContext);
-}
+  const handleOpenNavbar = () => {
+    setIsOpen(true);
+  };
+
+  const handleCloseNavbar = () => {
+    setIsOpen(false);
+  };
 
-const MobileHeader = () => {
-  const [isOpen, toggleIsOpen] = useToggle(false);
-  const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleIsOpen(false));
-  const memoizedContext = useMemo(() => ({ isOpen, toggleIsOpen }), [isOpen, toggleIsOpen]);
   return (
-    <Container ref={containerRef}>
-      <OpenContext.Provider value={memoizedContext}>
-        <Logo />
-        <NavBar />
-        <StyledLightButton text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
-      </OpenContext.Provider>
+    <Container>
+      <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 Container = styled.div`
   display: flex;
@@ -134,10 +135,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

@@ -4,8 +4,6 @@ import { landscapeStyle } from "styles/landscapeStyle";
 
 import { Link, useLocation } from "react-router-dom";
 
-import { useOpenContext } from "../MobileHeader";
-
 const Container = styled.div`
   display: flex;
   gap: 0;
@@ -61,19 +59,19 @@ const links = [
 
 interface IExplore {
   isMobileNavbar?: boolean;
+  handleCloseNavbar?: () => void;
 }
 
-const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
+const Explore: React.FC<IExplore> = ({ isMobileNavbar, handleCloseNavbar }) => {
   const location = useLocation();
-  const { toggleIsOpen } = useOpenContext();
 
   return (
     <Container>
       <Title>Explore</Title>
       {links.map(({ to, text }) => (
         <StyledLink
           key={text}
-          onClick={toggleIsOpen}
+          onClick={handleCloseNavbar}
           isActive={to === "/" ? location.pathname === "/" : location.pathname.split("/")[1] === to.split("/")[1]}
           {...{ to, isMobileNavbar }}
         >

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

@@ -6,13 +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";
@@ -30,16 +26,12 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
   z-index: 1;
 `;
 
-const StyledOverlay = styled(Overlay)`
-  top: unset;
-`;
-
 const Container = styled.div<{ isOpen: boolean }>`
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  max-height: calc(100vh - 160px);
+  height: 92%;
   overflow-y: auto;
   z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
@@ -79,6 +71,15 @@ const PopupContainer = styled.div`
   background-color: ${({ theme }) => theme.blackLowOpacity};
 `;
 
+const StyledOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 64px;
+  z-index: 1;
+`;
+
 export interface ISettings {
   toggleIsSettingsOpen: () => void;
   initialTab?: number;
@@ -92,16 +93,20 @@ 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 (
     <>
+      {isOpen ? <Overlay {...{ isOpen }} onClick={handleCloseNavbar} /> : null}
       <Wrapper {...{ isOpen }}>
         <StyledOverlay>
           <Container {...{ isOpen }}>
@@ -114,7 +119,7 @@ const NavBar: React.FC = () => {
               Icon={KlerosSolutionsIcon}
             />
             <hr />
-            <Explore isMobileNavbar={true} />
+            <Explore isMobileNavbar={true} {...{ handleCloseNavbar }} />
             <hr />
             <WalletContainer>
               <ConnectWallet />