Nav Fix

- prevent propagation for Navbar - fix padding for Footer depending on route - fix z-indexing for NavTop
heyjul3s · Jan 14, 2021 · 2e28a8f · 2e28a8f
1 parent ab21dbe
commit 2e28a8f
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 7 deletions.
diff --git a/docs/components/Global/Footer/Footer.tsx b/docs/components/Global/Footer/Footer.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useRouter } from 'next/router';
 import { FlexRow, FlexCol } from 'artifak';
 import { Container } from '../Container';
 import {
@@ -9,11 +10,13 @@ import {
 } from './styles';
 
 export function Footer() {
+  const router = useRouter();
+  const isHome = router.route === '/';
   const currentYear = new Date().getFullYear();
 
   return (
     <Container pr={`1em`} pl={`1em`}>
-      <StyledFooter>
+      <StyledFooter isHome={isHome}>
         <FlexRow justifyContent="center">
           <FlexCol columnSize={[12, 6]} pl={0}>
             <FooterBrandText>

diff --git a/docs/components/Global/Footer/styles.ts b/docs/components/Global/Footer/styles.ts
@@ -36,14 +36,14 @@ export const FooterCopyright = styled.p`
   `}
 `;
 
-export const StyledFooter = styled.footer`
-  ${({ theme }) => css`
+export const StyledFooter = styled.footer<{ isHome: boolean }>`
+  ${({ theme, isHome }) => css`
     padding: 2em 0;
     border-top: 1px solid ${theme.colors.primary};
     font-family: ${theme.fontFamily.heading};
 
     @media (hover: none) {
-      padding: 2em 0 90px;
+      padding: ${isHome ? '2em 0' : '2em 0 90px'};
     }
   `}
 `;
diff --git a/docs/components/Global/NavTop/styles.ts b/docs/components/Global/NavTop/styles.ts
@@ -22,6 +22,7 @@ export const NavTopContainer = styled.div`
   height: 60px;
   display: flex;
   justify-content: space-between;
+  z-index: 2;
 
   ${({ 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>
+      <NavContainer panelOpen={panelOpen}>
         <NavSlides />
         <Navbar />
       </NavContainer>

diff --git a/docs/components/Nav/Mobile/NavSlides/styles.ts b/docs/components/Nav/Mobile/NavSlides/styles.ts
@@ -51,7 +51,7 @@ export const CloseButtonContainer = styled(motion.div)`
   border: 1px solid white;
   border-radius: 50%;
   top: 1em;
-  left: calc(50vw - 30px);
+  left: calc(50vw - 20px);
   padding: 0.5em;
   z-index: 1;
 `;
diff --git a/docs/components/Nav/Mobile/Navbar/Navbar.tsx b/docs/components/Nav/Mobile/Navbar/Navbar.tsx
@@ -13,6 +13,7 @@ export function Navbar() {
     e: React.SyntheticEvent
   ) => {
     e.preventDefault();
+    e.stopPropagation();
 
     if (navOption !== 'Home') {
       setPanelOpen(true);

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`
+export const NavContainer = styled.div<{ panelOpen: boolean }>`
   position: fixed;
   top: 0;
   left: 0;