aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/hamburger.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/hamburger.tsx')
-rw-r--r--packages/website/ts/components/hamburger.tsx68
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);
- }
- `}
- }
-`;