feat: mobile header

yldio · Nov 30, 2020 · 1008538 · 1008538
1 parent a4dd3b2
commit 1008538
Show file tree

Hide file tree

Showing 13 changed files with 151 additions and 74 deletions.
diff --git a/src/components/Common/Chevron.js b/src/components/Common/Chevron.js
@@ -15,8 +15,13 @@ const ChevronSvg = styled.svg`
   `}
 `;
 
-const Chevron = ({ direction = 'down' }) => (
-  <ChevronSvg viewBox="0 0 6 6" width="6" height="6" up={direction === 'up'}>
+const Chevron = ({ direction = 'down', size = 6 }) => (
+  <ChevronSvg
+    viewBox="0 0 6 6"
+    width={size}
+    height={size}
+    up={direction === 'up'}
+  >
     <polyline points="0,0 6,0 6,6" />
   </ChevronSvg>
 );

diff --git a/src/components/Header/DesktopNav/Dropdown.js b/src/components/Header/DesktopNav/Dropdown.js
@@ -9,6 +9,9 @@ import headerItemStyles from '../utils/headerItemStyles';
 import DesktopNavItemStyles from './desktopNavItemStyles';
 import TopNavItem from './TopNavItem';
 
+const themeFn = ({ theme, themeVariation }) =>
+  themeVariation === 'white' ? theme.colors.blueBg : theme.colors.vibrant;
+
 const DropdownContainer = styled(TopNavItem)`
   position: relative;
   cursor: pointer;
@@ -21,6 +24,7 @@ const DropdownContainer = styled(TopNavItem)`
 
   svg {
     margin-bottom: ${remcalc(5)};
+    color: ${props => themeFn(props)};
   }
 
   span {

diff --git a/src/components/Header/DesktopNav/itemStyles.js b/src/components/Header/DesktopNav/itemStyles.js
@@ -7,15 +7,15 @@ export const white = css`
   color: ${props => props.theme.colors.text};
   &:after {
     ${underlinePseudoElement}
-    background: ${props => props.theme.colors.text};
+    background: ${props => props.theme.colors.blueBg};
     opacity: 0;
     transition: all ${({ theme }) => theme.animations.fast} ease-out;
   }
 `;
 export const whiteHover = css`
   color: ${props => props.theme.colors.text};
   &:after {
-    background: ${props => props.theme.colors.text};
+    background: ${props => props.theme.colors.blueBg};
     opacity: 1;
   }
 `;

diff --git a/src/components/Header/MobileNav/CloseButton.js b/src/components/Header/MobileNav/CloseButton.js
@@ -1,23 +1,37 @@
-import React from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 
-import close from '../../../images/close.svg';
 import { UnstyledButton } from '../../Common/Button';
 import outlineStyles from '../utils/outlineStyles';
 
-const StyledButton = styled(UnstyledButton)`
+const themeFn = ({ theme, themeVariation }) =>
+  themeVariation === 'white' ? theme.colors.blueBg : theme.colors.white;
+
+const CloseButton = styled(UnstyledButton)`
+  position: relative;
   width: ${remcalc(80)};
   height: ${remcalc(80)};
 
   margin: ${remcalc(4)};
   ${outlineStyles}
-`;
 
