From 0eef4ce1ca7512a63baa7803bf234d43281e1a42 Mon Sep 17 00:00:00 2001 From: Emanuel Kywal Date: Tue, 28 Nov 2023 18:01:01 -0300 Subject: [PATCH] feat: add side burguer menu to playground, matrixGenerator and matrixPlayground pages --- ...button-of-three-horizontal-lines-white.png | Bin 0 -> 400 bytes .../menu-button-of-three-horizontal-lines.png | Bin 0 -> 290 bytes scripts/menuBurguer.js | 24 +++++++ src/matrixGenerator.html | 19 ++++++ src/matrixPlayground.html | 20 ++++++ src/playground.html | 19 ++++++ style/imports.css | 64 ++++++++++++++++++ 7 files changed, 146 insertions(+) create mode 100644 assets/imgs/menu-button-of-three-horizontal-lines-white.png create mode 100644 assets/imgs/menu-button-of-three-horizontal-lines.png create mode 100644 scripts/menuBurguer.js diff --git a/assets/imgs/menu-button-of-three-horizontal-lines-white.png b/assets/imgs/menu-button-of-three-horizontal-lines-white.png new file mode 100644 index 0000000000000000000000000000000000000000..53ba8012af4004b53ca2e4921a267da10e2b15bf GIT binary patch literal 400 zcmeAS@N?(olHy`uVBq!ia0vp^5+E$V0wks0X&L}2g=CK)Uj~LMH3o);76yi2K%s^g z3=E|}xmO7c3|2E37{m+a>(^4`i^H zc>21sKj)Sa(dTl`X#&ZA^>lFz@i=~Ws^L1uM3L70)*7WMi;`Jgl**FVByj}>cD(KA znA8z)BBC)Pjd{vpnWLX?h5!Ao`o5OiVyETvd({UdCrj~0=q$MJKGjR&s!jW4&Pgnp znLyPv=iw3~M> zpVrhvEB3_|?3@w1-ed8^DbF9~E1X|yVWxR{!Obs*8mF1oKIQi)e3O2$;0Nc4nJ zFs%b&#@shXQb0k;64!{5;QX|b^2DN4hVt@qz0ADq;^f4FRK5J7^x5xhK#Jyjx;Tb- zbiTc6$aN?{pylCvR?#;s{wev-6?1HS1)ADDCUZwTSIE4~6}86q4a@8tE%t4Hr*Gf< zd7Dd%kLa7igPgBt?$F<|!>QS06e@FQdqkGS@_=|-}uZ17Xe|6bbq0&WFDaiL9``hK0?5$TkeYzm6vH9{@lWF;{ eF7?+{@!gAwJbk-dL+vflsSKX3elF{r5}E)f&24i4 literal 0 HcmV?d00001 diff --git a/scripts/menuBurguer.js b/scripts/menuBurguer.js new file mode 100644 index 0000000..dfbcf14 --- /dev/null +++ b/scripts/menuBurguer.js @@ -0,0 +1,24 @@ + +/** + * + */ +function showMenu(menuButton) { + let aside = document.querySelector("aside"); + let asideDisplay = aside.style.display; + let buttonImg = document.querySelector("#menu-burguer > img"); + + if(asideDisplay == "") { + aside.style.display = "flex"; + aside.style.justifyContent = "center"; + menuButton.style.right = "10rem"; + menuButton.style.borderColor = "white"; + + buttonImg.src = "../assets/imgs/menu-button-of-three-horizontal-lines-white.png" + } else if (asideDisplay != "") { + aside.style.display = ""; + menuButton.style.right = "3rem"; + menuButton.style.borderColor = "black"; + buttonImg.src = "../assets/imgs/menu-button-of-three-horizontal-lines.png" + } +} + diff --git a/src/matrixGenerator.html b/src/matrixGenerator.html index e8b03c6..d48433c 100644 --- a/src/matrixGenerator.html +++ b/src/matrixGenerator.html @@ -45,6 +45,25 @@

+ + + + + diff --git a/src/matrixPlayground.html b/src/matrixPlayground.html index f3e7170..eb82aa8 100644 --- a/src/matrixPlayground.html +++ b/src/matrixPlayground.html @@ -18,6 +18,26 @@

+ + + + + + diff --git a/src/playground.html b/src/playground.html index b4144eb..bb361d6 100644 --- a/src/playground.html +++ b/src/playground.html @@ -34,6 +34,25 @@

PLAYGROUND

+ + + + + \ No newline at end of file diff --git a/style/imports.css b/style/imports.css index 6eb81c6..f75abca 100644 --- a/style/imports.css +++ b/style/imports.css @@ -11,6 +11,69 @@ box-sizing: border-box; } +body { + display: flex; + justify-content: flex-end; + align-items: start; +} + +/* ------------ Menu Burguer ---------*/ + +aside { + display: none; + + border-style: solid; + border-width: 0 0 0 0.2rem; + border-color: white; + + position: absolute; + width: 15rem; + height: 100%; + + padding: 2rem; + + background-color: black; + z-index: 0; +} + +#menu-burguer { + width: 3.5rem; + height: 3.5rem; + + display: flex; + justify-content: center; + align-items: center; + + border: 1px solid black; + border-radius: 3rem; + + position: absolute; + top: 1.5rem; + right: 3rem; + z-index: 1; +} + +ul { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + gap: 1rem; + + position: relative; + top: 2rem; + + width: 10rem; + height: 10rem; + + color: white; + text-align: start; + + padding: 1rem 0; + + list-style: none; +} + /* ------------ Main title -----------*/ .main-title { @@ -37,6 +100,7 @@ h1 { a { text-decoration: none; + color: inherit; } /* ------------ Buttons ---------------*/