From f2d7c3a5c7f7175a4b16276775f1b7c423938e08 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Tue, 27 Dec 2022 17:56:35 -0300 Subject: [PATCH] feat(header): created mobile menu for medium, small devices --- src/assets/icons/hamburger.svg | 5 + src/assets/icons/minicart.svg | 5 + src/assets/icons/search.svg | 10 + src/assets/icons/x.svg | 4 + src/assets/m3-logo-medium.png | Bin 0 -> 6356 bytes src/assets/m3-logo-small.png | Bin 0 -> 3001 bytes src/settings/styles/global/_config.scss | 7 + src/settings/styles/global/_reset.scss | 11 + .../styles/utils/resources/_colors.scss | 25 +-- src/template/Header/Header.styles.scss | 0 src/template/Header/Header.tsx | 3 - src/template/Header/index.module.scss | 196 ++++++++++++++++++ src/template/Header/index.ts | 1 - src/template/Header/index.tsx | 96 +++++++++ 14 files changed, 347 insertions(+), 16 deletions(-) create mode 100644 src/assets/icons/hamburger.svg create mode 100644 src/assets/icons/minicart.svg create mode 100644 src/assets/icons/search.svg create mode 100644 src/assets/icons/x.svg create mode 100644 src/assets/m3-logo-medium.png create mode 100644 src/assets/m3-logo-small.png delete mode 100644 src/template/Header/Header.styles.scss delete mode 100644 src/template/Header/Header.tsx create mode 100644 src/template/Header/index.module.scss delete mode 100644 src/template/Header/index.ts create mode 100644 src/template/Header/index.tsx diff --git a/src/assets/icons/hamburger.svg b/src/assets/icons/hamburger.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/icons/hamburger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/minicart.svg b/src/assets/icons/minicart.svg new file mode 100644 index 0000000..7db5dc8 --- /dev/null +++ b/src/assets/icons/minicart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg new file mode 100644 index 0000000..e6e5a9c --- /dev/null +++ b/src/assets/icons/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/x.svg b/src/assets/icons/x.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/icons/x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/m3-logo-medium.png b/src/assets/m3-logo-medium.png new file mode 100644 index 0000000000000000000000000000000000000000..ea2bd14a1766e9c492f121a608aa9a41b67ae8bb GIT binary patch literal 6356 zcmV;_7%S(AP)mFK~#7F?Oh3& zRmGJ)ucZ+XRQ6pPR770R5h7?1jK*X@84wplR7P~7ju|is<9sfkOp+0Y#BpVa!6@Pu zkf2c!LR2(ik0Of!LBSSei5M0E*{S?LRgb>!_N}^gUq2ce?*DzKU%yw|t?ksQb57M2 zNs;0pLMe4TXpM@-XAGAV2OUL{B1MW6F{ma<@sVmGo28>`9Jvw`@P2%2 z3pz?tq)2hZ!OkcasJb#+MnYQXg>OeoiWDi1SVS|5KdUzKjf};AXQ$$PiWDizGm6=& zJ($B}{MSTMq)3rM!sgK#svelc>yk2w6e&^!P$p4KRW-miM&ZAfQc0)-Hr2EkMw3jg z;e@-Lz4)_XugF)syt9+GwWRf8rCMh)ndMRdD5YrKX)W3e+!Vy`eAG>#wV=;IpP;Hdmi%sLJAB;rMpO7&?%r2P;>L0b^AML8R%osN|e7hCa>D~ zXkiInj`TZ2@!5`NiLNipW&f-KEdVV>{BI=w+1W3ri|%`t&ELKREdhOqJk|%|(*e!4 zkncs@rIHZHlkN>Amf+pU^V2d$QA_>H;R;B`pzK0aRnO+cC3#J?=o{+~fNfG!mJ zq}aiHXClpO_Iv#1ZpAd)3%pjnjnC02<3sTT(lo=zouI2lGomPL zL_BV5{|9-0Bo%~VejP=(AM4lH5uNS#0n&`e=d&n(qb1(AL6avb0z_8}wI#{%)lRcDB15cx1n zrr~5{hhFO_rwDX6{(V#QK+4BmjjPHF$Y*$X0GcxB@A3qQtJz7CA1I0Z7wAWD&SykAH01MvhW?p5_LBaXvTiqxC-h`faz z`^y`!8N}}FXguPj2mN2Fd>VGV?}f@?)qWv*6{)E7#`Hr#4Uz8; zvU_J!#%R!WQW&4v?}El4->Xo@hF}1G`)|>8$p@5fMuIL)lE_T5he7qE;`kv5BXr+5 z@x_CpbsPH7wus%Y)HW}A@C z;(93zlL+EQ&|9K)Bm~7&ijpoS!RBXOsOaNhqr`BGBmTu8ZWTuD&p@ev5xqsJ2q;-l zpX4PoqD)FhoMdrKg8Bf~jU$5n>hdTajC>cOpPrU@bOT)>`GI{t6trC`W>w_Yg0eW3 zmS;wU*E4Zm7eBZd_1jrpSO&Ybd-3;Y5(7@;w@$-os=yHE=)4QNt6#1uJC<=2hVx)F z+kFsRj|+6?HZ;W$=;24K6>p4eC30({$RJul+N082$~_adC;0f0M1vjjs_1>@pMuI! zq&q|O>e55(xC3cMnD|*Gl#3zF13k;KL|Z#JdH)G?tLQ;$Ykjs7pNB0-4S#J*Jgzd7 zXvT2g8K?`H1@#$^I-ZY;wEAoV#HY37UC=pV2iuAaYyt?fciNk4_d-UqAs_K2Y8fU?9bc-`MjzBouz&YQZA|q-R<86+5s%vb9x-*}y%*ygd5kjgzOUke(WdH0lu=u0y@wB|EUqcheceyF z`(YXAe9$IK_;RHsWhW4)ouiDEDlqnoAWfVdmti|pr*mM9qL0Hk2zHmj%6rdB{XL9{ zSbusT{9c4_4}{miROn~Uo({lg{|3=AGPfa%+v}~2500;uNnw4#fqF-i+T z`#p6FHzJR9j`S>tz8WJPQ978W+3u}P8tGUWI7h%)#rcY$8?%wt0aI&-(hPx^`g_v zOur)J14me6rM3Pp6Y!%bYpTS6PDIFyb)i``PO*2c*u~><$m@CW02RI{^T+s?{T}WQ zG9&tctZ-yOMt&di`N~lSB?0QZX!){9qYs1~w<5s4rUfoa3gol1U%9R867?7&`wnxy zBNiBGp{FI73*U3$0%H|Pjf!&@)rH$MlgQ%ZZ*s#+cWNfF|ND;I{AwCT_0*SIxw&G8 zwuofuo4~qSA46zp3$4p=p`V|jDY9Yc?FgdR-YgKErXI=odk}I3wW(X_yv0d-xg-5A z;=K0)&&d_&x1u{TOq^^@OuVl_RM1TUjWH{fFE%;CI94te`^08j{8Bt&9J>DK5%qep zm*-k}qd+NUwk52mxbX?-HHin~+1io6$1-iS4HqC6(}Hbr-(b(Mh2BfvIyIRC=d7 zs@w?jz-4}hP44R&NnvpjsEs9zEkgyKO=_c@>@sONr38tddC6|7V^xGvK+YLp5+mlt|hxLxIYG(Um8$VFWNIW3S@k?#iN(ycTVon;U77GX=W)A2lmGJ?NqB)obx@d z--5YS&uEWI3N8DR;ZJJ}nd<^OGnz_Q?}~l~roTDPc{dki6wZ~`XpG4Kx`{SBQYs*G z$maqdmuF-tCce*L$Qy>iab=>allUBp&ihtHGoOaV`p{THl-q-% zF{z-V@`jEqg=7+u1fx^yz9^9hDeU+m)NZ;g0x44sEy#B7#)t=XMhj-sZU`@E!wr|8YcI~=G5 zFLlIo30N+->BKO80HZ~p;!N5yY-Mg8-iV2JAnKFPxrY>G;2hpy3Hwg)i_uMe&k}cv z&DW-yTm>pYZ%e$EP1DET=Uh}{-Muh}s9`NdmUCk8`W|m@dKNz|{V##*x zSJA&dbqylJ5WWG^_3|Ym-$kA^GG&$%3MX5@Ko%p-q>Z_z(ja|Gi5i(yK; zRgaeV0nScft>`F2ozCYV-lwqGxEIrJpv01Pt0Uk1YG4PQeR{>jA%kNNQi;mCP@(#n zXePn^J`aJpPIXcWYHA5ftoK0MvF&Tcl*dsJwbD}x{Jj(w1;1G5K*PAz^Q_Mu5y9Qr z#@wQq@6=J*q)eM+vY(TW#yT;8K2TASs7!o%ou(+zXJXuXO;O+yG`3JVla0zeLIowmU`QsIwtUP>-QfKq!an`5_MWD^HY$X9aZ;)Iq*% zzT55rVZT~U^_oj}&dkMsqooSq1PIhG!a!FqKVg;j>r(z>oKd=1;*m-4Y{)=*8CHNv z5Ofi@&At_8}rjL4j2D2aZbr_@S?=`?NugPV|O*Ft^Y+f5ul?@R^i5T`?iTi?)?9m zi0jM3FpclByL>8kB_AEJzAXuW@~#5C5+-q#tjtf%f0M_4cAc~MXRU1P#2 zGB2})(MKhjar`iax##prOK@+~FJ$CrS>lWm2g(>lr+qHVSA$t3)?8Nx+F-l!_G$Wn zS_SZW;GoONj(Afu{`YNizuv|XPHE(QOBlt(e^ZuIqZaVKiCz)ZJdg6DaBfWa+m0|! z+Wz7R<0U)5BdYD}2=yD+NkX7p9@aZWMcfWn#leGdQHvYfnP-tGbwzz`*7t zPP&Iy;^Eq2@~1R$jVlfqC`DY?Db$}CpOm<=*#5k!$!F{3I`qXuaNbgdu?+FN45jC- z<~a4cpl3isrD}spcH4v}1GgRK8xgl1Ek9X0XS8C|-yi*efu~X*fvW2bsLond{H2D& zLyjjdXQyuB0i`cHz0D&kO{lh8r|H(pyDGYgyDXmN7~_g!`JGJcEQx_xUGEpSq?N@Z zjxgR@^}2H0ePQ$pye#P^@c{KIVmI4zwH%8){@ zwQ}6j%>5pShrxK=SnL2b_Y^$oh{8!lT?1FgCc&);{;va~t1>4_J4<@zzrYg4y(uqt zwO%J+wg5D({-^kXNAO)MP&W`Srn!Rd@Je6C!dtVJ!d**h9mJ1G2 zp0=YBl-_RKG9*#lagcJ4X!HD}Nc?}IFKAhWva|PDQUMj`491B|@qDu7nfT0;ktdb3 zWNwtE*t#X69ddYg!l~j9o(13)g7-M$(3-*3jZSIw)8Gi=d5)7p&&X$CyEpc_56A70y8;KhvNa;7ZY z1HD6L#Zsjvl^R5$^O~vle6a{W+?n3@wB7a`U(#;Z&(#TLlSshH& zncF{zW*)_seD=9r1AK4F1ronaYboxx&+%@@pNsoQbQati(P7ATAuRi+qr~(@1nBEB zP!0poQis0b-J$HmxTUt-1vNH!t%y`2^7iffk?mAiwBIp@wCILS4@+NRqdFvpV=*+F zV+fuMhHyqreeHjX>iQ`80RUI%2OJiRR}J-!$)`x{%Fp4VSFPB=iRV~@PGnhJ+1p9Q zLFLs=WD@2(r4c&K#NEzeJCslDH=TCKe2QHe7{Zst}j zo`~!&g#jg=E6qhQhYL6cD3LaZiT45Oy+R5BbW9&*!R9?meYH!eb)K{yv~`cFEIh1Y z-g0H?*HUS%cRqMfX&u7DmT+E+c6LOW)I&^E6$9TE);1#VUdnwjs||cLVrP?wE&VeQ zf(k99Vqq9!2Z>2{*e2&(ZVBYPz)RC5bO)py8o7vg# z*A(pHBz0&@6kHwn4gl`UCkY};dt3#z8gI0QlX1RVB{Q2iw!%$`3?{H9{^vjbg z?tN25p|n|gnPcwslmzgZ0Q4a*l|utu9q2SwD%$o-vn5x<1LAgWxPC0>KLF)&wJW%H zYy}U4RVjE}hkv+(_hs6oky6ppU5XSbj#L<_@fC+O@f%5zBE^vnFoK^bH@Zqfq*suo zNKu7>N&i#P$MAWb0XJ;DDN-C60F!72+HItSJ<4qk&EiT)ks`&B15En< zDjA+sm2AOFks`%G1}6RZ1Wbb7vvnjziWElP WcNdb-P%|$80000q@8?RipcYFYvlLRMwb+Y6=b98 z4rQ1R+=mU-bxK->lw2cibjeXdLEcfL@c#`cMvoR#iZ;6BNh`<()fbAf5~*(TA*mw{ zpJ;?9h&DE->vI)B-TW`&UoYi9f0$u&4m>F zQNw>VkZ#7QK%4U^+Hjg&BU-~c;8?0LJncDF7a-G;vC84e#v?n(qrTjfXW`Myv^@hH zMV)fmQZB9?=XMe(BM&IYVvC{dY!dm{cL%GeGEF$?h%Azipd3RmjU6LI3Pcn>H7)}ij}K!&GXKVS}$JAn_(^L=0o%JYHi z9R4ie4kZ5s><0D#{{!|5UlpaE1-g31xe1SjhJUw_@xNwH8IpofKN$EWl3UH3b{QGp zMfuNxUKaZVU`GIM8t@sU-!$VEnf8l=xlsXtCz0G{ArC{-WV?t4|eQh7VW zeG$(cxmX?JLYX(wUckPOwjH@;9L{!N`Si!KVPTc0P!Z;>;v+waV7yL zlkmpPoV>Rfq{jotRB9>$ZZ-Uqow{)<`5e~+y?{TfG{AG)e>pg@D zGSA)2yh5c4AW{rduLV|DDD?(V7uT&epzg*(&6^Izd0?+nr(=4h7N5ZDw5hRzymG2x z;96j!B~-eZL_q9@%Cdmn0maUQpEB)6I}1nA_5*JLA2@AFfq}piPC2AiuL5(84E0tW z)Lf-0ZJ~}h?aF}dzv;rW%5pW#uCY^4=7pdwwf5edg~Y&6SW2Jy?SDO5lSDop-JtyYeihqMxr z4q%yv?`W(X5ny*^NWgq4{J1=whnaf7(98J5ybRbhHb z=>-gkN058`%yrs~0bX>C~?V3a$KlkAjSL`u&lv*`%uN&FqVU`kH8$$^8^NMLe_(>ro0{$sKHqA0 z#w?=U<2+9rzWpmL9=;vd0k;E>0lA(wdA5L6RaLW;-q?WfI$U%#-FD-hxluuKEg89j zUl9+Xe7e<+)@F*+*AG2ymRa@O)X#Z%N-UoJD*VE5*M>O!-?Qqu!`)d9CsjiJKo%V1 zOq5i{;U?E9IbJJL6W7l2F8JGLaj&>guX(e<_j$NYg9|lYIxccO{NQOl!op6vhW$2L zn+N%iw-aC=unKqqsI!FTCd2KO8?AP<5@SRfwp@QrytiaSEVlw_gnnyF{k59M6tXFF^z#iO=2IFbzRk^_0IJ*g5tqA46Zgt zGuu4R)hBq;!Si%a@sYjh!8MMzi{Zc^psxY1h3;EB(n=r4WJ-Jkpu8B5VrQH*GX`%4 ze2e;-ajq5TCKruHdy9l#pdFH&wgA1Y{0J+}72r+G*N&^!-pUVh>V4N}yQ8@H!3xK8s0_aaz6fObSnLcG zEZeC+C&}rQlka4uY4vWB=1~V}1)`pA2?01b?&inevxG%etby0)D5oYB6tsdG9?)Wrhk?sl!L<4ncEB@ z8{SrI?kK12J|J*183*X(iw>IOBnV_>Om#+D@DbL9> zXgAKJsd&?yiUu1QCQIuPgMsu#zGU)`U_1uwY$x{*c7rq-1*b474#NUX-` zesgMLxkBlH+3294tgI{_i};qU9EQ3(`7KtOO7M{Q=|!N*z`p6wI{gCUlse(+K6c~k z>god$UYD;b>k1wa%IHtI%CpW&(~i0d6twLC4CAdqC692n2${M5#VVo#e?byH9(}pD z?KV2>Jt{(zJ_+yDdHI+$4kzyh*rL4DhMzWRxe>U*rR@T88L?ZuE}jS9 zaHk#5)rZAT{BD!!@N+Gu*=3cLmAsj(v5M#%&rso52F>+C&lrCdeYB8hA?Fxgcg*jL zb|ASX7mRGJNxV%3X8;vdK*y`?1_!qJhnQlRp>XUOaDHFD)c60HTVx8LX*XkAjG zQp|=Rf%)dQm%B{*Nh})8@jp%eHef1nz0(IBD|+CwMGwahdyGsj6@8^7|2HME*t8)0 z_VR6$r?dJB_@5Q+hYU6R_t}HQVlgUjzA5Kg(c=9KxD##vE!rpfni-D^+i=^${Ax`M zBlryr=g4m_lw-f)rQ+NE2A#t*(u&0ED`Z%K4sG25v z?|kb!s>Tsdml)cw2{Hu*1y7lAW;G!r!`%z4y!|a^fodKxvda&aZX|VpyGJSfAB=L>PPckOYcHcJymhpq!qgL5P1u^Zoc@L}PAJQ02 z{IW712l4Cyypx2N(Mg7~LkeQrG1|+GEBCZxw6>EU!$awIJ<}lIboPH6bo@dPh1Q+Hw%8Hz} zys7Y}!=r+{H1`~<$d1e!UiuFVVlgg3pNGG<_?HQ)v7Ww6ur9peR5&tz8sMfO5FlGo zUufz+C5fwUEz0*g<7OH8=+H9OOn;A`=HIn%V9s1gdwE;^zrEp>(wA6Ee~}AAZN-RE_=*Q3e}Jm!~U-00000NkvXXu0mjft^%)1 literal 0 HcmV?d00001 diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss index 307b882..f9fc811 100644 --- a/src/settings/styles/global/_config.scss +++ b/src/settings/styles/global/_config.scss @@ -38,3 +38,10 @@ body { --txt-xl: 48px; } } + +a, +input, +button, +textarea { + font-family: var(--font-family-100); +} diff --git a/src/settings/styles/global/_reset.scss b/src/settings/styles/global/_reset.scss index d87d2c7..b7ae335 100644 --- a/src/settings/styles/global/_reset.scss +++ b/src/settings/styles/global/_reset.scss @@ -20,3 +20,14 @@ img { max-width: 100%; height: auto; } + +input, +button { + border: none; + background-color: transparent; +} + +.btn-ref, +button { + cursor: pointer; +} diff --git a/src/settings/styles/utils/resources/_colors.scss b/src/settings/styles/utils/resources/_colors.scss index f4a7497..3268516 100644 --- a/src/settings/styles/utils/resources/_colors.scss +++ b/src/settings/styles/utils/resources/_colors.scss @@ -2,7 +2,7 @@ $clr-common: ( 'black': #000, 'white': #fff, 'red': #ff0000, - 'green': hsl(120, 100%, 25%), + 'green': #008000, ); $clr-primary-purple: ( @@ -10,15 +10,16 @@ $clr-primary-purple: ( ); $clr-gray: ( - '100': hsl(0, 0%, 98%), - '200': hsl(0, 0%, 95%), - '300': hsl(0, 0%, 78%), - '400': hsl(0, 0%, 77%), - '450': hsl(0, 1%, 72%), - '500': hsl(0, 0%, 57%), - '600': hsl(0, 0%, 49%), - '700': hsl(0, 0%, 37%), - '800': hsl(0, 0%, 19%), - '900': hsl(0, 0%, 16%), - '1000': hsl(340, 10%, 6%), + '100': #fafafa, + '150': #f0f0f0, + '200': #f2f2f2, + '300': #c7c7c7, + '400': #c4c4c4, + '450': #b8b7b7, + '500': #919191, + '600': #7d7d7d, + '700': #5e5e5e, + '800': #303030, + '900': #292929, + '1000': #110e0f, ); diff --git a/src/template/Header/Header.styles.scss b/src/template/Header/Header.styles.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/template/Header/Header.tsx b/src/template/Header/Header.tsx deleted file mode 100644 index a5d0ee4..0000000 --- a/src/template/Header/Header.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function Header() { - return
Hi, I'm Header
-} diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss new file mode 100644 index 0000000..b7ffa68 --- /dev/null +++ b/src/template/Header/index.module.scss @@ -0,0 +1,196 @@ +.header { + position: relative; + + padding: 25px 0; + background-color: var(--clr-common-black); + + @media screen and (min-width: 1025px) { + padding: 25px 0 0; + } +} + +.content { + display: flex; + align-items: center; + justify-content: space-between; + + padding: 0 16px; + margin-bottom: 27.14px; +} + +.search { + display: flex; + align-items: center; + justify-content: center; + + min-height: auto; + height: 36px; + border: 2px solid var(--clr-gray-150); + border-radius: 5px; + + background-color: var(--clr-common-white); + + input { + width: 100%; + height: 36px; + padding: 0 9px 0 16px; + border-radius: 5px 0 0 5px; + } + + button { + display: flex; + align-items: center; + justify-content: center; + + width: 36px; + height: 100%; + + background-color: var(--clr-common-white); + } +} + +.actions-top, +.actions-bottom { + display: flex; + align-items: center; + + a { + color: var(--clr-common-white); + } +} + +// remove open menu mobile button for large devices 1025 > x +.open { + display: flex; + + @media screen and (min-width: 1025px) { + display: none; + } +} + +// remove action link for small devices and added for large devices 1025 > x +.actions-top { + a { + display: none; + } + + @media screen and (min-width: 1025px) { + a { + display: block; + } + } +} + +.menu { + @media screen and (max-width: 1024px) { + position: fixed; + width: 100vw; + height: 100vh; + left: -100%; + top: 0; + background-color: transparent; + transition: 300ms ease; + + &-content { + width: 90%; + height: 100vh; + } + } + + .actions-bottom { + width: 100%; + height: 78px; + background-color: var(--clr-common-black); + } + + .actions-bottom, + .list { + padding: 0 16px; + + a { + display: block; + text-transform: uppercase; + } + } + + .list { + height: calc(100% - 78px); + background-color: var(--clr-common-white); + padding-top: 31px; + + a { + margin-bottom: 12px; + font-weight: 500; + color: var(--clr-gray-400); + } + } +} + +.actions-bottom { + display: flex; + align-items: center; + justify-content: space-between; +} + +// menu styles for large devices 1025 > x +.menu { + &.active { + left: 0; + background-color: #0004; + } + + @media screen and (min-width: 1025px) { + width: 100%; + display: block; + + .list { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 55px; + + padding: 14px 16px; + border-top: 1px solid var(--clr-common-white); + + background-color: var(--clr-common-black); + + a { + color: var(--clr-common-white); + margin: 0; + } + } + + background-color: var(--clr-common-black); + + .actions-bottom { + display: none; + } + } +} + +/*|[X]o-o-o-o[O]|*\ +|=| SEARCH BOXS |=| +\*|[O]o-o-o-o[X]|*/ + +//remove search top box for small, medium devices +.search-top { + display: none; + + @media screen and (min-width: 1025px) { + display: flex; + } +} + +// added search bottom box for small devices, medium devices +.search-bottom { + display: flex; + padding: 0 16px; + + &-content { + width: 100%; + } + + @media screen and (min-width: 1025px) { + display: none; + } +} diff --git a/src/template/Header/index.ts b/src/template/Header/index.ts deleted file mode 100644 index e0e2673..0000000 --- a/src/template/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Header } from './Header' diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx new file mode 100644 index 0000000..02b442c --- /dev/null +++ b/src/template/Header/index.tsx @@ -0,0 +1,96 @@ +import logoImg from '../../assets/m3-logo-small.png' +import searchIcon from '../../assets/icons/search.svg' +import cartIcon from '../../assets/icons/minicart.svg' +import openIcon from '../../assets/icons/hamburger.svg' +import closeIcon from '../../assets/icons/x.svg' + +import css from './index.module.scss' +import { HTMLAttributes, useMemo, useState } from 'react' + +interface SearchProps extends HTMLAttributes {} + +export function Search({ ...props }: SearchProps) { + return ( +
+ + +
+ ) +} + +export const Header = () => { + const [isOpenMenu, setIsOpenMenu] = useState(false) + + const handleOpen = useMemo( + () => + function () { + if (window.innerWidth <= 1024) setIsOpenMenu(true) + }, + [] + ) + + const handleClose = useMemo( + () => + function () { + if (window.innerWidth <= 1024) setIsOpenMenu(false) + }, + [] + ) + + return ( +
+ +
+ ) +}