@@ -8,7 +8,6 @@ import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
8
8
9
9
import ConnectWallet from "components/ConnectWallet" ;
10
10
import LightButton from "components/LightButton" ;
11
- import { Overlay } from "components/Overlay" ;
12
11
import DappList from "./DappList" ;
13
12
import Explore from "./Explore" ;
14
13
import Menu from "./Menu" ;
@@ -26,20 +25,15 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
26
25
z-index: 1;
27
26
` ;
28
27
29
- const StyledOverlay = styled ( Overlay ) `
30
- top: unset;
31
- ` ;
32
-
33
28
const Container = styled . div < { isOpen : boolean } > `
34
29
position: absolute;
35
30
top: 0;
36
31
left: 0;
37
32
right: 0;
38
- height: 100 %;
33
+ height: 92 %;
39
34
overflow-y: auto;
40
35
z-index: 1;
41
36
background-color: ${ ( { theme } ) => theme . whiteBackground } ;
42
- border: 1px solid ${ ( { theme } ) => theme . stroke } ;
43
37
box-shadow: 0px 2px 3px ${ ( { theme } ) => theme . defaultShadow } ;
44
38
transform-origin: top;
45
39
transform: scaleY(${ ( { isOpen } ) => ( isOpen ? "1" : "0" ) } );
@@ -76,6 +70,15 @@ const PopupContainer = styled.div`
76
70
background-color: ${ ( { theme } ) => theme . blackLowOpacity } ;
77
71
` ;
78
72
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
+
79
82
export interface ISettings {
80
83
toggleIsSettingsOpen : ( ) => void ;
81
84
initialTab ?: number ;
@@ -102,26 +105,25 @@ const NavBar: React.FC<INavBar> = ({ isOpen, handleCloseNavbar }) => {
102
105
103
106
return (
104
107
< >
108
+ { isOpen ? < Overlay { ...{ isOpen } } onClick = { handleCloseNavbar } /> : null }
105
109
< 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 >
125
127
</ Wrapper >
126
128
{ ( isDappListOpen || isHelpOpen || isSettingsOpen ) && (
127
129
< PopupContainer >
0 commit comments