All files / components/menu styles.ts

100% Statements 8/8
100% Branches 8/8
100% Functions 3/3
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122          3x             3x                         3x 30x                                                                         3x 10x                               3x 5x                                                                                
import styled, { css } from 'styled-components';
import media from 'styled-media-query';
 
import * as FooterStyles from 'components/footer/styles';
 
export const Container = styled.header`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
`;
 
export const MenuNav = styled.nav`
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: center;
 
  ${media.greaterThan('medium')`
    display: flex;
    flex-direction: row;
    justify-content: initial;
  `}
`;
 
export const MenuLink = styled.a`
  ${({ theme }) => css`
    color: ${theme.colors.white};
    font-weight: ${theme.font.weights.bold};
    font-size: ${theme.font.sizes.xlarge};
 
    & + & {
      margin-top: ${theme.spacings.small};
    }
 
    ${media.greaterThan('medium')`
      position: relative;
      font-size: ${theme.font.sizes.large};
 
      & + & {
        margin-top: 0;
        margin-left: calc(${theme.spacings.large});
      }
 
      &::after {
        content: '';
        position: absolute;
        display: block;
        background-color: ${theme.colors.primary};
        width: 100%;
        bottom: -8px;
        height: 2px;
        transform: scaleX(0);
        transition: transform 0.3s;
      }
 
      &:hover::after {
        transform: scaleX(1);
      }
    `}
  `}
`;
 
export const IconWrapper = styled.div`
  ${({ theme }) => css`
    color: ${theme.colors.white};
    width: 2.4rem;
    height: 2.4rem;
    cursor: pointer;
 
    ${media.greaterThan('medium')`
      display: none;
    `}
  `}
`;
 
type MenuFullProps = {
  isOpen: boolean;
};
 
export const MenuFull = styled.div<MenuFullProps>`
  ${({ theme, isOpen }) => css`
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100%;
    background-color: ${theme.colors.bg};
    transition: opacity 0.2s;
    opacity: ${isOpen ? 1 : 0};
    pointer-events: ${isOpen ? 'all' : 'none'};
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    padding: 0 ${theme.spacings.small} ${theme.spacings.small};
    z-index: 20;
 
    ${IconWrapper} {
      position: absolute;
      top: ${theme.spacings.small};
      right: ${theme.spacings.small};
    }
 
    ${MenuNav} {
      display: flex;
      flex: 1;
      transition: transform 0.2s;
      transform: ${isOpen ? 'translateY(0)' : 'translateY(3.2rem)'};
    }
 
    ${FooterStyles.Container} {
      transition: transform 0.2s;
      transform: ${isOpen ? 'translateY(0)' : 'translateY(3.2rem)'};
    }
 
    ${media.greaterThan('medium')`
      display: none;
    `}
  `}
`;