aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/hamburger.tsx
diff options
context:
space:
mode:
authorFrancesco Agosti <francesco.agosti93@gmail.com>2019-01-02 22:13:14 +0800
committerGitHub <noreply@github.com>2019-01-02 22:13:14 +0800
commit1ddf1087dd327b2ef35165518ee91eb457b84174 (patch)
tree619d5b8afd97945eb7917cb71b74ed1c721a77d3 /packages/website/ts/components/hamburger.tsx
parentdbbd0c5c9233965713a3ee30a1a0c5eb06448212 (diff)
parentdc6d6024dc7e72d2634c6bbd88886af6cc0ef6fc (diff)
downloaddexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar
dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.gz
dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.bz2
dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.lz
dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.xz
dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.tar.zst
dexon-sol-tools-1ddf1087dd327b2ef35165518ee91eb457b84174.zip
Merge pull request #1470 from 0xProject/feature/website/0x-org-cleanup
[website] Remove @next dir, remove unused files.
Diffstat (limited to 'packages/website/ts/components/hamburger.tsx')
-rw-r--r--packages/website/ts/components/hamburger.tsx72
1 files changed, 72 insertions, 0 deletions
diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx
new file mode 100644
index 000000000..435d206cd
--- /dev/null
+++ b/packages/website/ts/components/hamburger.tsx
@@ -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);
+ }
+ `}
+ }
+`;