Make network switcher dropdown usable on mobile

src/App.js

@@ -52,7 +52,6 @@ const ContentWrapper = styled.div`
 
 const Center = styled.div`
   height: 100%;
-  z-index: 9999;
   transition: width 0.25s ease;
   background-color: ${({ theme }) => theme.onlyLight};
 `;

src/components/DropdownSelect/index.js

@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import styled from "styled-components";
 
 import Row, { RowBetween } from "../Row";
 import { AutoColumn } from "../Column";
 import { ChevronDown as Arrow } from "react-feather";
 import { TYPE } from "../../Theme";
 import { StyledIcon } from "..";
+import { useClickAway } from "react-use";
 
 const Wrapper = styled.div`
   z-index: 20;
@@ -27,7 +28,7 @@ const Wrapper = styled.div`
 
 const Dropdown = styled.div`
   position: absolute;
-  top: 34px;
+  top: 38px;
   padding-top: 40px;
   width: calc(100% - 40px);
   background-color: ${({ theme }) => theme.bg1};
@@ -51,9 +52,15 @@ const ArrowStyled = styled(Arrow)`
 
 const DropdownSelect = ({ options, active, setActive, color }) => {
   const [showDropdown, toggleDropdown] = useState(false);
+  const dropdownRef = useRef(null);
+  const containerRef = useRef(null);
+  useClickAway(dropdownRef, (event) => {
+    if (showDropdown && !containerRef.current.contains(event.target))
+      toggleDropdown(false);
+  });
 
   return (
-    <Wrapper open={showDropdown} color={color}>
+    <Wrapper open={showDropdown} color={color} ref={containerRef}>
       <RowBetween
         onClick={() => toggleDropdown(!showDropdown)}
         justify="center"
@@ -65,24 +72,26 @@ const DropdownSelect = ({ options, active, setActive, color }) => {
       </RowBetween>
       {showDropdown && (
         <Dropdown>
-          <AutoColumn gap="20px">
-            {Object.keys(options).map((key, index) => {
-              let option = options[key];
-              return (
-                option !== active && (
-                  <Row
-                    onClick={() => {
-                      toggleDropdown(!showDropdown);
-                      setActive(option);
-                    }}
-                    key={index}
-                  >
-                    <TYPE.body fontSize={14}>{option}</TYPE.body>
-                  </Row>
-                )
-              );
-            })}
-          </AutoColumn>
+          <div ref={dropdownRef}>
+            <AutoColumn gap="20px">
+              {Object.keys(options).map((key, index) => {
+                let option = options[key];
+                return (
+                  option !== active && (
+                    <Row
+                      onClick={() => {
+                        toggleDropdown(!showDropdown);
+                        setActive(option);
+                      }}
+                      key={index}
+                    >
+                      <TYPE.body fontSize={14}>{option}</TYPE.body>
+                    </Row>
+                  )
+                );
+              })}
+            </AutoColumn>
+          </div>
         </Dropdown>
       )}
     </Wrapper>

src/components/SideNav/index.js

@@ -217,6 +217,11 @@ function SideNav({ history }) {
       ) : (
         <MobileWrapper>
           <Title />
+          <DropdownSelect
+            active={selectedNetwork}
+            setActive={handleSelectedNetworkChange}
+            options={Object.values(SupportedNetwork)}
+          />
         </MobileWrapper>
       )}
     </Wrapper>