diff options
Diffstat (limited to 'packages/website/ts/components/hamburger.tsx')
-rw-r--r-- | packages/website/ts/components/hamburger.tsx | 68 |
1 files changed, 0 insertions, 68 deletions
diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx deleted file mode 100644 index 34d4ccc46..000000000 --- a/packages/website/ts/components/hamburger.tsx +++ /dev/null @@ -1,68 +0,0 @@ -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), - background-color 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), 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); - } - `} - } -`; |