From c99558606347682c6c5c9bb20d37aa4fbe8ab6be Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Mon, 10 Dec 2018 11:19:20 +0100 Subject: WIP mobile header + developer dropdown --- packages/website/ts/@next/components/hamburger.tsx | 68 ++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 packages/website/ts/@next/components/hamburger.tsx (limited to 'packages/website/ts/@next/components/hamburger.tsx') 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) => { + return ( + + + + + + ); +}; + +const StyledHamburger = styled.button` + 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); + } + `} + } +`; -- cgit v1.2.3 From bf56a2c7c49ec2817adedea359b7750a8ced15d7 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Wed, 12 Dec 2018 16:47:12 +0100 Subject: Header mobile styling --- packages/website/ts/@next/components/hamburger.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/hamburger.tsx') diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index 0eac4a53f..37aabcd10 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -27,7 +27,7 @@ const StyledHamburger = styled.button` outline: none; user-select: none; - @media (min-width: 768px) { + @media (min-width: 800px) { display: none; } -- cgit v1.2.3 From b4b1d54e49ff3d6c146b257ddb918fca5ddb1329 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 12:33:45 +0100 Subject: WIP refactor mobileNavMenu --- packages/website/ts/@next/components/hamburger.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/hamburger.tsx') diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index 37aabcd10..97c9ba26d 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -22,7 +22,7 @@ const StyledHamburger = styled.button` width: 22px; height: 16px; position: relative; - z-index: 2; + z-index: 9999; padding: 0; outline: none; user-select: none; -- cgit v1.2.3 From d2e29fb081ca4b55912cfb2c004c441acda75ea0 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Thu, 13 Dec 2018 13:18:51 +0100 Subject: Refactors mobile nav, theming --- packages/website/ts/@next/components/hamburger.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/hamburger.tsx') diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index 97c9ba26d..28d58ab82 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -33,7 +33,7 @@ const StyledHamburger = styled.button` span { display: block; - background-color: #fff; + background-color: ${props => props.theme.textColor}; width: 100%; height: 2px; margin-bottom: 5px; -- cgit v1.2.3 From 6f7e27bd7fbb0e28acb245bec3b18cf944e24523 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 13 Dec 2018 13:52:55 +0100 Subject: Tweak z-index --- packages/website/ts/@next/components/hamburger.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/@next/components/hamburger.tsx') diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index 28d58ab82..3ca276705 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -22,7 +22,7 @@ const StyledHamburger = styled.button` width: 22px; height: 16px; position: relative; - z-index: 9999; + z-index: 25; padding: 0; outline: none; user-select: none; -- cgit v1.2.3 From 47db165afc51a8ffe5ffe0d194a1e893bfb94083 Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Mon, 17 Dec 2018 19:56:10 +0100 Subject: Fixes hamburger icon bgcolor, jobs link --- packages/website/ts/@next/components/hamburger.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts/@next/components/hamburger.tsx') diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index 3ca276705..b5c01a2b0 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -53,7 +53,6 @@ const StyledHamburger = styled.button` ${props => props.isOpen && ` opacity: 1; transform: rotate(45deg) translate(0, 1px); - background-color: #fff; &:nth-child(2) { opacity: 0; -- cgit v1.2.3 From 9bd71aeeffbadebb41756a605ef6a0aacbfd47c4 Mon Sep 17 00:00:00 2001 From: Steve Klebanoff Date: Tue, 18 Dec 2018 13:24:53 -0800 Subject: run prettier on website --- packages/website/ts/@next/components/hamburger.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/@next/components/hamburger.tsx') diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx index b5c01a2b0..435d206cd 100644 --- a/packages/website/ts/@next/components/hamburger.tsx +++ b/packages/website/ts/@next/components/hamburger.tsx @@ -16,7 +16,10 @@ export const Hamburger: React.FunctionComponent = (props: Props) => { ); }; -const StyledHamburger = styled.button` +const StyledHamburger = + styled.button < + Props > + ` background: none; border: 0; width: 22px; @@ -50,7 +53,9 @@ const StyledHamburger = styled.button` //transform-origin: 0% 100%; } - ${props => props.isOpen && ` + ${props => + props.isOpen && + ` opacity: 1; transform: rotate(45deg) translate(0, 1px); -- cgit v1.2.3