nav z-index fix

heyjul3s · Jan 14, 2021 · 6747078 · 6747078
1 parent 2c6f965
commit 6747078
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/docs/components/Global/NavTop/NavTop.tsx b/docs/components/Global/NavTop/NavTop.tsx
@@ -2,10 +2,14 @@ import React from 'react';
 import { AnchorLink } from '../../AnchorLink';
 import { ArtifakTypeLogo } from '../../../assets/ArtifakTypeLogo';
 import { NavTopContainer, NavTopMenu, NavTopLink } from './styles';
+import { MobileNavContext } from '../../Nav/Mobile/context';
 
 export function NavTop() {
+  const mobileNavContext = React.useContext(MobileNavContext);
+  const panelOpen = !!mobileNavContext ? mobileNavContext.panelOpen : false;
+
   return (
-    <NavTopContainer>
+    <NavTopContainer panelOpen={panelOpen}>
       <AnchorLink
         href="/"
         style={{

diff --git a/docs/components/Global/NavTop/styles.ts b/docs/components/Global/NavTop/styles.ts
@@ -16,13 +16,13 @@ export const NavTopLink = styled(AnchorLink)`
   top: 2px;
 `;
 
-export const NavTopContainer = styled.div`
+export const NavTopContainer = styled.div<{ panelOpen: boolean }>`
   position: relative;
   width: 100%;
   height: 60px;
   display: flex;
   justify-content: space-between;
-  z-index: 2;
+  z-index: 1;
 
   ${({ theme }) => `
     background-color: ${theme.colors.primary};

diff --git a/docs/components/Nav/Mobile/MobileNav.tsx b/docs/components/Nav/Mobile/MobileNav.tsx
@@ -20,7 +20,7 @@ export function MobileNav() {
         setViewIndex
       }}
     >
-      <NavContainer panelOpen={panelOpen}>
+      <NavContainer>
         <NavSlides />
         <Navbar />
       </NavContainer>

diff --git a/docs/components/Nav/Mobile/styles.ts b/docs/components/Nav/Mobile/styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const NavContainer = styled.div<{ panelOpen: boolean }>`
+export const NavContainer = styled.div`
   position: fixed;
   top: 0;
   left: 0;