WIP mobile header + developer dropdown

1 files changed, 68 insertions, 0 deletions

diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx
new file mode 100644
index 000000000..0eac4a53f
--- /dev/null
+++ b/packages/website/ts/@next/components/hamburger.tsx
@@ -0,0 +1,68 @@
+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: 2;
+    padding: 0;
+    outline: none;
+    user-select: none;
+
+    @media (min-width: 768px) {
+        display: none;
+    }
+
+    span {
+        display: block;
+        background-color: #fff;
+        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);
+            background-color: #fff;
+
+            &:nth-child(2) {
+                opacity: 0;
+                transform: rotate(0deg) scale(0.2, 0.2);
+            }
+
+            &:last-child {
+                transform: rotate(-45deg) translate(1px, -4px);
+            }
+        `}
+    }
+`;