From 5d29e4217646be75ae62b0a42fa5a87fcee37de2 Mon Sep 17 00:00:00 2001 From: Mahyar Khanbolooki Date: Fri, 4 Jul 2025 17:55:00 +0330 Subject: [PATCH] add: top bar icons, menu styling --- public/assets/images/danak-logo.png | Bin 0 -> 2232 bytes public/assets/images/user-avatar.png | Bin 0 -> 7974 bytes src/app/globals.css | 1 + src/components/button/NightModeSwitch.tsx | 8 +- src/components/icons/GridIcon.tsx | 39 +++++++++ src/components/icons/NotificationBellIcon.tsx | 6 +- src/components/icons/WalletIcon.tsx | 33 +++++++ src/components/menu/Menu.tsx | 8 +- src/components/menu/MenuItem.tsx | 7 +- .../overlays/BlurredOverlayContainer.tsx | 3 +- src/components/topbar/TopBar.tsx | 81 ++++++++++-------- .../wrapper/ClientMenuRouteWrapper.tsx.tsx | 4 +- 12 files changed, 142 insertions(+), 48 deletions(-) create mode 100644 public/assets/images/danak-logo.png create mode 100644 public/assets/images/user-avatar.png create mode 100644 src/components/icons/GridIcon.tsx create mode 100644 src/components/icons/WalletIcon.tsx diff --git a/public/assets/images/danak-logo.png b/public/assets/images/danak-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..e220053519012d1452a24099290eecd8463c5715 GIT binary patch literal 2232 zcmV;p2uJscP)Px-a!Eu%RCodHTC=lHc=Fe8m3Q$c5&fuKEIfHcu=M20Vcr)0`z?Z>>;1DK+ z3BgxS@I(&+2}z9a%CJ>aNJupO@w#amdB1#V|Eko0*82W*I-aT&z6o7M1IDOFfaq{I z9Li8^RI1YeL8SHZkLrYP0+-PMK%|tqQ%XG^kH^#L)FM(D%~nK(AnJSl7eIs@sUq>4 zs3kNYL4=3|5OIksLBG+cKm!DkG2Nd4kulu^`&zPH0RT#fNWjEEge9)T9F4{&*MKqR z;dD}WeXqVFCz6q4I>e9q6VT*Z0uW!CP9Ry z41hv(vb(eviEgF$PenHcB1Wg13#-)EJFSoR@`t`#Ol%8b$NRn8PSQa;$0uYeAq#ah zH&@Ox@|}_&{j@_4J-&nE4$wwoEhEu~fe4Hkqt3>t_sH)I#>i}mmUAif?P(7^t-BwN z-*d_+IFxkn{N6Jc3`E`R1*I|F-=Gz%D!X|GTlBsDk;AhC-UuSlh1@ba&Cw}pUvJzY ztH)W)BN#EJ8-&tYy`_vb$7J{no<@Thqjnir00|E863&JDQb0m2hJ5#Zmu27>Kj=#V z$pS*XVV*T0f}I$N)`H0LqkbEsex>+b)lVSB25GH-IweMp6&sW4Ge!;GXpDXZ%{|^7 z04eI>1%Y&SP6ef3Qu5{Wr+`GAXsv$c&;jrWBAZCt&q8t|5$AwIJNxbj(;Sd+Jj}?n zCn|wX->VB4cY?p~@ooVmDq^z4l>m~6qQ5vN_@^P(wlN^}y?U|6)UUbpkQyKoSzV&= zXbX;vPPudhkYJDJ+;P$O=759&RN$VxhRXxjWCyCv-c6p+rlMvEATf#}dRnI%a>>oh zatI`?yJric?!4xc4s7XNPBna><^bo4Tev&c4HjYcrUZ zfF#3vilMoF=Q;1jbpP_$AR)mO#@n2K z5=?f>e;WRwFL#NH0m;d?ewn*9khnaAXFL>Qi+6`Wf{~f9GWRL~q#^$T9q#}(*TYVh zeQR0)BsdnzE65vhofSc1bIEfxIF$WV#2?tk#;}i$AwWHrfmTPR4*=4z>ml=ODFhAA z{+u=jBrZiz3Y57ANIr^A%M=8ITt;(v#ycE~-5-`C5lJtYGnY>I9(2j#Bl9QO7rrm= zMUFXwh`?e_E8kCEF9C@L-;!+4URel8-=I z>!G;1w_XRntjx%jY%k!9u{1L+OfQWc=_~<>&t-@o2QOUEAP^|_Dwns^^Vk^l zrGSKIT;jaZrcotDm;FxWOKREWt~2$Vbi$TAh4NAlsp4u#Cw33VgtL1v*<1-Z6Z(+r z#>TOawqi7rZOAXjT(tzsRj0f0JB#(zPrp2L=NN7Dfk805*1P9`1f}`hWBqoWQEjf` z%lX$v=@gIv0@mxYBS1u{j?QrE?{qts1Tw+Ix?H%-U63wBru1C|5)jLuQb!yMIHIU= ztY5#m>zM-ymp9}LYrLC=MC&E-S6q&rSFNi1&@<<}kPZMH`B|5*Qb58;L33BWP-V|$;teoiX9$qsx1@?}FxmV>Kd;Fp!pYrayZ_9k z6rGU2*u7Ke(;m5FbpNk?KJm82$~9$%B`}RU?$|aO6Y=9IsT_nzByQv2@oU8HHKc>2 z&F!!rB@JAoKisK-VE|jc3m(uHCV1cv$_ashd%QcBOmcp-;dmydVLz4#$jx8)9QSw@ z_7kunKhz`g7AY^r=kPDbM1awM6TV{pn7^b!04Qu z0KogHe!gpIV_W)l_){7Ar6lRdcgY)DKI1)G_5++DK>19z;W$167|4f|1xA3;ISv5l z7_@YNux`d3X4p?UY)Q)k6@Q!N^~+}^TA6s~&;!_5>WJ*%-icFjFu(ugM$S>{nqZQ;kI@E*a0VC$kh+A?bofv{B!o#~b(&be zjZlX}SbOsQQ}42LuK%MazAt$J%@`l7w}b%0yAuH=L2-@uLZ0zB)=%E3eB29CLqv*= z!#m)K<2Z)*Y<<5?hIxOh7GRoN+Lk~Rv&pS^y(wK7ASO(#@1~46;xRyOnfD|4Pw`w0 zh_)E0jmgsh5`7+TMV7STJE}ZN?X7AxFb|?_hxgSgvsS?yh-$TbLAe`<3M#W!QVm44 zTE3v%4MYW%Su?40#kwWdHREEn>~SD95Uo~Z?E|JjY9Oi|6Px6hK(c=ecztBGiD(;C zp9Tn|2BP|GUsPfMse!1dO6w$MjCn~N+}5d)CiQ==fqwz2I2+FUwcJ(!0000AKBoEP)Py8;7LS5RCoc+oA+N-XWIY$<=I3L#1>&~zcuJQgoZ-lvpAz1ri$@N>+9<+VXqoD+>BU01zMyYIhjb`7UEc!6B*Q z|8t4x)T&LM!i6|}MWGzu1tarj5?i;f=d&+9;?-B4U{no9)m^>m!wrK{ui0}hkuN)piW(=Qba1EJxAr7=Xm?}4VJH5 zz_ZVdW#-NJoLiaK5W-Cr z1)kzDY71o$Ms1<%|I7_KjcSvwOx3GbtNODogc~&O*UC5;Mj_|VpJ2+Aml-$K2VY-r zM)`O#YUBvKM?8&>*VA~99FFg(5losmme(dd%jD;uValtMc>j05WX9+3vt<5sZluOz z)D+0Vg?N)rC5MqA1<&mt>e3+l*2Xk!B?j_@Zha4&fm_7b>p0e^Ytzqxq+C_<<^<3&jNBFwrXEIKi| zkDGKV=|@O>@>>m>l30Vbgh#`uE5#ipm~_ScVbm2P!lW(Y#EE^p_M+SR-d@8QsKJq%06B}^$7(ZvT) z8t%`bWnZ&?<$}TD4aJxZ#WDy1Lxh0yzjlIAUwX(>xKYlyBHTTiw51reB^Y%g`o!ys z(Nz@k@dxiPajXxceZAzy=RIGQFhx5XCAO8I2^KAO;9RinqNz$GrWFA>Z-kGhG zhU~?dcoy58YuNKMu-(3b<$4&#D`&ZJaywuB`5o@wN|i;M4JCMnq!%ERC_>Vy0-v1T z?>J-7lx`B@2QpoXNmq(2xG(!AeHkX5hyf@jeJPT@gsTY={QQ+?Wvh=L>x+-~2u6+^ z!6@$$Od99Ir*BPS(L5$vF0S=P-S7yzk&5u zJeKrON}`UkdDf?d2A${=UW&z7hS^a1NR;$D!l+UGxYa?dsYXpnuOe0!D#ZTaC}sDy z)r=eC#e}h=7&B@l-d<1P>pg;ZUY&s7$G;?K$!7$w_&YIvGf6+NlKk^KDUCRUI{G-e z#Is1(!>PP;4M)KZ?Dwuyc{>s7jR!(=GsuOIzUw*Q3jzVaq#^r#X1{`D8wKjVEu zR{ovHwcilAekOq{r*VGuOwO#HOXS|Qj7%bimrlKT|E#LfwRiFG0 zU+>|J9qq%UiKAKm@vjM9HI2x1-w?KDI)Tgn#_2_$5wd0`5nC2>c=1$r&6`T_t~FGo zMN*ZYMztyvXF)o)JBe5YfVktt>|9DxY=|sa5k8c7Q5K>cmH6IL5Z0G;WiF9DWTZ&lCkGr!+s}`${XPr6HbzNU^RDdUc+iCm*e{& zDE&dw7mHHx9Z2^hvwv9pkPtsqrp-n*KQwOaUro%aF9})xB}?CXlfVD^RW^P4HW!zC zLHveUr0!lq^4{eHE&75L@BN&w{_qR_Fy%#NfBa|GfAkKAzkZMNtG?l0xIdM*E>oEq zMa8v?6vv%KcjYXpr?z3z6%7gCyI_cNFltr)kH~hv?9aZixkrsF^CyY7m?}_0c~AO* zHN^PM;>ef3;l$jJ***PF9G~?e;VZr(anoF~{nwxh+QsdYn>arEWA@MgiZx&Sp4}_w zvU}#|9Gve!#Cnd3C}mW{4mB$8Nk6%huvvd3WX}5pul$OGGe0C~`BcJIPbY5uOm6O5 zPD$W)^f5;$4m-rnfUTq**-XYce`0s8;=;;l#BX1KDdhr=TTxuvI0yf)|3rk}Y%cFz zO>)Hf{_HElJx2wCG7gl0yB`>}#gDr{GM2l9a7BdYTsbzB=*N$#xp{6sQA__y(9HJ; zUOk7;F4K;F^y7%v^dmJ)<5D+Wt;Jo+1#(WOUo{rG0C?OBE~ z`6Bvj=h!y=FMR#(uUP!&UlX@w4kZ~0SWRV5grErb90xT-Ly2op8A$rl50tDcVm-&l zMGn|roU=+AkEoy^DT?s5UlX`)Hm6oj=lrS}gsq=T*xFfyFaL_G8|HB5z-lVa@4%LD zhU#0f)a0jN&rL$gxI{t70d5{%k2x(2?bSd+cC5hf>knA=@X>1VItHt{?;C%2MwY73P&BC%v%qCDXOaeLNsX7f_6 zoIN0~|3Yk~r0#ct=X@v-kGa869Mlg$GL%b?T7D?;-z9p`IkT3`>!4sTW--tHCChIMD_PN!V`e(2xFPM45W&R$&z7Ui5p6|#iYez5?L0b*2C@t znXfc!@r>m7U_wsrCw%`pf;TQ8bp2ey*Uctkt=I?5CUwVRa*z6<4LgYS>Uk1z%uB|3C!U%+aX7Q0s7$|zSyL$YsX^bbVo+cS8FdH?pI3aY`Qg;$#0=b}SSkQ^33^r2ORZCOP4#sx(B%_Yij zHgTKglD20Vc_%iZ4&9IW${D0W<*eXD~j417pY1O z#G)&H9Dw+aCdCC$2Jxs1BxA{vVUoVWUx*(7AcX4rU?`$>@-cDTGb+vcL0R{7fYq!e z_0m~_H!mb==Q1LhOw>RLin1v0k0DPlU^-v)Wj;K02mPO>0UKf zNi8=@0bwW*7E}360YDnc0g6CnbZ1*HJ3yI#-+1-nF@o02B;n9{F7H`I%(f*mfRueJ zxO;XRrQrv-b8;gA(>~}f&RuAai29xksglEHoT zIS7F0PjZhEp8f9=>^|>ygVn4f;mlqFS57B# z+hP(9tRr^EGUB!`B5Ch3ZlBytY1n>>f_Ibc??=+QMMTY=&Y?fOP0%-=leKp(*6SCr zCY{2Zd=7J29->!yF4u|!Doq+hxSjCb03LCJYnUQl85QwLDLm=`PYB|i=j(yF4gny> ze-lBgrW3YdHc>m4kg#VZm$xtB%C043AKO6Tg`E@!@8wp&2Ci;iK<2hp6d&D9&bBpN zUOk7h=)*|KXOZ%6$il^y=A!`I;w!L86(0RagJ{O?hCBd75%1}QVaf{dC;%Z&f$?Oa zq6rQi22BycTNZI)^*4mBn@Qy6`9yD9Ozifh#B5uHD1+Ry+fYXxMwf7s!V7yz*)g9R zJC~9lu!D-IBWPleV$O+kU(^`gwXf_~9?iZ@(qgj=UW(oQNjT&2exN{*0eC`qH1moB z9vv0oHj80M2qkxKaM5oL!E0v`vUWD%8|D$UWj?Xn7ZJC8iChX|%`Xn!k2Uoo)prwd z+`5cGUJ*`WxON)j^kuJ>Fl(@x1rXs-;f%f*qA5NR zfM@ofBwj!e03L%N>A95<#s$CGg!#=OT*QVsL~NW(%(jKZ?N~(OPEiWW$vV0bwOH>{ zf^cMpIKZ|Jgkzt@rv)DBu4;{#S4*=Ru--RaF1GS0>&c%gcEE6hR3QP z0J!=c;6Yjepp4%IL2-i^MeU1a@an0(1k0l55xHqT;Tz@>A-iB6aXS`rW#?j&_AV!F z|4MG1*hF#g0rar}nA0v`%8JHXkx!-B?XJPUTP(GrzTI|Lgxf88l#q{E+yJV~TB zIfN6$TtMgxm%I!r02IQ5f8pb+f#-Qo@yc9VdXLa;iwNC3pYSaUh}g7%h|LR#+PaWv zQ35-J_+?z%yOgv8E4g`m19!z;;e>OTin99bJ9KFYxFWMk2(d!A!)lO2fnc}lsS;t) zVz&;20z)3nYN>xC{(9A{^g_}S}m^t_kwm%cIhBeehO7q1NKUj97=g9qX2BP^a<+|C=0JN;;b~{ zuo@+FBN$UoQ&oNk zN2Sycpvr3O?=fQT4udUn2Ei z2zg{uzUp(^UjZOSAzpcHmUO7{GP!*202lYKA@ayZF6>xJu-{BVH_jt$%R(;gSWNux zWhCrgCXeYy*K;p$2SuTKD2wq&d*u{TY9RLPFbp}-G}YU2RGD$u+#m*oD*)UMaA((@ zZ6UteW|G5MX~1dI_l4(N-w#89;IwL{4ilGzCZh%cK{9DEKS8)6S{bcoJtg@$HnqA=gQKzCCO?JW)c07N->LQsUuR=2rr@9Y!rhG3++YOwGDAOjF&XNb#T z@nbS-Ttd7Ips$VUpd;LvY@{L~UL)maGtZT55TCzmv8W7mg}- zFHm}dB3{(G2w`~<)pm*MDyh!}ZU6#;0>X3N52I2y@aJ=*Q4=%>z!P?NG61t4i&4X^ z>xpEi#!+xP4Sn%#BDT#XW#3W~cP$}$$6_w;UP0o4H6)0o?(kZ2&TZ$;*=>}B?njdl zfIj&w=IcRJ%Gtk!^G+nUFKnaTWtRc;KIo#Ot!a=G24%fZybPd9qNYDgvhZq~0Xh0W zJPM)OrW<&OLef`!pk!avwXnBm<~`>ELQ(EbGOtB(`+B0>{KUgc<>}$1A6iNBffdB> zTfvn>Ye+q|k!uH5k#%x2MNx+-yts$bh=XVn17z!0WrtzE9f>U`5`EGc680>lwYHMp z2c7gj?B?6v9y;2aa8^lj#)r!MfN)O;9&`I(M<}jvRO$zAii$EYOInw_qzUnlY;Oe+ z5oTirWrf-3%k#N=^9uRd$rR+IQc-f38mpG9(_2Y9w2G_yR*-gVBU$HmlH$LH+h@07 zObtXGdz^~sBj~Q3mNQ>-HyY>N7_3?0WSv;Yjni9csdw=3euoS|KoHU5s-oIjPMzIA zjY9|$SvFHsWunGzrnWDJgkd*Q(-(>hs;dlxZ;J~6l2Pj~vMaJJ)>_ZCSN#3Iq9~i9 zoGaW;4yDF!qFj|tao!C|@-iq_-J;rV#E_fDjU#Kgesn#z&TJT>o25DpOiprfUpmikIub`8zd1{!Nj zG&oJvIZf0!BpHAVqQ49VJ3s*-Mj3)bdi>c!Ns@f6W_@qJa7l+jQz#2BFSt%=ZVI`n z5tQep)7n&r-Ks-VdY97tEY!t!sCAfWYpmg3#1Zm>c2W>=kfP|rvYKeM>M2+1IL~%u}!-Ntt0K3uUa7aTxgk5RT`&*1^^y+)4 zRhj6DGtm}jqA9w8Dm$L*(E;Qnh0xsKq@}4&-j56W|Kk~9>T7Ir=dM!cQg-POLe8FdbGzjy(`?EwAb ze-@M1!ePUPsZ<%h8dYYmp)3cp`VQubyGW(kROF|Sn|zU!aDT3a9whgAIL-BT8ta@G zw8hx11{!MYv^Bfr&aJ;5hUW4S^l`^z+gme2a1~vlHZKlC{0TJSyK&}3Qm?v-Ejxlc z0e)QFy99?tPiI>bJ>Bhc+`liHVHcfkb#%4ZX>X9|YO>MkGWP=zb0xYOEp#N(;nsH%1oTkRMB3-eoLlfk;VbuxEzixEqV+ z>Nyg(%qIEx7V4`j>Fj9ceou!x`}aHf_F<1~{gzrG)JAu66`hThwAD*=Hk#>fvLXv_ zw9wOB$^8}^jgE5pyl{gjfV%1-YF`oVIXX-#Rkfv<8cPYamJ*y&A=Zi!hi%j?Ru2dfFSYWJS7nc)2mu+>56s_cFD)F*tKBVb6}F zDmwymdN8-oZ6|E$CuCnbO_QsJuC7*D{KE(C9?<)snD40P06=%{x);X%8dCVMFjm8G&%x|;1Y)mo^pmU>-JYJ8r;J?FKSlFh;aHP$j& ze2ujno4yczQ3jg46j{6g(CDh6#!*RawT*^)CoRnlba%DU)o90_6G`=*XzK38QJYNr_wUs>Rtf!~7 zO6~`(wFVi4fYIf$@}SLuU7Ia~>1nak-DIb=!A7l9`f-oRDIlE2;vlEF3=uYi3VrcS z+5R^o4spM$m2V&3m$N3si#||aYnRKQqoW1Uz#7z<)QBFC8%s@IJkHzEXrcqS<-du% z;QeGCSxe07zY(@(8diN7o$XCL=y7j?gm@96A-1==aMjvqX{@EUv!45{cDeHl0HWc! z`+-$HZY#e*SF;5fK(m9cCdZSzz9RIyM!QrT=a7o2)a6l>b(yTFBP5;Qf>SEx+ur+f z*6M4jvy#U88roVLx!>JRi_?HE;WWiZx03ty-#Pm0U$JrQ7*0I#oz z#MxiG!G-DXQG7F%jy4zf?{~<;g?Ov&kaY zf2BHu?iL&OTOD*aJL0}e+YdhHw3JF!#(cE-$>hWZkQTg?lB~=0J`{WPX6kF~@=XlU z3mWPiG&a_uFSk?|9Bm zdJXm2^D;Ok`@;UBDR#6q(&DP-L3c9`J8J1^vC&>{q@`Bx?)G((-1M3qWmKE;KwS*`@u@T5kteC^3UD!^0bFF*XtFiZAvx^l$+_#HfzLbFHCb8@J z7g;dMm-Wv+&!4kHOE!mmL!(vTV#~HjW;{3}0{je8;eN z;&U7sJDzhsW0~hQoOxb9VfToUM7;buy5py~-`yrRKd~be%c>}W?yhEfyXxdd*XfdI zt2ffoWTm^&Chq_{1ps>qO*NWFm6DLvhv!8Q%;tK@6@EWPF{fz5> zn?}aYecU~An(jW)J)JEwfQLP8^maOB`-|+0eL%O^^|ji1ds=P(H(7rYn2cEe$;CNI z{uMmA}g+ zJ^8ucCw<|6*KyUIjLCP>W0z#ag}SasUm$44EOt(OjwK_WB6`v!Ql`8~$n%pp`^ry= zp7bgwy+(6-!gE}C^>xC>jAzF)69{?hZ7S1l$~7;nFKWNLThxBN-2ET4IbA(14*%Z& zB;i8=O^XWrAT8=bT*PKSY1dDGil5IYl7Bjdm=`8w`yAG);0dY zn^$FQ`r?mL=b4x+NVQuA%ST c{0oKtKcKyNE@Mz9b^rhX07*qoM6N<$f*E_(sQ>@~ literal 0 HcmV?d00001 diff --git a/src/app/globals.css b/src/app/globals.css index 3edc26d..3e86ccd 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -15,6 +15,7 @@ --color-disabled-text: #8C90A3; --color-menu-header: #C3C7DD; --color-icon-deactive: #A8ABBF; + --color-icon-active: #292D32; --radius-normal: 10px; --text-sm2: 13px; --text-xs2: 10px; diff --git a/src/components/button/NightModeSwitch.tsx b/src/components/button/NightModeSwitch.tsx index 093bb18..79f73d5 100644 --- a/src/components/button/NightModeSwitch.tsx +++ b/src/components/button/NightModeSwitch.tsx @@ -2,13 +2,13 @@ import React from 'react' type Props = { -} & React.InputHTMLAttributes; +} & React.InputHTMLAttributes; export default function NightModeSwitch({ checked, onClick }: Props) { return ( - A @@ -17,6 +17,6 @@ export default function NightModeSwitch({ checked, onClick }: Props) { }`} /> B - + ) } diff --git a/src/components/icons/GridIcon.tsx b/src/components/icons/GridIcon.tsx new file mode 100644 index 0000000..027a9aa --- /dev/null +++ b/src/components/icons/GridIcon.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +const GridIcon = (props: React.SVGProps) => ( + + + + + + +); + +export default GridIcon; diff --git a/src/components/icons/NotificationBellIcon.tsx b/src/components/icons/NotificationBellIcon.tsx index b5440c7..a046d40 100644 --- a/src/components/icons/NotificationBellIcon.tsx +++ b/src/components/icons/NotificationBellIcon.tsx @@ -13,14 +13,14 @@ const NotificationBellIcon = (props: Props) => ( > ( /> diff --git a/src/components/icons/WalletIcon.tsx b/src/components/icons/WalletIcon.tsx new file mode 100644 index 0000000..1caf08e --- /dev/null +++ b/src/components/icons/WalletIcon.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +const WalletIcon = (props: React.SVGProps) => ( + + + + + +); + +export default WalletIcon; diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index 25d0854..3e6ece3 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -15,6 +15,7 @@ import DirectboxReceiveIcon from '../icons/DirectboxReceiveIcon'; import BlurredOverlayContainer from '../overlays/BlurredOverlayContainer'; import SettingIcon from '../icons/SettingsIcon'; import ExitIcon from '../icons/ExitIcon'; +import NightModeSwitch from '../button/NightModeSwitch'; type MenuItemType = { href: string | undefined; @@ -66,9 +67,11 @@ const menuItems: Array> = [ type Props = { menuState: boolean, toggleMenuState: React.MouseEventHandler | undefined + nightModeState: boolean, + togglenightModeState: React.MouseEventHandler | undefined } -function Menu({ menuState, toggleMenuState }: Props) { +function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) { const menuStateMemo = useMemo(() => menuState, [menuState]); return ( @@ -82,7 +85,7 @@ function Menu({ menuState, toggleMenuState }: Props) {
  • -
    منو
    +
    منو
    {menuItems[0].map((v, i) => { return })} @@ -93,6 +96,7 @@ function Menu({ menuState, toggleMenuState }: Props) { {menuItems[2].map((v, i) => { return })} + }>
    • diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx index c421a06..52e1f73 100644 --- a/src/components/menu/MenuItem.tsx +++ b/src/components/menu/MenuItem.tsx @@ -6,13 +6,14 @@ type Props = { title: string } & LinkProps & React.AnchorHTMLAttributes -export default function MenuItem({ href, title, icon, className, ...restProps }: Props) { +export default function MenuItem({ href, title, icon, className, children, ...restProps }: Props) { return ( + className={`inline-flex gap-2 ps-8 border-transparent text-disabled-text text-xs items-center font-light text-nowrap overflow-hidden h-6 + data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black ${className}`}> + {children} {icon}
    {title}
    diff --git a/src/components/overlays/BlurredOverlayContainer.tsx b/src/components/overlays/BlurredOverlayContainer.tsx index 8228287..173ea0a 100644 --- a/src/components/overlays/BlurredOverlayContainer.tsx +++ b/src/components/overlays/BlurredOverlayContainer.tsx @@ -39,10 +39,11 @@ const BlurredOverlayContainer = ({ data-visible={visible} data-loaded={loaded} className={`absolute inset-0 flex items-center justify-center - backdrop-blur-sm bg-black/${bgOpacity} + backdrop-blur-sm opacity-0 transition-opacity duration-300 ease-in-out delay-${effectdelay} ${zClass} ${visible ? 'opacity-100' : 'opacity-0'}`} + style={{ backgroundColor: `rgba(0, 0, 0, ${+bgOpacity / 100})` }} {...props} > {children} diff --git a/src/components/topbar/TopBar.tsx b/src/components/topbar/TopBar.tsx index 2360167..6a51fa6 100644 --- a/src/components/topbar/TopBar.tsx +++ b/src/components/topbar/TopBar.tsx @@ -4,6 +4,10 @@ import React from 'react' import NightModeSwitch from '../button/NightModeSwitch' import BurgerMenuIcon from '../icons/BurgerMenuIcon' +import NotificationBellIcon from '../icons/NotificationBellIcon' +import WalletIcon from '../icons/WalletIcon' +import GridIcon from '../icons/GridIcon' +import Image from 'next/image' type Props = { profileDropState: boolean, @@ -19,45 +23,54 @@ type Props = { function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) { return (
    -
    -
    - -
    - S -
    -
    +
    +
    + + {/*
    + S +
    */}
    -
    -
    - X + className={`z-50 top-0 left-0 w-full h-full px-5 py-15 md:px-15 xl:p-0 fixed xl:relative bg-[#00000044] xl:bg-transparent backdrop-blur-sm xl:backdrop-blur-none justify-center xl:block ${searchModalState ? 'flex' : 'hidden'}`}> +
    +
    +
    + X +
    -
    -
    - {/* */} - {/* */} -
    -
    - ۲,۰۰۰,۰۰۰ تومان -
    - {/* */} +
    + Profile avatar
    - {/* */} - +
    + {/* */} + {/* */} + + + + +
    + {/* */}
    - {/* */} -
    ) } diff --git a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx index 510b658..38fa134 100644 --- a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx +++ b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx @@ -49,7 +49,9 @@ function ClientMenuRouteWrapper({ children }: Props) {