Skip to content

Commit

Permalink
sidebar final
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Romanski committed Oct 6, 2021
1 parent 66d955e commit 1ba561a
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 72 deletions.
13 changes: 7 additions & 6 deletions src/components/Navigation/Navigation.js
View file
Expand Up @@ -26,9 +26,10 @@ const NavListItem = styled.li`
`;

const activeClassName = 'selected';
const StyledNavLink = styled(NavLink).attrs({
const StyledNavLink = styled(NavLink).attrs(props => ({
tabIndex: props.isOpen ? null : '-1',
activeClassName,
})`
}))`
font-family: 'IBM Plex Mono', monospace;
text-decoration: none;
color: black;
Expand Down Expand Up @@ -56,16 +57,16 @@ const Navigation = () => {
<NavButton onClick={() => setIsOpen(!isOpen)}>🍔</NavButton>
<NavList>
<NavListItem>
<StyledNavLink exact to="/">Home</StyledNavLink>
<StyledNavLink isOpen={isOpen} exact to="/">Home</StyledNavLink>
</NavListItem>
<NavListItem>
<StyledNavLink to="/infinite-scroll">Infinite Scroll</StyledNavLink>
<StyledNavLink isOpen={isOpen} to="/infinite-scroll">Infinite Scroll</StyledNavLink>
</NavListItem>
<NavListItem>
<StyledNavLink to="/accordion-faq">Accordion FAQ</StyledNavLink>
<StyledNavLink isOpen={isOpen} to="/accordion-faq">Accordion FAQ</StyledNavLink>
</NavListItem>
<NavListItem>
<StyledNavLink to="/sidebar">Sidebar</StyledNavLink>
<StyledNavLink isOpen={isOpen} to="/sidebar">Sidebar</StyledNavLink>
</NavListItem>
</NavList>
</Nav>
Expand Down
147 changes: 81 additions & 66 deletions src/episodes/Sidebar/Sidebar.js
View file
@@ -1,4 +1,4 @@
import React from 'react';
import React, {useState} from 'react';
import styled, {keyframes} from 'styled-components';

const AppearAnimation = keyframes`
Expand All @@ -10,54 +10,86 @@ const AppearAnimation = keyframes`
}
`;

const NavigationList = styled.nav`
width: 100vw;
const Content = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
margin: 100px 30px;
div {
width: 100%;
background-color: lightgray;
height: 20vh;
&:hover {
background-color: pink;
}
}
`;

const Navigation = styled.nav`
display: ${({isOpen}) => isOpen ? 'block' : 'none'};
width: 100%;
height: 100vh;
background-color: white;
position: absolute;
left: 0;
top: 0;
display: ${({isOpen}) => isOpen ? 'flex' : 'none'};
flex-direction: column;
justify-content: center;
align-items: center;
animation: 0.2s ease-in-out 1 ${AppearAnimation};
animation: 0.3s ease-in-out 1 forwards ${AppearAnimation};
@media (min-width: 1024px) {
@media (min-width: 720px) {
display: block;
width: 300px;
border-right: 3px solid black;
transition: transform 0.5s ease-in-out;
animation: none;
transition: transform 0.3s ease-in-out;
transform: translateX(${({isOpen}) => isOpen ? '0' : '-100%'});
}
`;
const NavigationItem = styled.div`
pointer-events: auto;
margin: 30px 0;
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
li {
margin: 20px 0;
a {
font-size: 25px;
text-decoration: none;
color: black;
a {
font-size: 25px;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
`;

const ToggleButton = styled.button`
pointer-events: auto;
const MenuToggleButton = styled.button`
width: 40px;
height: 40px;
z-index: 9999;
position: absolute;
left: 20px;
top: 20px;
border: 2px solid black;
width: 40px;
height: 40px;
background-color: transparent;
padding: 0;
margin: 0;
cursor: pointer;
left: 20px;
overflow-x: hidden;
background-color: white;
border: 2px solid black;
@media (min-width: 720px) {
left: 0;
border-left: none;
transition: transform 0.3s ease-in-out;
transform: translateX(${({isOpen}) => isOpen ? '300px' : '0'});
}
div:first-child {
span:first-child {
width: 100%;
height: 100%;
position: absolute;
Expand All @@ -68,11 +100,11 @@ const ToggleButton = styled.button`
&::before, &::after {
position: absolute;
left: 50%;
content: '';
width: 17px;
height: 3px;
background-color: black;
left: 50%;
}
&::before {
Expand All @@ -86,70 +118,53 @@ const ToggleButton = styled.button`
}
}
div:last-child {
span:last-child {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: calc(100% + 2px);
transform: translateX(${({isOpen}) => isOpen ? 'calc(-100% - 2px)' : 0});
transition: transform ease-out 0.3s;
transition: transform ease-in-out 0.3s;
&::before, &::after {
position: absolute;
left: 50%;
content: '';
width: 30px;
width: 25px;
height: 3px;
background-color: black;
transform-origin: 50% 50%;
top: 50%;
left: 50%;
}
&::before {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
&::after {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
}
`;

const Content = styled.h1`
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
margin: 200px 30px;
div {
width: 100%;
background-color: lightgray;
height: 20vh;
&:hover {
background-color: pink;
}
}
`;

const Sidebar = () => {
const [isOpen, setIsOpen] = React.useState(false);
const [isOpen, setIsOpen] = useState(false);

return (
<>
<ToggleButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<div/>
<div/>
</ToggleButton>
<NavigationList isOpen={isOpen}>
<NavigationItem><a href="/">Lorem</a></NavigationItem>
<NavigationItem><a href="/">Ipsum</a></NavigationItem>
<NavigationItem><a href="/">Dolor</a></NavigationItem>
<NavigationItem><a href="/">Sit</a></NavigationItem>
<NavigationItem><a href="/">Amet</a></NavigationItem>
</NavigationList>
<MenuToggleButton isOpen={isOpen} onClick={() => setIsOpen(prevState => !prevState)}>
<span/>
<span/>
</MenuToggleButton>
<Navigation isOpen={isOpen}>
<ul>
<li><a tabIndex={isOpen ? null : '-1'} href="/">Lorem</a></li>
<li><a tabIndex={isOpen ? null : '-1'} href="/">Ipsum</a></li>
<li><a tabIndex={isOpen ? null : '-1'} href="/">Dolor</a></li>
<li><a tabIndex={isOpen ? null : '-1'} href="/">Sit</a></li>
<li><a tabIndex={isOpen ? null : '-1'} href="/">Amet</a></li>
</ul>
</Navigation>
<Content>
<div/>
<div/>
Expand Down

0 comments on commit 1ba561a

Please sign in to comment.