feat: move all @next files to non @next directory
This commit is contained in:
72
packages/website/ts/components/hamburger.tsx
Normal file
72
packages/website/ts/components/hamburger.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export const Hamburger: React.FunctionComponent<Props> = (props: Props) => {
|
||||
return (
|
||||
<StyledHamburger isOpen={props.isOpen} onClick={props.onClick}>
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</StyledHamburger>
|
||||
);
|
||||
};
|
||||
|
||||
const StyledHamburger =
|
||||
styled.button <
|
||||
Props >
|
||||
`
|
||||
background: none;
|
||||
border: 0;
|
||||
width: 22px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
z-index: 25;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
background-color: ${props => props.theme.textColor};
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin-bottom: 5px;
|
||||
transform-origin: 4px 0px;
|
||||
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
|
||||
background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
|
||||
opacity 0.55s ease;
|
||||
|
||||
&:first-child {
|
||||
//transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
//transform-origin: 0% 100%;
|
||||
}
|
||||
|
||||
${props =>
|
||||
props.isOpen &&
|
||||
`
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) translate(0, 1px);
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
transform: rotate(0deg) scale(0.2, 0.2);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
transform: rotate(-45deg) translate(1px, -4px);
|
||||
}
|
||||
`}
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user