From 0043593c524f81852ed11718f0a4d09b356cb75a Mon Sep 17 00:00:00 2001 From: Sushant Date: Thu, 13 Oct 2022 15:36:05 +0530 Subject: [PATCH 1/4] Updated Files --- src/blocks/Header/MobileHeader.js | 28 +++++++++++++++++----------- src/lotties/hamburgerMenu.json | 1 + 2 files changed, 18 insertions(+), 11 deletions(-) create mode 100644 src/lotties/hamburgerMenu.json diff --git a/src/blocks/Header/MobileHeader.js b/src/blocks/Header/MobileHeader.js index bbc737fc..79201b05 100644 --- a/src/blocks/Header/MobileHeader.js +++ b/src/blocks/Header/MobileHeader.js @@ -2,7 +2,6 @@ import React from 'react' import styled from 'styled-components' import GithubButton from 'components/GithubButton' import BaseGrid from 'components/Grid' -import { Hamburger, Cross } from 'components/icons' import get from 'utils/get' import Logo from './Logo' import MenuLinks from './MenuLinks' @@ -13,6 +12,8 @@ import { DialogBackdrop, DialogContent, } from 'components/Dialog' +import Lottie from 'components/Lottie' +import hamburgerMenuAnimation from '../../lotties/hamburgerMenu.json' const Grid = styled(BaseGrid)` width: 100%; @@ -31,7 +32,7 @@ const Backdrop = styled(DialogBackdrop)` color: ${get('colors.white')}; background-color: ${get('colors.valhalla')}; z-index: 50; - inset: ${p => (p.$hasBanner ? 'calc(98px + 72px) 0 0 0' : '98px 0 0 0')}; + inset: 98px 0 0 0; padding-top: 64px; @media (min-width: ${get('breakpoints.lg')}) { display: none; @@ -63,22 +64,27 @@ const Scrollable = styled(Grid)` justify-content: flex-start; ` -const MobileHeader = ({ hasBanner, headerProps }) => { +const MobileHeader = ({ headerProps }) => { const dialog = useDialogState({ animated: true, unstable_initialFocusRef: null, }) + return ( - - {dialog.visible ? : } + + - + @@ -93,4 +99,4 @@ const MobileHeader = ({ hasBanner, headerProps }) => { ) } -export default MobileHeader +export default MobileHeader \ No newline at end of file diff --git a/src/lotties/hamburgerMenu.json b/src/lotties/hamburgerMenu.json new file mode 100644 index 00000000..c5fc17fb --- /dev/null +++ b/src/lotties/hamburgerMenu.json @@ -0,0 +1 @@ +{"v":"5.5.2","fr":25,"ip":0,"op":31,"w":400,"h":400,"nm":"Menu_1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"#burger_1","ln":"burger_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,199.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[220,20],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":140,"ix":4},"nm":"Tracé rectangulaire 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.076,"y":1},"o":{"x":0.463,"y":0},"t":5,"s":[0,-75],"to":[0,1.306],"ti":[0,-8.527]},{"t":30,"s":[0,0],"h":1},{"i":{"x":0.537,"y":1},"o":{"x":0.924,"y":0},"t":45,"s":[0,0],"to":[0,-8.527],"ti":[0,1.306]},{"t":70,"s":[0,-75]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.076],"y":[1]},"o":{"x":[0.463],"y":[0]},"t":5,"s":[0]},{"t":30,"s":[45],"h":1},{"i":{"x":[0.537],"y":[1]},"o":{"x":[0.924],"y":[0]},"t":45,"s":[45]},{"t":70,"s":[0]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":".barre_1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"barre_1"}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"#burger_2","ln":"burger_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,199.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[220,20],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":84,"ix":4},"nm":"Tracé rectangulaire 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.183,"y":0.183},"o":{"x":0.699,"y":0.699},"t":5,"s":[0,0],"to":[0,0],"ti":[0,0]},{"t":30,"s":[0,0],"h":1},{"i":{"x":0.301,"y":0.301},"o":{"x":0.817,"y":0.817},"t":45,"s":[0,0],"to":[0,0],"ti":[0,0]},{"t":70,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.183,0.196],"y":[1,1]},"o":{"x":[0.699,0.333],"y":[0,0]},"t":5,"s":[100,100]},{"t":30,"s":[0,100],"h":1},{"i":{"x":[0.301,0.667],"y":[1,1]},"o":{"x":[0.817,0.804],"y":[0,0]},"t":45,"s":[0,100]},{"t":70,"s":[100,100]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":".barre_2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"barre_2"}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"#burger_3","ln":"burger_3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,199.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[220,20],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":27,"ix":4},"nm":"Tracé rectangulaire 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.076,"y":1},"o":{"x":0.463,"y":0},"t":5,"s":[0,75],"to":[0,-1.306],"ti":[0,8.527]},{"t":30,"s":[0,0],"h":1},{"i":{"x":0.537,"y":1},"o":{"x":0.924,"y":0},"t":45,"s":[0,0],"to":[0,8.527],"ti":[0,-1.306]},{"t":70,"s":[0,75]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.076],"y":[1]},"o":{"x":[0.463],"y":[0]},"t":5,"s":[0]},{"t":30,"s":[-45],"h":1},{"i":{"x":[0.537],"y":[1]},"o":{"x":[0.924],"y":[0]},"t":45,"s":[-45]},{"t":70,"s":[0]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":".barre_3","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"barre_3"}],"ip":0,"op":75,"st":0,"bm":0}],"markers":[{"tm":5,"cm":"#start-input","dr":0},{"tm":30,"cm":"#end-input","dr":0},{"tm":45,"cm":"#start-outpout","dr":0},{"tm":70,"cm":"#end-outpout","dr":0}]} \ No newline at end of file From 3d30c42d94de1973cbd843adebc6667289510cbf Mon Sep 17 00:00:00 2001 From: Sushant Date: Thu, 13 Oct 2022 16:26:11 +0530 Subject: [PATCH 2/4] Fixed Lint Errors --- src/blocks/Header/MobileHeader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/Header/MobileHeader.js b/src/blocks/Header/MobileHeader.js index 79201b05..71499a4c 100644 --- a/src/blocks/Header/MobileHeader.js +++ b/src/blocks/Header/MobileHeader.js @@ -99,4 +99,4 @@ const MobileHeader = ({ headerProps }) => { ) } -export default MobileHeader \ No newline at end of file +export default MobileHeader From 371f4571084cb5c83d88f44317301ff84c8b4ce5 Mon Sep 17 00:00:00 2001 From: Sushant Date: Thu, 13 Oct 2022 16:27:08 +0530 Subject: [PATCH 3/4] Updated File --- src/blocks/Header/MobileHeader.js | 28 +++++++++++++++++----------- src/lotties/hamburgerMenu.json | 1 + 2 files changed, 18 insertions(+), 11 deletions(-) create mode 100644 src/lotties/hamburgerMenu.json diff --git a/src/blocks/Header/MobileHeader.js b/src/blocks/Header/MobileHeader.js index bbc737fc..79201b05 100644 --- a/src/blocks/Header/MobileHeader.js +++ b/src/blocks/Header/MobileHeader.js @@ -2,7 +2,6 @@ import React from 'react' import styled from 'styled-components' import GithubButton from 'components/GithubButton' import BaseGrid from 'components/Grid' -import { Hamburger, Cross } from 'components/icons' import get from 'utils/get' import Logo from './Logo' import MenuLinks from './MenuLinks' @@ -13,6 +12,8 @@ import { DialogBackdrop, DialogContent, } from 'components/Dialog' +import Lottie from 'components/Lottie' +import hamburgerMenuAnimation from '../../lotties/hamburgerMenu.json' const Grid = styled(BaseGrid)` width: 100%; @@ -31,7 +32,7 @@ const Backdrop = styled(DialogBackdrop)` color: ${get('colors.white')}; background-color: ${get('colors.valhalla')}; z-index: 50; - inset: ${p => (p.$hasBanner ? 'calc(98px + 72px) 0 0 0' : '98px 0 0 0')}; + inset: 98px 0 0 0; padding-top: 64px; @media (min-width: ${get('breakpoints.lg')}) { display: none; @@ -63,22 +64,27 @@ const Scrollable = styled(Grid)` justify-content: flex-start; ` -const MobileHeader = ({ hasBanner, headerProps }) => { +const MobileHeader = ({ headerProps }) => { const dialog = useDialogState({ animated: true, unstable_initialFocusRef: null, }) + return ( - - {dialog.visible ? : } + + - + @@ -93,4 +99,4 @@ const MobileHeader = ({ hasBanner, headerProps }) => { ) } -export default MobileHeader +export default MobileHeader \ No newline at end of file diff --git a/src/lotties/hamburgerMenu.json b/src/lotties/hamburgerMenu.json new file mode 100644 index 00000000..c5fc17fb --- /dev/null +++ b/src/lotties/hamburgerMenu.json @@ -0,0 +1 @@ +{"v":"5.5.2","fr":25,"ip":0,"op":31,"w":400,"h":400,"nm":"Menu_1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"#burger_1","ln":"burger_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,199.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[220,20],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":140,"ix":4},"nm":"Tracé rectangulaire 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.076,"y":1},"o":{"x":0.463,"y":0},"t":5,"s":[0,-75],"to":[0,1.306],"ti":[0,-8.527]},{"t":30,"s":[0,0],"h":1},{"i":{"x":0.537,"y":1},"o":{"x":0.924,"y":0},"t":45,"s":[0,0],"to":[0,-8.527],"ti":[0,1.306]},{"t":70,"s":[0,-75]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.076],"y":[1]},"o":{"x":[0.463],"y":[0]},"t":5,"s":[0]},{"t":30,"s":[45],"h":1},{"i":{"x":[0.537],"y":[1]},"o":{"x":[0.924],"y":[0]},"t":45,"s":[45]},{"t":70,"s":[0]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":".barre_1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"barre_1"}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"#burger_2","ln":"burger_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,199.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[220,20],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":84,"ix":4},"nm":"Tracé rectangulaire 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.183,"y":0.183},"o":{"x":0.699,"y":0.699},"t":5,"s":[0,0],"to":[0,0],"ti":[0,0]},{"t":30,"s":[0,0],"h":1},{"i":{"x":0.301,"y":0.301},"o":{"x":0.817,"y":0.817},"t":45,"s":[0,0],"to":[0,0],"ti":[0,0]},{"t":70,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.183,0.196],"y":[1,1]},"o":{"x":[0.699,0.333],"y":[0,0]},"t":5,"s":[100,100]},{"t":30,"s":[0,100],"h":1},{"i":{"x":[0.301,0.667],"y":[1,1]},"o":{"x":[0.817,0.804],"y":[0,0]},"t":45,"s":[0,100]},{"t":70,"s":[100,100]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":".barre_2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"barre_2"}],"ip":0,"op":75,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"#burger_3","ln":"burger_3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,199.875,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[220,20],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":27,"ix":4},"nm":"Tracé rectangulaire 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0.076,"y":1},"o":{"x":0.463,"y":0},"t":5,"s":[0,75],"to":[0,-1.306],"ti":[0,8.527]},{"t":30,"s":[0,0],"h":1},{"i":{"x":0.537,"y":1},"o":{"x":0.924,"y":0},"t":45,"s":[0,0],"to":[0,8.527],"ti":[0,-1.306]},{"t":70,"s":[0,75]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":1,"k":[{"i":{"x":[0.076],"y":[1]},"o":{"x":[0.463],"y":[0]},"t":5,"s":[0]},{"t":30,"s":[-45],"h":1},{"i":{"x":[0.537],"y":[1]},"o":{"x":[0.924],"y":[0]},"t":45,"s":[-45]},{"t":70,"s":[0]}],"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":".barre_3","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"cl":"barre_3"}],"ip":0,"op":75,"st":0,"bm":0}],"markers":[{"tm":5,"cm":"#start-input","dr":0},{"tm":30,"cm":"#end-input","dr":0},{"tm":45,"cm":"#start-outpout","dr":0},{"tm":70,"cm":"#end-outpout","dr":0}]} \ No newline at end of file From b32e6541c70850f0962dce085f869fceb3c0b3aa Mon Sep 17 00:00:00 2001 From: Sushant Date: Thu, 13 Oct 2022 16:27:08 +0530 Subject: [PATCH 4/4] Updated File --- src/blocks/Header/MobileHeader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/Header/MobileHeader.js b/src/blocks/Header/MobileHeader.js index 71499a4c..79201b05 100644 --- a/src/blocks/Header/MobileHeader.js +++ b/src/blocks/Header/MobileHeader.js @@ -99,4 +99,4 @@ const MobileHeader = ({ headerProps }) => { ) } -export default MobileHeader +export default MobileHeader \ No newline at end of file