fix(web): add overlay to mobile navbar and generalize top position fo…

…r testnet banner
kleros · Dec 13, 2023 · 7451435 · 7451435
1 parent 1d8c6d5
commit 7451435
Showing 1 changed file with 42 additions and 25 deletions.
diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx
@@ -16,12 +16,26 @@ import Settings from "./Menu/Settings";
 import { DisconnectWalletButton } from "./Menu/Settings/General";
 import { PopupContainer } from "..";
 
+const Wrapper = styled.div<{ isOpen: boolean }>`
+  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 30;
+`;
+
+const StyledOverlay = styled(Overlay)`
+  top: unset;
+`;
+
 const Container = styled.div<{ isOpen: boolean }>`
   position: absolute;
-  top: 64px;
+  top: 0;
   left: 0;
   right: 0;
-  max-height: calc(100vh - 64px);
+  max-height: calc(100vh - 160px);
   overflow-y: auto;
   z-index: 1;
   background-color: ${({ theme }) => theme.whiteBackground};
@@ -74,29 +88,32 @@ const NavBar: React.FC = () => {
 
   return (
     <>
-      <Container {...{ isOpen }}>
-        <LightButton
-          text="Kleros Solutions"
-          onClick={() => {
-            toggleIsDappListOpen();
-          }}
-          Icon={KlerosSolutionsIcon}
-        />
-        <hr />
-        <Explore />
-        <hr />
-        <WalletContainer>
-          <ConnectWallet />
-          {isConnected && (
-            <DisconnectWalletButtonContainer>
-              <DisconnectWalletButton />
-            </DisconnectWalletButtonContainer>
-          )}
-        </WalletContainer>
-        <hr />
-        <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
-        <br />
-      </Container>
+      <Wrapper {...{ isOpen }}>
+        <StyledOverlay />
+        <Container {...{ isOpen }}>
+          <LightButton
+            text="Kleros Solutions"
+            onClick={() => {
+              toggleIsDappListOpen();
+            }}
+            Icon={KlerosSolutionsIcon}
+          />
+          <hr />
+          <Explore />
+          <hr />
+          <WalletContainer>
+            <ConnectWallet />
+            {isConnected && (
+              <DisconnectWalletButtonContainer>
+                <DisconnectWalletButton />
+              </DisconnectWalletButtonContainer>
+            )}
+          </WalletContainer>
+          <hr />
+          <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
+          <br />
+        </Container>
+      </Wrapper>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <PopupContainer>
           <Overlay />