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;
`}
`}
`;
|