dan/abc-project-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): add max width

Browse Source
This commit is contained in:
Dan Head
2021-01-14 23:29:11 +00:00
parent 19a31d6869
commit 1f61cbed28
1 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/nav.js
View File

@@ -11,8 +11,6 @@ const Container = styled.div`
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: flex;
flex-direction: column-reverse;
z-index: 6; z-index: 6;
background-color: ${props => background-color: ${props =>
props.open ? `rgba(0, 0, 0, 0.8)` : `rgba(0, 0, 0, 0.4)`}; props.open ? `rgba(0, 0, 0, 0.8)` : `rgba(0, 0, 0, 0.4)`};
@@ -24,8 +22,6 @@ const Container = styled.div`
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
@media (min-width: 30em) { @media (min-width: 30em) {
position: absolute; position: absolute;
display: flex;
flex-direction: row;
bottom: auto; bottom: auto;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
transform: none; transform: none;
@@ -33,6 +29,17 @@ const Container = styled.div`
} }
`; `;
const Wrapper = styled.div`
display: flex;
flex-direction: column-reverse;
height: 100%;
max-width: var(--theme-max-width);
margin: 0 auto;
@media (min-width: 30em) {
flex-direction: row;
}
`;
const Menu = styled.div` const Menu = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -101,6 +108,7 @@ export default function Nav({ data, open, setOpen }) {
const handleButtonClick = () => setOpen(!open); const handleButtonClick = () => setOpen(!open);
return ( return (
<Container open={open}> <Container open={open}>
<Wrapper>
<Menu> <Menu>
<Heading to="/" visible={!open}> <Heading to="/" visible={!open}>
<LogoArrows /> <LogoArrows />
@@ -117,6 +125,7 @@ export default function Nav({ data, open, setOpen }) {
))} ))}
</List> </List>
</Content> </Content>
</Wrapper>
</Container> </Container>
); );
} }