Skip to content

Commit d76ab8c

Browse files
committed
fix: scrolling on some devices in mobile navbar, organize overlay better
1 parent 4fadbbb commit d76ab8c

File tree

2 files changed

+28
-36
lines changed

2 files changed

+28
-36
lines changed

web/src/layout/Header/MobileHeader.tsx

-10
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,6 @@ const StyledLightButton = styled(LightButton)`
3636
}
3737
`;
3838

39-
const Overlay = styled.div`
40-
position: fixed;
41-
top: 0;
42-
left: 0;
43-
width: 100%;
44-
height: 64px;
45-
z-index: 1;
46-
`;
47-
4839
const MobileHeader = () => {
4940
const [isOpen, setIsOpen] = useState(false);
5041
useLockBodyScroll(isOpen);
@@ -59,7 +50,6 @@ const MobileHeader = () => {
5950

6051
return (
6152
<Container>
62-
{isOpen ? <Overlay {...{ isOpen }} onClick={handleCloseNavbar} /> : null}
6353
<Logo />
6454
<StyledLightButton text="" Icon={HamburgerIcon} onClick={handleOpenNavbar} />
6555
<NavBar {...{ isOpen, handleCloseNavbar }} />

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

+28-26
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
88

99
import ConnectWallet from "components/ConnectWallet";
1010
import LightButton from "components/LightButton";
11-
import { Overlay } from "components/Overlay";
1211
import DappList from "./DappList";
1312
import Explore from "./Explore";
1413
import Menu from "./Menu";
@@ -26,20 +25,15 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
2625
z-index: 1;
2726
`;
2827

29-
const StyledOverlay = styled(Overlay)`
30-
top: unset;
31-
`;
32-
3328
const Container = styled.div<{ isOpen: boolean }>`
3429
position: absolute;
3530
top: 0;
3631
left: 0;
3732
right: 0;
38-
height: 100%;
33+
height: 92%;
3934
overflow-y: auto;
4035
z-index: 1;
4136
background-color: ${({ theme }) => theme.whiteBackground};
42-
border: 1px solid ${({ theme }) => theme.stroke};
4337
box-shadow: 0px 2px 3px ${({ theme }) => theme.defaultShadow};
4438
transform-origin: top;
4539
transform: scaleY(${({ isOpen }) => (isOpen ? "1" : "0")});
@@ -76,6 +70,15 @@ const PopupContainer = styled.div`
7670
background-color: ${({ theme }) => theme.blackLowOpacity};
7771
`;
7872

73+
const Overlay = styled.div`
74+
position: fixed;
75+
top: 0;
76+
left: 0;
77+
width: 100%;
78+
height: 64px;
79+
z-index: 1;
80+
`;
81+
7982
export interface ISettings {
8083
toggleIsSettingsOpen: () => void;
8184
initialTab?: number;
@@ -102,26 +105,25 @@ const NavBar: React.FC<INavBar> = ({ isOpen, handleCloseNavbar }) => {
102105

103106
return (
104107
<>
108+
{isOpen ? <Overlay {...{ isOpen }} onClick={handleCloseNavbar} /> : null}
105109
<Wrapper {...{ isOpen }}>
106-
<StyledOverlay>
107-
<Container {...{ isOpen }}>
108-
<LightButton text="Kleros Solutions" onClick={toggleIsDappListOpen} Icon={KlerosSolutionsIcon} />
109-
<hr />
110-
<Explore {...{ handleCloseNavbar }} />
111-
<hr />
112-
<WalletContainer>
113-
<ConnectWallet />
114-
{isConnected && (
115-
<DisconnectWalletButtonContainer>
116-
<DisconnectWalletButton />
117-
</DisconnectWalletButtonContainer>
118-
)}
119-
</WalletContainer>
120-
<hr />
121-
<Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
122-
<br />
123-
</Container>
124-
</StyledOverlay>
110+
<Container {...{ isOpen }}>
111+
<LightButton text="Kleros Solutions" onClick={toggleIsDappListOpen} Icon={KlerosSolutionsIcon} />
112+
<hr />
113+
<Explore {...{ handleCloseNavbar }} />
114+
<hr />
115+
<WalletContainer>
116+
<ConnectWallet />
117+
{isConnected && (
118+
<DisconnectWalletButtonContainer>
119+
<DisconnectWalletButton />
120+
</DisconnectWalletButtonContainer>
121+
)}
122+
</WalletContainer>
123+
<hr />
124+
<Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
125+
<br />
126+
</Container>
125127
</Wrapper>
126128
{(isDappListOpen || isHelpOpen || isSettingsOpen) && (
127129
<PopupContainer>

0 commit comments

Comments
 (0)