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

49
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,22 +108,24 @@ export default function Nav({ data, open, setOpen }) {
const handleButtonClick = () => setOpen(!open); const handleButtonClick = () => setOpen(!open);
return ( return (
<Container open={open}> <Container open={open}>
<Menu> <Wrapper>
<Heading to="/" visible={!open}> <Menu>
<LogoArrows /> <Heading to="/" visible={!open}>
<LogoArrows /> <LogoArrows />
</Heading> <LogoArrows />
<MenuButton open={open} onClick={handleButtonClick} /> </Heading>
</Menu> <MenuButton open={open} onClick={handleButtonClick} />
<Content> </Menu>
<List> <Content>
{data.map((link, i) => ( <List>
<NavItem key={i} subNav={link.subNav} to={link.to}> {data.map((link, i) => (
{link.title} <NavItem key={i} subNav={link.subNav} to={link.to}>
</NavItem> {link.title}
))} </NavItem>
</List> ))}
</Content> </List>
</Content>
</Wrapper>
</Container> </Container>
); );
} }