fix desktop

Author: jordanoverbye

src/components/Nav/Mobile.js

@@ -3,6 +3,7 @@ import styled from "styled-components"
 import { useIntl } from "gatsby-plugin-intl"
 import { motion } from "framer-motion"
 
+import NakedButton from "../NakedButton"
 import Translation from "../Translation"
 import Icon from "../Icon"
 import Link from "../Link"
@@ -11,6 +12,25 @@ import Emoji from "../Emoji"
 import { NavLink } from "../../components/SharedStyledComponents"
 import { translateMessageId } from "../../utils/translations"
 
+const Container = styled.div`
+  display: none;
+  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
+    display: flex;
+  }
+`
+
+const MenuIcon = styled(Icon)`
+  fill: ${(props) => props.theme.colors.text};
+`
+
+const MenuButton = styled(NakedButton)`
+  margin-left: 1rem;
+`
+
+const SearchIcon = styled(MenuIcon)`
+  margin-right: 1rem;
+`
+
 const MobileModal = styled(motion.div)`
   position: fixed;
   background: ${(props) => props.theme.colors.modalBackground};
@@ -179,10 +199,6 @@ const BottomItemText = styled.div`
   }
 `
 
-const MenuIcon = styled(Icon)`
-  fill: ${(props) => props.theme.colors.text};
-`
-
 const BlankSearchState = styled.div`
   color: ${(props) => props.theme.colors.text};
   background: ${(props) => props.theme.colors.searchBackgroundEmpty};
@@ -211,14 +227,27 @@ const MobileNavMenu = ({
 
   const isOpen = isMenuOpen || isSearchOpen
   return (
-    <>
+    <Container>
+      <MenuButton
+        onClick={() => toggleMenu("search")}
+        aria-label={translateMessageId("aria-toggle-search-button", intl)}
+      >
+        <SearchIcon name="search" />
+      </MenuButton>
+      <MenuButton
+        onClick={() => toggleMenu("menu")}
+        aria-label={translateMessageId("aria-toggle-menu-button", intl)}
+      >
+        <MenuIcon name="menu" />
+      </MenuButton>
       <MobileModal
         animate={isOpen ? "open" : "closed"}
         variants={mobileModalVariants}
         initial="closed"
         onClick={toggleMenu}
       />
       <MenuContainer
+        aria-hidden={isMenuOpen ? false : true}
         animate={isMenuOpen ? "open" : "closed"}
         variants={mobileMenuVariants}
         initial="closed"
@@ -301,7 +330,7 @@ const MobileNavMenu = ({
           <Translation id="search-box-blank-state-text" />
         </BlankSearchState>
       </SearchContainer>
-    </>
+    </Container>
   )
 }
 

src/components/Nav/index.js

@@ -54,9 +54,6 @@ const NavContent = styled.div`
     justify-content: space-between;
   }
 `
-const NavMobileButton = styled(NakedButton)`
-  margin-left: 1rem;
-`
 
 const InnerContent = styled.div`
   display: flex;
@@ -131,26 +128,6 @@ const NavIcon = styled(Icon)`
   fill: ${(props) => props.theme.colors.text};
 `
 
-const MenuIcon = styled(Icon)`
-  fill: ${(props) => props.theme.colors.text};
-  display: none;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    display: block;
-    cursor: pointer;
-  }
-`
-
-const MobileIcons = styled.div`
-  display: none;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    display: flex;
-  }
-`
-
-const SearchIcon = styled(MenuIcon)`
-  margin-right: 1rem;
-`
-
 // TODO display page title on mobile
 const Nav = ({ handleThemeChange, isDarkTheme, path }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
@@ -393,24 +370,8 @@ const Nav = ({ handleThemeChange, isDarkTheme, path }) => {
             toggleTheme={handleThemeChange}
             linkSections={mobileLinkSections}
           />
-          <MobileIcons>
-            <NavMobileButton
-              onClick={() => handleMenuToggle("search")}
-              aria-label={translateMessageId("aria-toggle-search-button", intl)}
-            >
-              <SearchIcon name="search" />
-            </NavMobileButton>
-
-            <NavMobileButton
-              onClick={() => handleMenuToggle("menu")}
-              aria-label={translateMessageId("aria-toggle-menu-button", intl)}
-            >
-              <MenuIcon name="menu" />
-            </NavMobileButton>
-          </MobileIcons>
         </NavContent>
       </StyledNav>
-
       {shouldShowSubNav && (
         <SubNav>
           {ednLinks.map((link, idx) => (