-const CloseButton = ({ onClick }) => (
-  <StyledButton onClick={onClick}>
-    <img src={close} alt="Close menu" />
-  </StyledButton>
-);
+  &:before, 
+  &:after {
+    position: absolute;
+    left: ${remcalc(40)};
+    content: ' ';
+    height: ${remcalc(25)};
+    width: ${remcalc(2)};
+    background-color: ${props => themeFn(props)};
+  }
+
+  &:before {
+    transform: rotate(45deg);
+  }
+
+  &:after {
+    transform: rotate(-45deg);
+  }
+`;
 
 export default CloseButton;
diff --git a/src/components/Header/MobileNav/ContactItem.js b/src/components/Header/MobileNav/ContactItem.js
@@ -0,0 +1,33 @@
+import styled, { css } from 'styled-components';
+import remcalc from 'remcalc';
+import breakpoint from 'styled-components-breakpoint';
+
+import OuterAnchorItem from './OuterAnchorItem';
+
+const darkTheme = css`
+  background: ${props => props.theme.colors.vibrant};
+  > a {
+    color: ${props => props.theme.colors.blueBg} !important;
+  }
+`;
+
+const whiteTheme = css`
+  background: ${props => props.theme.colors.blueBg};
+  > a {
+    color: ${props => props.theme.colors.white} !important;
+  }
+`;
+
+const ContactItem = styled(OuterAnchorItem)`
+  margin: ${remcalc(10)} ${remcalc(25)};
+  padding: ${remcalc(5)} 0;
+  text-align: center;
+
+  ${props => (props.themeVariation === 'white' ? whiteTheme : darkTheme)}
+
+  ${breakpoint('smallTablet')`
+    display: none;
+  `}
+`;
+
+export default ContactItem;
diff --git a/src/components/Header/MobileNav/Dropdown.js b/src/components/Header/MobileNav/Dropdown.js
@@ -1,13 +1,44 @@
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import generate from 'shortid';
+import remcalc from 'remcalc';
+import is from 'styled-is';
 
 import Chevron from '../../Common/Chevron';
 import InnerAnchorItem from './InnerAnchorItem';
 import headerItemStyles from '../utils/headerItemStyles';
 import mobileNavItemStyles from './mobileNavItemStyles';
 import outerItemStates from './outerItemStates';
 import outlineStyles from '../utils/outlineStyles';
+import { underlinePseudoElement } from '../../Common/StyledLink';
+
+const themeFn = ({ theme, themeVariation }) =>
+  themeVariation === 'white' ? theme.colors.blueBg : theme.colors.vibrant;
+
+const DropdownContainer = styled.li`
+  > span {
+    > span {
+      &:after {
+        ${underlinePseudoElement}
+        background: ${props => themeFn(props)};
+        opacity: 0;
+        transition: all ${({ theme }) => theme.animations.fast} ease-out;
+      }
+
+      ${is('expanded')`
+        &:after {
+          opacity: 1;
+        }
+      `}
+      }
+    }
+    
+    svg {
+      color: ${props => themeFn(props)};
+      margin-bottom: ${remcalc(10)};
+    }
+  }
+`;
 
 const DropdownNameWrapper = styled.span.attrs(() => ({
   states: outerItemStates,
@@ -19,24 +50,19 @@ const DropdownNameWrapper = styled.span.attrs(() => ({
   ${mobileNavItemStyles}
   ${outlineStyles}
 
-  ${props => props.states.default}
-
-  &:hover,
-  &:focus {
-    ${props => props.states.hoverActive}
-  }
+  ${({ states, themeVariation }) =>
+    themeVariation === 'white' ? states.white : states.dark}
 `;
 
 const DropdownName = styled.span`
-  max-width: 320px;
-  flex: 1;
+  max-width: ${remcalc(320)};
+  padding-right: ${remcalc(15)};
 `;
 const DropdownList = styled.ul`
   display: flex;
   flex-direction: column;
   width: 100%;
-  background: ${props => props.theme.colors.greyBg};
-  padding: ${props => props.theme.spacing[1]} 0;
+  padding: 0 ${props => props.theme.spacing[1]};
 `;
 
 export default class Dropdown extends PureComponent {
@@ -62,20 +88,26 @@ export default class Dropdown extends PureComponent {
   };
 
   render() {
-    const { items, children, dataEvent } = this.props;
+    const { items, children, dataEvent, themeVariation } = this.props;
     const { isExpanded } = this.state;
 
     return (
-      <li aria-haspopup="true" aria-expanded={isExpanded}>
+      <DropdownContainer
+        aria-haspopup="true"
+        aria-expanded={isExpanded}
+        expanded={isExpanded}
+        themeVariation={themeVariation}
+      >
         <DropdownNameWrapper
           tabIndex="0"
           expanded={isExpanded}
           onMouseDown={this.toggle}
           onFocus={this.handleFocus}
           data-event={dataEvent}
+          themeVariation={themeVariation}
         >
           <DropdownName>{children}</DropdownName>
-          <Chevron direction={isExpanded ? 'up' : 'down'} />
+          <Chevron direction={isExpanded ? 'up' : 'down'} size={10} />
         </DropdownNameWrapper>
         {isExpanded && (
           <DropdownList>
@@ -86,13 +118,14 @@ export default class Dropdown extends PureComponent {
                 to={to}
                 currentClassName="current"
                 label={label}
+                themeVariation={themeVariation}
               >
                 {label}
               </InnerAnchorItem>
             ))}
           </DropdownList>
         )}
-      </li>
+      </DropdownContainer>
     );
   }
 }
diff --git a/src/components/Header/MobileNav/InnerAnchorItem.js b/src/components/Header/MobileNav/InnerAnchorItem.js
@@ -6,6 +6,9 @@ import Anchor from '../../Common/Anchor';
 import headerItemStyles from '../utils/headerItemStyles';
 import mobileNavItemStyles from './mobileNavItemStyles';
 
+const themeFn = ({ theme, themeVariation }) =>
+  themeVariation === 'white' ? theme.colors.text : theme.colors.white;
+
 const InnerListItem = styled.li`
   display: flex;
   > a:focus {
@@ -17,16 +20,7 @@ const InnerAnchor = styled(Anchor)`
   ${headerItemStyles}
   ${mobileNavItemStyles}
   width: 100%;
-
-  background: ${props => props.theme.colors.greyBg};
-  color: ${props => props.theme.colors.secondaryText};
-
-  &:hover,
-  &:focus,
-  &.current {
-    color: ${props => props.theme.colors.text};
-    font-weight: bold;
-  }
+  color: ${props => themeFn(props)};
 `;
 
 export const InnerAnchorItem = ({
@@ -35,13 +29,15 @@ export const InnerAnchorItem = ({
   href,
   currentClassName,
   label,
+  themeVariation,
 }) => (
   <InnerListItem>
     <InnerAnchor
       href={href}
       to={to}
       currentClassName={currentClassName}
       title={label}
+      themeVariation={themeVariation}
     >
       {children}
     </InnerAnchor>

diff --git a/src/components/Header/MobileNav/OuterAnchorItem.js b/src/components/Header/MobileNav/OuterAnchorItem.js
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 
 import Anchor from '../../Common/Anchor';
 import headerItemStyles from '../utils/headerItemStyles';
-import outlineStyles from '../utils/outlineStyles';
 import mobileNavItemStyles from './mobileNavItemStyles';
 import outerItemStates from './outerItemStates';
 
@@ -14,16 +13,8 @@ const StyledAnchor = styled(Anchor).attrs(() => ({
   ${headerItemStyles}
   ${mobileNavItemStyles}
 
-  ${props => props.states.default}
-
-  &.current {
-    ${props => props.states.hoverActive}
-  }
-
-  &:focus {
-    ${props => props.states.hoverActive}
-    ${outlineStyles}
-  }
+  ${({ states, themeVariation }) =>
+    themeVariation === 'white' ? states.white : states.dark}
 `;
 
 const StyledListItem = styled.li`
@@ -37,6 +28,7 @@ const OuterAnchorItem = ({
   currentClassName,
   onClick,
   attributes,
+  themeVariation,
   ...props
 }) => (
   <StyledListItem {...props}>
@@ -46,6 +38,7 @@ const OuterAnchorItem = ({
       currentClassName={currentClassName}
       onClick={onClick}
       title={label}
+      themeVariation={themeVariation}
       {...attributes}
     >
       {label}