From bb7b07026f18df98184e1338b49343cbd26a1182 Mon Sep 17 00:00:00 2001
From: Mulia Nasution <mul14@refactory.id>
Date: Tue, 6 Jun 2023 20:35:02 +0700
Subject: [PATCH] update new sidebar (70 %)

---
 public/images/icon/ico-1-master.png    | Bin 1581 -> 1049 bytes
 public/images/icon/ico-2-config.png    | Bin 1299 -> 454 bytes
 public/images/icon/ico-3-template.png  | Bin 1617 -> 1281 bytes
 public/images/icon/ico-4-drp.png       | Bin 1545 -> 873 bytes
 public/images/icon/ico-5-rks.png       | Bin 1590 -> 978 bytes
 public/images/icon/ico-6-hps.png       | Bin 1525 -> 946 bytes
 public/images/icon/ico-7-kontrak.png   | Bin 1812 -> 779 bytes
 src/components/header-toolbar.vue      |   4 +-
 src/components/side-nav-menu.vue       | 227 ++++++++++++++-----------
 src/dx-styles.scss                     |   5 +
 src/layouts/side-nav-outer-toolbar.vue |  35 ++--
 11 files changed, 157 insertions(+), 114 deletions(-)

diff --git a/public/images/icon/ico-1-master.png b/public/images/icon/ico-1-master.png
index 5d5aa7740111c7ef2ea675e0ef3d7155d1b24c53..7ab7063cb925c1df97486bfa7a601190b370a233 100644
GIT binary patch
literal 1049
zcmV+!1m^pRP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1FlI#K~#7F?V3$e
z8bK7t-|Hbb=t6D~yn)##>YPAtfb1exN;!de0<kQ088|`o1YnZAl@myAFe@Dh(=V?F
zp(rAzyO}|g>feT<==u0}zmI><0N`*q91e%$zXc&<{F8PG^Wu=Nw9S_*0YQiYt|Y{*
zXfNnM#$+bYKWlHH5J!NxHFFSAhtO+A)%PvPh|~pY3Hy^Sfv9I8G&O;i!lp@t`n_M*
zVJ!$D1?Cc1JZTpn^0~4=I^?e<NRKWeHf1zuMYW&{b6_P<3G4g01CpeQM-egv5m;z^
zY%A1A;39=hV=Gi!;L64KvLxA9w6G^=JXAMox`T!8Knb$`3dAW6{mb^2?qF?!+@N2B
zxCDvbs_s~QffygdtAM)wj~myzqqPM-RD%Y^aX{=o;3Xgm`P#=z1^Le8FsnAfIl!J$
z)Df@@nL}M7X!*;s5mwBb|6GkeOQA`maBGOFn{(MW{TzIX0lSx;tP{p-d`G8hwqZ_`
zFqI0?{$>EN{8>1^X)j-XI|57WLUgzV`aJTTqb3YKsD84A$et9iWN^yiib;7KeF{2H
z`C7Ja_4~aK#)Zy!1y#exymvc!an6xlT=MP&ct_BO&O>!`jVP|@tf-ot@rntrRJizh
zho0A-HtjqC^}@x?AsC{)g36}#mOK?If4_(dGr_CD8(ROoy^A0Y_=eXfeh&%YR22^3
zvSDKXI2{6$jk2~tp4l(_u>&TsP(*opUk$F3g2Xu+3kX-1p=&B^f^ex9ujy{5Oav0x
z!=;|M8cN>p<yJjG>m+%yEUh1>L?znaXzGm3fi6kew%*K^xJYn#d#s7n4bIn~MBLFH
zsymQ#s`6qkW_%OGVM#U4!LIHh#`CC3ICx@rF)rqjiK1lcW~>8cF?Nk@8bIAI$ZH#$
zrm%K0Ntnbk>0z8ztzr12!^q80EGx)8wjbpVz>@Tw%ph)o5bR>0Z0cf0jND9e&Xk;t
zvB2jZU5qVT-psCzg|U<2b0{-0<2b6ZOKN}tnK~KvrKOodRY)VW1|*wrL~i?^b}|ri
zi}%D1x4^fA7$VUR5V9#CSI*kW=r?*(aSF~M0*~7YTeG2)=>X+cg#dOk-Yp>&Evi5<
z%6sZwnmU7>lNsThOqMt&Gn=_zpN)kQzrjUJ<>Bz;;|rLR^xh9Dp^`&41t*h+uo0QO
z!cHDjSU8z9g^kGcPYBNneRMK}vSCscP09RU7K-Jw_Rh4Ev3*kQa5x+eheMy=!Ob;0
T0CTCj00000NkvXXu0mjf$Wh-2

literal 1581
zcmaJ>Yfuwc6pq+ZhDSxIW3<|?K`T;|eHchK5@;|9iA^MiIHWoVOR^y=BpWsh2^6cv
zT6u^zjE)KxX;eg7p_Pi-YM^3uDD@dztURQ?rjAt{?T7`zZV+gHXm@7!-h1YJ-}%lx
z-)ymFX+lWgj6fEP6{1u~wagmByi)@Fm~W9V(!ea!X_=l*B2Badqi~kQNT%a}(t>5+
zS{yUxWw+rBVqyfL)6;sjN@O4{Jj|EFb6RW+njwsH+Au>VP6O$924NL*`o3@G0EAJ@
zNsdxOYTIJmOepdxJSl&v&XAvJK#iQZSRlqJVhAiajR8(emenqDia8^^B4+OkgB)Na
zh0YXno{Q3}HNaw$!U2>AaSadz0Rof<3t$5xFk$Hn00cr15E6oLG#5cc3!_AQ7#Mvx
zOhL+M5^1IK(Q?d5%rVonO$34thlA%>$Rnu?5JpiHgb)xxxJ(Auo@b>oC)a8ZA7hZ>
zb^}G&Xo9o?K1M8^%%Q~`M(p!0EVgl4t9|sQm^%ZVm<@z^kguz;M78?=Q!SS9Y&)&R
z|JD0KV!JNShJ#w%PUcVsW_G4<Un!etF@<9^N$E&3YwRL5W|AiDX3_>Ad>#Zus4)X!
z^+o27K-6lH(rTwMs{vO^#T<r&M-WC)bTlG~hlLV30z)t?lg6V^v|PxS$sy@NI7%iP
z!%9g*js>^UV^|}D<s<R&us|wgu!0w2eTJ~un95R|B64w~oFXm2NY^6b<yw4vFVXTG
zYkYy0(LT_ZVnId>=$q|-W<3^S4CLF6o0mC^+aI?wo~IadXE*DYuvmVTN~uKWy!vx;
zN}^Z8?jbsI=#(Q(gYK3zY4PTOX+_zeNW=Z6<)7J?JRJUP{n{4uaaWNFnVSZkR=WM!
z-Dz*qmW0l-`qV01Y6U8?l#WaMv*^6O!Q+Wl_MZJM*)tOxHeSeD^JOITK(}ktWas%C
z>w5}^XV)Gp|7yl#MQB1ymAh_|(-l0es>C%EFko0VphX*JCRT(jD1+I7@P`Y|d?2p9
zl^C_oX}W&7bxt=}E!c7^Y840W%i`>q9+-M8<L*(<^4KI*=H?(V`->F+p*#9>Q}3Sd
z3zi35Yd+j#KGAhhmC%;3M<r0Yc%_fSBR*YM_v^s!vvt@H1?<4C?HeyZtNK3wQ@8EM
zIgkD_z42;t+JG&>^IMn|KBX<06%<16yx2MPjV2__uWYjCP+jwt+vt>3HlF@*(+YlT
zeroMddBxsIbHC0-#pvU1<izrNa_h})#rloShiV$8o?5+U>fD0QwybWgw$UH$s7ebs
zx}sK)Iuv`NGT`L&?K}PN{RDbmoA{)$P12ql-Jav6s=A7_Pw+rzYm1|u>gwRH&Gnos
z&6BKDTx!4JdbhtIw*1=t4(;q`U7A0l-~X<Gh%0G%r;zm^DeLBjR^63n&aL-CgXgbx
zXgUuP!jfH;x!!MyxZ9o@N92;GIovJq9YtmHngcFwTe_G1di>?;y>~*brU?G5pp(C(
zNK&|peqm(mhA!iZBV0uW-Ro}L<b9=}ci)7S)j0Y{DSGQ@mgoS4Epodn*IYc^QHuO7
zGlgBwu{<3tu2@tq>)uh8R64&YHP|a(cC|jD#*o+)64nW;Y{tKvT!m=w(}%)RR<Ea~
zp|M8eWwVY`_hl_Aj&pZVf5YzK!LSF1-R~XTzsFequs>$_?Fs&@>ziZEHCyMQz8|<!
Lwp3alpH}z}y;osU

diff --git a/public/images/icon/ico-2-config.png b/public/images/icon/ico-2-config.png
index 7875d8967fd3fe40ec1923d9a780a7777b6ad41e..ea2cefdb615a027e3715ae3974cc55a4ae327532 100644
GIT binary patch
literal 454
zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q1|(OsS<3+_&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~!mT(qZ)V@L(#+nc9-4?763J^1L{clf005|&F0
zCuEl}pO_faq3sZoP^=*1%o)%qD&^s|pk?pTz9W3us_YJy2CI*pbNgTZt>Wu@=WS&j
zK;s!0c0HWfYN5{__vF0q&!v^lPH!t7|I%K)=}T~s3f~T1ah;hzH1}O-m0F&4zxeM>
z_Vw!FVZuMcjr1p1`EGYP*vx4;rG>}y#A{YdLHn@DuNN&Ud!x3oW4`#wvgZN6?nljk
z;<h(xe-QhlUcD2>$DIzSDXh%-zs+Xb-5raJ^F=SHa=fr&DUoH`#m5-i-muQu;kx32
z*XQgO{5a*bXy^2WeX^zx7V6Edo8%{TZozAT3#CBil@4lCpQJ|fPLIzywl%^rE_9;(
zQobvJ70zegPm=oBKCjmHTgiqu=fzgN4BS%Kdw<OxHNN+euUAUeYpmS*nt$IE=4T4#
ur|lP+8EAk0y-CS<=heAu>^VT;p#EA~J1Mg%C+E->5ZBYy&t;ucLK6Tz54o%W

literal 1299
zcmeAS@N?(olHy`uVBq!ia0vp^Hb5-I!2~2bEVPn=lw^r(L`iUdT1k0gQ7VIDN`6wR
zf@f}GdTLN=VoGJ<$yA^YW{u2{h>{3jAFJg2T)jk)8oi3#0-$c7f%X*ziOJciB??KY
z>6v-9O7C~?S5nAKu~iB;^)>J<a8Aw0^r$LI4X*MFNv_IHwoFm7w^OjGumT#8n_7~n
zP?4LHS8P>bs{}UJ3djZt>nkaMm6T-LDnT3-;TxdfoL`ixV5w)In`~fUpkQvPXJ~Gi
zY-FC6n53g%WME{ZZ(yNsXr^mqWMyn>Wn!oR1xi2*i&E08f?V97)&Y68N*N_31y=g{
z<>lpi<;HsXMd|v6mX?<K21fcuM!G;1y2X`wC5aWfdBw^w6I@b@lZ!G7N;32F6hI~>
zCgqow*eU@X3-Lv60o>TUVrWPK!%V*-u|VHY&j92rm_lD){7Q3k;i`*Ef>IIg#cFVI
zNM%8)eo$(0erZuMFz(WnK~@!5ITxiSmgE<O<mczW0x}>Yza+mnBfmhw$VAUTLBlsO
zIWrF=q6yaG>ucqiS6q^qmz?V9Vygr+L@zTl#mdCU$;r^%#mUVG80LnqE>4yPW^NWH
zu5Jb{#)hV@t}wkW`N^fZsd*(Zy(tL2&N%gg5=3qR&}Ns^qRg_?6t|-MTm`VNtuk@D
z#S*7^P`xR*-QtK-uRhQ*`k=T)iffn<Fad#>@Wcz`z>|M!9x%-p0TZ{7m%c6o17oA7
zi(^Q|tv6xb-iI9o?%mvTOXb+4RkbgCMb<uW{P^Jii=*-n&tJO#VCgH@JyilC`MFDV
zJA5x6yQT8Gz)|Cipg_<Ku{oFdtk2Zd7~g-x@LXo?td-m+Ki&A`K4qmuj<0G@=VuY&
zCdorTDo+}ks{SpWFzKcKp>=V$8YaxX$nxTM`Tm5g_H`%IHt{Ll;yd)}-?O}PQ_g$|
zUM_#^&!?2<*O$u3?npbj^%>j!t9x&|ncHT}*%s6>-M97)U-GklkDw3R)=En(&+p%&
zX~6KaxVd!-b3@IApf~bgUNw~&bqZ(R4M-I9U%}1(_rjM)GtRCGW~}%pQNZHOF>8DC
z3d<kMa+WQVi2A$Xg@iYUlwP0L@11Y%?B2X6IJ@NOcaz65{$hWMB~)2|FO2Y+=Fsuz
z{yX=QH@9|8@)k?dS7BWENn9=8WnH}Wwq;K??^^I@**)FpUmx3i)h{zODJbRdO)Sk{
zJ!!j2vzS<LSayX|x>m!C%p_J(tvR<oSv*oqUEaENQtFBHsII>p1`M<97yYgaDs2Q6
NQ=YDVF6*2UngE)M+!Fu*

diff --git a/public/images/icon/ico-3-template.png b/public/images/icon/ico-3-template.png
index c0a7ce0735ee39e0974258086245cd7ef5553088..01d6f604b2a44b642644eec1f1057b0eb90a303b 100644
GIT binary patch
literal 1281
zcmV+c1^)VpP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1eQreK~#7F?U+wY
z+jbPkpA*1Np^DdZe+1KNdf3>chGbHuP8*c$G7hcQ%hn51;L?dvsfi|WnI<w#yQ~LN
ztx2`hm|%x#m!a;!F14UkNb7+%NGo*OVvxpQg4LnWB`xu9@BK(vnv#PHij&r#=%+Z&
z&vstk`@Qei2C%WQv9YnSv8h%BFiCxUGH5U(ibu*&UNi@=$i_#<zcq7E4Vc6LBf=b6
zf4VoIK^c)Qsfxjz)3|9WK-0M56AUckajxxvCmcJ#YR3+++A$v>16>+a6(}=X*JK))
z#Iz1F$c6>cp<>HcpqwzKGbV(=<|)JWqQ%%=w8E}!>tMBG2UzWx?xN+w6&qJU5ISI&
zRJ0fU`CTvE>uuxXR@YJ5rGrT-+KaxlU)<h4v|pmPa+{0YL)C!g7%i*{DK^nfnpaHA
z@Gs029}nf{$%CrA@6y!)=_|FP)cH+YwY>%dNwzh*m4&+*SXfUFF@q^>O>)O4M-PG5
zQxB>8o1kYlc?J`!8!$4v3?p;P8s1%u%2I9cgyNCuvzW>H^>E;k61Lono^1BO_noi7
z{M|H6ET$lp$-)P(JO?*1n3<Ig4DJD+=N4<gd$0im72$I7A0Bw$kw%bl|CuYdVR&}w
zvvl9_Nb&hi2T1=o6S9HbdQmD#L3FCvJe1t};#|cbDX9KyNgi||H1F%TUk2&~?T!Ec
zzbVY{tKVJM@2q9~>F~q9>v42Y*$bmB)Hy=!Sek{wQ9uk|r^jybZ7f~PQWGCEkM?zr
zCNO(hUbcBCyHu)p&S>#<EE9U>FrpKSx<=)d%Kg}RT!$ZC`HgRX?0->5nFybM>+mx)
zFw;F}y-obP{>eZ1dd$;*?RQ+4OWG#h=@ehbvH+<H#Ejt|nO(YY?1yO{B&|8h5@qZ2
zW6dE!5TZEr+!&(Lq^#1M#L7B9rgL-#E+!U#6kUe@L0{lT@pUY<YSi@{U<|oMC(mBK
zp`1_-(A#M7{NcI3q4i)r-=^SnY&2BT*b^@3J%JrfK*e}b3eqfv>#!7-21r6}2+kl$
zgIrg`n*}kmwZ6KG=buzOTp|d!R0|50@)`yyFz2~a_R%sgO6SOk&gnjHQ)ucve}T?P
zTn|5;N)DiT3F44*;~Z&TevOg|pkt=qe;v>ioFd8D>35mdK`Ewo3xZ<+4^?27piICR
z8tOb$a-@T&$A0CXDG+S`d^@qa&c7q*7!v$KiFpU*WAd-m(7oRFp2BNbX4R-XGj+}+
zW<bt24uY~L;FFg#>g^qc{>wKH^UTqolZWQLft~oy{Y-PQMqBDdU2zq~{=gt*gt8Y)
z{K@xswLH(eYF-KmT60vEtvH6~mSKJ^4QE@o48WdRwY>)KB&NGsUhw^-t&+bav+eUf
z+u%EonL6TWKm(oucbyYQ4KLF#t}npkqJF~wxG8`TBrkh8xuTH{mXZofsg0>VDK;LF
zzfrf%C9U&Pw@dh4WP2VyD-|z}hxWzQQ&4S4XzI1Ke;*3)iFz(7FhMUA@?68wz$6v>
r&<P{durvA!cVQAWu(7eRsU-dbQln%{t#l)O00000NkvXXu0mjfK`mtK

literal 1617
zcmaJ>eM}Q~7_JBi2m}E^5y@Gs;#_+lfc=o#SlUV*#ZrnE4AblN3bnLX+k;lrX(0IR
zoKaGlLqy^>Y^I<xnO{X3aKJ>S6*rv<PKHh=Mv+aYW>*B<ALu1_zxVg%eV+GuKXO~;
zX^Vmaq5^0%T97nFq@d0u>J9btrM?rg&m~aDR8p)WGYBndMa?*Ep@vZ7fYgBI;tCwq
ztXbWPQ;6|#I;DzK$x?Y3VPK)27?#aoqR<qfz-B@*Jx&5@JXdGr)BDdj>3~kdr!PyC
zK{8V^o~KJGGUFLVX-cd}k8w40!2%%3#-j)fIEex_L%z|%v+?OeygbVGxIsEF6hi9x
z^tYl^GC7b;m~nv1f|wWtK>(Y}g4r;Ju(hcAV*r5=1cW#sJdcSWy!b?30t^g4bSj})
zqva_?lHqjJjZe=bNfQqQtyU|`8qXrkxggBtazO|I5rj!aFfD70Bx++CEwLjEBHV(R
zbtY0r7y%C>swN6ZKAjT#whDu3l-6h&?iAHC(1w~om<4&N8VQuiJ{)Q=j7D2X1^!O&
zn8X(48WRpGa0^jj#;Dn8V?C)%yks+ul7v}F5cwmGl;;s7VaX#*0FuChfH)b7>5LxF
zoFRxz#*-Q?Bx=NPsfbUfNLV_ZhR1;*j#vcElOXUy7#53!T*~Goh$WCH9!?aCN3bFS
zD=^?jas;b+hh@JP>sbhciOMX(&ALKdBQX;OV5n-IZVW96h)@W##W2Ok9$U*>tY!=?
z!&v0KSdbC}dS?5-S&z7=1@f4q%S&BG*B>`hJ8!0zdyA{NghumnN<|Bmwi|AHyFM&E
zyv3<`x=)9+-m5q%-LrUm%aJ_C!HG4K1L=o=2Dw!`*GN8WIo!Qr<!U@9Jp4~dRl_8P
zJNs~Ewy?f#5Z}KkDQb@t30rbpUQ*S1D7Itj<G?^G>u>92?j3G*%~FTFQKD#m+G}-8
zoidQx-deUT5F|v-tFQVV!cjlpy1g&BZQok@?z>scPSjo1TaIM!*pMdNdt}O!C(bUp
z8e2TBPgUH|*|+N7l66^4ORL<qn?k2u{m6SqeoZl17g&DwW{2ummazQMOLk1lM*AY>
zX72d$K{@lY%FP^2kI9{z4%Tju?{;MeM_)L3T#+T&wX<aBHAmz>&FTR38~?(ilf7S5
zs$V>4nkC9=kve4+jb0Ad!Bek8f}ZB{?U@gIX3lv$P!z%1GwIT*b7gI12llS}Z0@d7
zWenl$3*ozKKJD(=IQ{qVuV=+RvujrKeB)b_&T9jpkO9{TG<rY<C3oII#L<P%NV#vp
zxb}OQk)`$N$4Zx8-4Z?fn6F>l-N=y35hhF>lh(D7@3p!9>=w7eXZIJ==cOHs>0Z{Z
z`^x_YYB+Q@)c;h<sSNJ|>mz=LkN3LPZK^lvO(j1r_-%ixJSXCsPyX!wm){DETKnMX
zN!3w&4zCmq{r={~wY9Qd$J&{jemb$MA@TmjarUg785I$Xr1IsPU2eaeuv%qZ@xij@
z3hY*c;M@+*)-L@vKlb!1mtu2L<T2Lr?S3lNb6REajVET<{|CA8{tAZI0mg+R&pVR$
zy4DLP92HbncV3?nHP}dK;rau~pJ!(<QmZ@rd*XJ^oiDQu=z<(>!33W$*5K({(cR}-
zMn>d!Guj@6RWxB=7G^SI{#Y(+=<0U}X3w$fcSE1Ftv`Q#>+9eZH}$WUG*0{L&FyQa
u>!$P)Gw%Vv+z~RQSA1R2ne%m(UV*f*fr%FrqY~mhKY6J*O>|VaviLuGoN1>3

diff --git a/public/images/icon/ico-4-drp.png b/public/images/icon/ico-4-drp.png
index 429adf976b925c9f95d118a4de021a8a90d4a70d..e36b0ca394adfd13e8e1d6d9fba264f8fea6c510 100644
GIT binary patch
literal 873
zcmV-v1D5=WP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0{%%vK~#7F?V3+g
z+b|S|f0B%2V3QlvoS<~yHuVWIJpo|}Os8-H-~`YGuuM2X%L&|nd*}(s5z+-9D3<z^
zz!ZjrK}JeU(KnNECVq+iS+b<}93T(~1OkEQ3quK#tvqEhZ`0T3=@;rK34=aT5ZiM3
z^*%gdEjW-9hZ_1*GNZP8i&+nrOz(a_*5^fr2q_c1%^2^TF1^`=2O`)q#W%q8rd)1p
zOOz&MHIW-h9jOc&`OMxA_>knVgfZ5vovRKWPhS#rl{8bC)~ZF4>u`*<pt<LIYxdo8
z1l}d>1>NISvI>F*Z<19JG<cD$lAyu4WYq)>P9>`-XmBQ3RYAiY$z=EE0xX$~pvFVz
z(SMSKT4cIt!IFsxnsuy2_(1X!U0O!HgC!FYlq-!5Xp+?0t|i9-Wda%#qRg?YJjgiV
zzZbO62k*gE_dQ#FTdLA945xwy%_vg`jd&HoxggP%OIa5cA>4zuFvXk6PW~H@K(1sR
zIKoF4ZBfT~Y)PX7N4OtkxO#84iM+kulnLtQ-c0uL^m;og1`hGjf~K3cWz49Ut5eR|
z3w2rSGcBl4j5*pKlib{WF>r_%!LyY{Hss^}iQkyxM#i|riy%$-p9?NJtWYV3n$t>s
zVVtiU@#)=f$0om{*4i2s1BZAK<ht0b)rzi^_+^$h$pv~Rv05|xOkO8HWZl`Fd}NH%
zbAbmmkD5|O^IVI0=&8m@j5K1RpN;cKEY!F1`h77j@gi6hisr#f^RE9A)H>>FpL#%y
zOT2VZ#ne|J2Pa&_sy++!Br6UEdyD;>F{f*{riG``MFr!lYFfP1F>glTtv}TLp!lFF
zrfGVh`R+Ofp7GLx^k}U$<m2pW-}O|`!WeKW=rWIUMJQR^fohs&n8%nYd(09osE=gK
zS21SJ<7k1(j0d*gv%Uu@TUcaD9MY1jXC7rceA+t{({dL{^pTcwt90yFu%z7INGR2z
zVZY5vRGO`!;xH}cjzAZ-N~MrMAP@)yo&tXXS#6ZGP?bc$00000NkvXXu0mjf`n-$;

literal 1545
zcmeAS@N?(olHy`uVBq!ia0vp^Hb5-I!3HGRqxPBrDajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_)*%o>>?5hW46K32*3xq68pHF_1f1wh?E1MMpc5|gu2OB9k)
z(=+pImEP~(ucVNfVyhHx>TBRz;GCL~=}}db8eHWUl3bOYY?-2DZ>L~WVFffGH?<^D
zp&~aYuh^=>Rtapb6_5=Q)>l#hD=EpgRf0Gw!Z$#{Ilm}X!BWpaH`&0zK*8Kn&(Pd3
z*~mOCF-b?k$iT=*-@roO&`j6J$jaE%%EV9s3Y35r7Nw+F1-ZCEtpoCGl`=|73as??
z%gf94%8m8%i_-NCEiEne4UF`SjC6r2bc-wVN)jt{^NN*WCb*;)Cl_TFlw{`TDS%8&
zOv*1Uu~h;(7UGNC0=Thx#n6xfhM9gvVu8M)o&m^LFonLp_?717!c`ZS1f?R}i`C%b
zkjjEo{h-w1{L-RiVBDoCgRCmBaxO|uEXgkl$<NP$1!O=*eo20DMt*^Uk%^vxf`)Hm
za%LV#L=&vV*VoE3uec;JFFDoI#a0Puh+bx9ij{?dfrYD!fuoy|p`)RptBaGRftj0y
ziL0A|i?N}pt1C>eOMY@`Zfaf$Om7N8uM<wapahXy0JPa9wJ5VJHN~wcKUV?lYpYD$
zZn3~=9#n4%Zns$C)T<A4j6NuCk>VOA1WZ66COq*1Iq>A4ng>ktMZm-zq<FxEfq|*q
z)5S5Q;?|vM*7=tMM2`R8S2pK{@2v|ifm0e*adGLCJle>}eMUh=jZNhUlW>lXM-7A7
z6@3QnU_sZAj@GV)2Ut8<ou({WG)YY{Uwzwq)91T%wa)vMJ(WATt!Dk4Irsn0pZ=&)
zj%m}(>#N^-7eBS~@pbh{-JcV7OYGB17C-Uh1t#{tesAZ0u}iEaI4WSv{i?EWg*)f%
zvWj)6Q~7uN-`v*o6=6|_A8u)^w3=c(dFI;NHy8X#a{T)t>-;-0w=eq-d7YNDnzu*e
zaqd>;g&H%ouWrjLS7w(97X9#lNw?c?3G>42I?knT{7u*9g-dbVk|;Zo<JYeEdDepU
z_EqitU+r%39Y5q%T+XEZDQxM9rH@qKKKtuxvoxme=hoi--nxYUtKW)zNYzS<KPT^a
zTGYU#E$jX<uX2vLA@Q4Yd=B=Q6&!ySkryd)bl*0KtEPACN*Tn~8b^5_zaCq;Bg8fP
zg<Eu@p3R-=%{@6vZ7g4(_)h-N#5LO~^w*<>bMCKx9C9YawbN{a_W_}YcS7DRKQvqI
z^^TS_>DM+p95rkbZZ_@XkGT`O=D?LurVx)%rp3#3S$vat%=>&V1asb-ZqUH0xo5uG
zs>iJ+F?tUsbZKSkdBm^GxOb)YMF5}u8a0<W1uu@-GKRb9YQDMP$n$dP^NtI<oIMW6
zvFWuR-O2y%l+)9-{>hTcZBy30(@W4?apvyHz~)clbsCc|cwCC=d-m2q*C3(Y&3)U&
zxF-gMsk=CObK|F!97_l^apBuB<I3dCw$krk$G-8FtgFxE`^T$vevvct@zq(<>FP!&
zPcWwY?k#(mu+I4R%C?U!+t%(fdNaG0UH$vJgPn&WbT#(ZaTqY1FL^r2*RqiVR5*LO
L`njxgN@xNAn9)cv

diff --git a/public/images/icon/ico-5-rks.png b/public/images/icon/ico-5-rks.png
index 19aae33ab71e3bbf1aaed254d9daa09dad24948a..89c9f00504f0aadae55ee1c2445b6bb6a56db0c5 100644
GIT binary patch
literal 978
zcmV;@11<cCP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH17}G@K~#7F?V4Ru
z+E5h7&rJ}6FQqFeT|xD|9mooF2jHVR9dHGO6_`GVkKhVgR{&_=r7I}i0Z%nJ%{~2}
z=x7H&hMV3%+U7UIgbCchKj+@_bwiYslarH^^Z%kK0p8J|qKZxr!#8n-G9^S2k2SeL
zxc~N)Qo>l^jX3v`i9dQ9I+*VIQ!=E~J^#kD$fp8Tl<V}Aa{52^-gPJi3S`Qf(<a58
zaK9Ral$eTIcLySp3)&~9!N$o2r6JNGLzGh6>oeV_KPMJRxJ#_G&#W5|`GG8BEKt_m
z^w4}-K0)dt%>~*gRgqZ`D5NGbD*}a7L}p2#U|nR^1PWF~W>KJEO=MOD3J*kj-7j@A
zWHkbr7LB9#A|t)4IBJj~D-kGptijiBME;}+(x@64vJ!#eLA6Z`k<4b6Tn4BFm{vrR
z-_Ej=u|h8JZ|9#EXkO7jLHTG<o~^q*#DE%V#wiNph1(FN<BKMOM_X!5rKn#FqeELY
zr!@<PYfb>SUy~Sz*NB<hi)0?&@p%I+kN^TtHFJwK?aYeKC$fY!3o1v|A*vI{IEt<E
zMv)Fm-BJ75flOtL8)97RX58pC0=jWZ_7v6xO8VtE>Xp2Wr>o*JEILNu`mQMc!xIR3
z&>lqVu!`xtDPv?>GRrh&TP+cb0#(#uc8?H@Ycu>wh$D9NZn)=9V3jGX()6y;W}I7F
z-U-@}+P%d3y@a*pLKWPtL$ZXmHF&k}2OOc-NqmMibqaA?B2GTT`#_GNN1OBG<U8y{
zTk$xeGr7hUT9RZ5dlm%Ydw+<-kPNxK5iLrAJPz7KEBD1?=Vd#<@d|a;`X#3GXIOMd
zmRO1f<0%L)TVUFm|LktBL+ch?>b7Ec0B2)ux-QRx_g+@w-q*X+L{&JY>3T_T$wrRX
z9rY1br2k^Y(JW1%cv<gwfDqx-q3S-6bG-dFx!a{;soaxq$<4FWH5eZFeH{9~pM&Uz
zBDc43a^8!y8YA#GB_AbAtlW!=Xi4$#syU=3;T{&f$XcK`CU03}40C~S_mUXXl1ciT
z2`tFtu;`?cRz1h8Sg0d`KQkO=?nR|SknA79cq&`j7I%9eMJ#vi6`GO=NCHoWBzuem
zB@StMI>NluYz&&i@GN7xExjlwCnqN-Cud=P0R}L>3p~S;*Z=?k07*qoM6N<$g5IyT
Ad;kCd

literal 1590
zcmeAS@N?(olHy`uVBq!ia0vp^Hb5-I!3HGRqxPBrDajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_)*%o>>?5hW46K32*3xq68pHF_1f1wh?E1MMpc5|gu2OB9k)
z(=+pImEP~(ucVNfVyhHx>TBRz;GCL~=}}db8eHWUl3bOYY?-2DZ>L~WVFffGH?<^D
zp&~aYuh^=>Rtapb6_5=Q)>l#hD=EpgRf0Gw!Z$#{Ilm}X!BWpaH`&0zK*8Kn&(Pd3
z*~mOCF-b?k$iT=*-@roO&`j6J$jaE%%EV9s3Y35r7Nw+F1-ZCEtpoCGl`=|73as??
z%gf94%8m8%i_-NCEiEne4UF`SjC6r2bc-wVN)jt{^NN*WCb*;)Cl_TFlw{`TDS%8&
zOv*1Uu~h;(7UGNC0=Thx#n6xfhM9gvVu8M)o&m^LFonLp_?717!c`ZS1f?R}i`C%b
zkjjEo{h-w1{L-RiVBDoCgRCmBaxO|uEXgkl$<NP$1!O=*eo20DMt*^Uk%^vxf`)Hm
za%LV#L=&vV*VoE3uec;JFFDoI#a0Puh+bx9ij|v*p@FH9lewFbp`)RptBaGRftj0y
ziL0A|i?N}pt1C>eOMY@`Zfaf$Om7N8uLVxMpahXy0JPa9wJ5VJHN~wcKUV?lYpYBw
zZm}>huyA!TG{9*dRBsAyx0vD7s}FRHJ}7RH;u<CdOh6zeJn;fK@Z_JG2Tb!tz{Gtb
z{#qmh1Je>u7srr_TX!P7vxNgCY(Jk+k+eR$_)5pcC9NH$%33QllD4<zv2<J4I}|=Y
z*4uGmt@P2Q+~Kh$4;OQ-Yk9P2ik;cY_hz@2`1;DHO!Bn$d?vbo$;KtBN3Z63*zcHd
zMm6!=oX>OL-+8Dtl`CROl*#4A_pghr&2T8=6sV{x&(FPmAnoFjtsD6N3feE4d+)Ek
z{spehJM;y6Ud1LoPT79FwOZWY^zQzzR(-vbI!~6!Eemzj(J;@`Uh}Ry{p;~1vz?Y)
zu6^+Db_pN9-9MKL+KE<+A5LHOK7Get25y=5O?UUi=437QuG4?B)~M}Xy<2<q0g=YI
zGp`b2ZK49M9-m+?+mN!yb;0|(A8mU5+#k;}1x3Al!T7B6Z&N1o>YumDb0d!)c%h>f
zRy1Qxd~#@#H^XHqX^ZysBO4w(dZ;KKua>rdji|ue4-2d;Ud)t{J#h6^KTB42{}s=t
z`j4~=I5r;O__)xss?0UF%GPhqD%I@cvpk<oI<bBIlAl(d=bulTcrq{f&-Sj>>Q)Ng
zN}E`WCSDFS%85Ag>_e-;u2jyRq6-fV&RkEOc|ufir|X*OJT~*94xL^vsj@O%{eOnQ
z%J$774km}2P86S+dTdJK>6;5*Kl~ckb9Visi)SV7>8v@d)GYVPy6^XN<ryAn7avc*
z`1tc1uibBBcXca0`!F@*?Pn!bt<#wSj2o*sj%>^0yKg7#<fi}l<rks0W6upI27OFX
z>tywcWbCgnk;q$fuR&bdJn6@jQ-@gCea#<~?_LnF=g)PfT+SN>GAG!3BwU3IBwim&
zsMVSKtup(~tSNhCkC~n2+3-kcswGpgSw+vC>Fd>B>^(ZMdp`f$IV`2K4jMnX^>b5f
zX?fal=f11l4U=-0$N#+%5Mm{B;>f-KO_TF1G$t>3|D{zR?9Q1uhCiYS3`e#yuiI*L
R{u-zx_jL7hS?83{1ORMbZn*#e

diff --git a/public/images/icon/ico-6-hps.png b/public/images/icon/ico-6-hps.png
index 151122af34f51fe876d640df8ced209a1efce534..d4ecee60c6e4b8f5113941dee8e47f6e94805604 100644
GIT binary patch
literal 946
zcmV;j15NyiP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH14l_jK~#7F?V4X!
z+CUVCf0Iy%Jh_9$9q4;o$O^P85Z<cP1Fk?_f%JILzCl-@t{|xGvvdWz1fFPO&D`Dz
zf0XvrI%x(tZN76fN`Rb?nS1Bn2|z|hMn*=)|BFBZoI~Fgd8^GYU*&gLMnVLrCt){(
z?N^^*2yMZkoPAB84^B}w`&F+GO_q)?ZzzmB<lqY1Y71d?23xNWV1OKSd138C&_S?W
zY6eJ*D+;!+Bq=975d7lF6--E4&_oEaUI=9ee@`q4{**{ak4RQnat|q^EvRCyzpFnj
ze}i#JeZllGD!B-P3S*LsBB(GTxk!SF)Fl^9P?4(SA_^)}lU!6m#V?Z1@#jrwG9N+0
zbJx)a$w*cOMHOf=7eQ6WYCL@?d5>Ezqsq`^E`mX=v=3rQBE6BE1>6Y`=0uWfFLIJe
zg@0a9zaLCM+$4`;s1QbLDRv`&Bz3{1)>R#l8+0eD!LD~Zx{Axc)eiy(t9<BUMx;N2
zf|{ynR3pYC=Q%(>$XO+f(u0uJhSTz0OQ1j4_Re6K^ka}FYg{}n!@PYXNbFC}3sD!s
zZWHX&{KqfrFih%#-)f}>NgD5xxlix9MKFz#Bon+ZRhC*8FDI1;FX%$bs>DNy7Fp<j
zf9LgJ7-Lyf63#i!%JDx!EW@_;oKSkR%%BQm>!2VxH9Ewb#9_g{=8^T2bOlK<CK&8^
z-AA!F##Pf+Kz6w7I>ZbxTFIzbB#Np;)a5a}{pobWIq}OdjPX(}sCgak9z5PGUgKml
zom8al!Z1clwHGaa)wYJqM7+&Uc2iBy@p=AqOMK|SAjSlXN0%EUaEhr0M@~J5&sU1A
zOAKmnsxXAXDf+}B9yhwfm>fyAVF+V_gB|ZoMA2K7WFD1o{3jh0igHD5Bt4ddA&kbL
zl2k|M$S(`quE!5rvOBt`*yk+DlJ=e;`U*qLrXRdVFSIAi#Q2C{D{iNZ#h+p(f}`?m
z1#>_@26<0&`Or^%Up^^GubCjpP%p?^4a}G@pWEaNbq-Cmrzlyx!z{UIKECLyTiK?&
z12uAYPOeT;Hu&0W&?MQ{NKSkgQhhr@f2Ua+UNgB?=yCR~j*?PFMn*<PM#eMw0c*C3
UUb2q4`Tzg`07*qoM6N<$f+Pr=J^%m!

literal 1525
zcmeAS@N?(olHy`uVBq!ia0vp^Hb5-I!3HGRqxPBrDajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_)*%o>>?5hW46K32*3xq68pHF_1f1wh?E1MMpc5|gu2OB9k)
z(=+pImEP~(ucVNfVyhHx>TBRz;GCL~=}}db8eHWUl3bOYY?-2DZ>L~WVFffGH?<^D
zp&~aYuh^=>Rtapb6_5=Q)>l#hD=EpgRf0Gw!Z$#{Ilm}X!BWpaH`&0zK*8Kn&(Pd3
z*~mOCF-b?k$iT=*-@roO&`j6J$jaE%%EV9s3Y35r7Nw+F1-ZCEtpoCGl`=|73as??
z%gf94%8m8%i_-NCEiEne4UF`SjC6r2bc-wVN)jt{^NN*WCb*;)Cl_TFlw{`TDS%8&
zOv*1Uu~h;(7UGNC0=Thx#n6xfhM9gvVu8M)o&m^LFonLp_?717!c`ZS1f?R}i`C%b
zkjjEo{h-w1{L-RiVBDoCgRCmBaxO|uEXgkl$<NP$1!O=*eo20DMt*^Uk%^vxf`)Hm
za%LV#L=&vV*VoE3uec;JFFDoI#a0Puh+bx9ij|v*p@FH9larf~p`)RptBaGRftj0y
ziL0A|i?N}pt1C>eOMY@`Zfaf$Om7N8uQN`)pahXy0JPa9wJ5VJHN~wcKUV?lYpYD$
zZn4B^9#n4%Znrq%)T<A4j6NuCk>VOA1WZ66COq*1Iq>A4ng>ktMZm=EUHC$sfq^O6
z)5S5Q;?|uA-;B!%5_OZV{JW60Ce(Uq@wH|jHn}dI#4b6R7YAoQNYt3;;_~59s(8Mf
zh`$_*?g|BsLwZWWcU=Cg)d&u`_RuWGeEG)Gw<m6y<W4s0%oj<0U6&XC{L>+Kr+Y2$
zYd_h&|895xc;qxzv9uY}u9%xC_np>a$`h}6x4vC@erIQm<n89Vl6=mjbc=xhJDrpd
zDe3izK4?4{scjm5>}AC3N&hzcAA6x*a6>rLP33``c<k%sWI=I$w`tm;Q!^%~N7nCJ
z@$l3EjjUy@J*yr+HQ#A>I3l=Vub$ji(HomjzGq|Mv;BKmBi#4Ql+_Ym&kx?JSTkuV
zhl;4V>w(8N4y%ORJ+LLn(P`3L&In_T-!qj0Ogj!p`Q52>mkgUQYxRN!l4qWkt`&Pw
zJU3TkN=bxEt$eS})sO9KnhXMCmxs>z@lNN!MlnJDzGGsx@8_RzT2^)MLG<=*ntzj`
z+#LTqUkz?ve0raH(D`k10uGx`vfp4h&*A-Qkw^Z=FIL$$exG^t?(w`}nZp)RZZBuI
zTYdO-O*-b)?~c>9yAMRGIo&%J9&*@7XTr8U*Y4(J``IkAdfT(^__nn9#f-Ph60$iu
zKeH#UKlodZCrKr|#O%TG$(wgre-V{UoH)g({qXnpiPy8vvAz+ju<;fz`1(`)j@@Q)
z(M9EdE`M)hO52u|VLF-RsME&{`*k~>oYae{v2J~A9aYEQ8FH=W^Nt;&ra$UuKU7<<
z;I(SolJ(`~U+&ks#Ozosb#mngu01ET^wNGO-ZfZSJ-@z7=46M!O0~MU@~z(wrrq81
rZQ%it)auRmo0Z=trm-{ZXOUo#-2O<{;qJCepn}-b)z4*}Q$iB}Wi3VV

diff --git a/public/images/icon/ico-7-kontrak.png b/public/images/icon/ico-7-kontrak.png
index 75683d19faacadd9860fee29ad9a50c1e50f9042..d9551940f2f147a0d13d6ff491c2d46de875c3dd 100644
GIT binary patch
literal 779
zcmV+m1N8ifP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0-#AmK~#7F?U`Xx
z+E5V3cVDo^nSMx5P&|Qr?+lP5c!J8eD&uHR(0T&xwBSd%0eXT2PLQ5Jj*w3@t&_Li
zU{wq+QG%r4?C%Tk-txkd&F=s00}up35ClOGRuqI4#qJFE5aGf!_v@hk?B8916^0$`
zjrZ%V>9MWukYEl<anL#SoZoL$KhGw%DrbK_eYk=brW6Mw8yqC8Q5^4@=Fzf_R2;v9
zB~Zx0%^!nf4j(6LUZD=g2kvERIE)Tm-(+uh2Ybs(2ZbC&g-1wq#ScR`Gl#gtx8yy)
zy@UlJ0>?i0nvVxzE((VzDSa00yQB2@zwFn51yMQ<wNegW=*y$)0{JipE1N~fhm#Or
zI0_WJa$dcIWrnD;)fsrknWTgO_^<>@anO#qL{!W*@ZRPv1QEPEg^G{e9bV^^3C^Nn
zT4Mb#3f)1{^bIl!JrVsx&;bbLP$)z<I$q6E*-|am5Z<)iAQ9QDLu+|!@$(skpWV<t
z^{QY)HP4oXg%5L5C`2u^`lu;1K7*VsHxvdp0IjG3HPoulcE*rJz*=Nal8+CY>MIg7
zSe}iHwun`J*@ih;M5^s(N;P<pYKe1EyWyJFNS6&FJc-)%-prcke0Rw*mzXCICA02`
zgX@ln?JN{pJCp2|g3Cv3y1XW>jhS8f9Xef0scN*<TptT|G>Ww>IQ8q8j!glObQH9v
z$wrmMKo}F(%G9oW$~H_y!R-e<;`JJ!m9ZN@xSZXFu<8`wE<v_#yz5BY-@PXHJaZKY
zVeBRvlUs*9mTn(&Oh??ZFHx#ty#1W68gHNcT&Xto7qbp+Wl1#@sb)qTTzAC5bw{*l
z7M!-P`Ls1_x_57f*nHwt_T<49F4%VV*!uR{BM<~Z5ClP(<}Yf8@YH9qaWVh^002ov
JPDHLkV1m$RTCM;9

literal 1812
zcmaJ?c~BEq9F7Ru0Tn^56b06RiWst+kPwm~#gIdyM8aV?L?PKMWE+zWn*{=*A|oE9
zARa{o#RJ8I!%{><t3m-4t5#95LIqkWj2J;>JnDhnpwRwNx-+})z2AJ__dDP0R{65U
zldT=CDHO_NX@Dq%Tz$#c{<8_>cVg6e7P)*uh$DzlERIN4;0Q&a!juRg)hgnV5JaI$
zNoYn$#&~x$EP{xT1@d4_OIMgNbfZ>JvPnTdqh0}P5CTvl@u-eZ9XNN93ZN=JHJmMj
zWO^Z@MgvlDBs6td7@VqsxhksPmw>O4M+#^WLID`Ht91sRkxw1g<&k@{8KeTk5JJPJ
zehex?CI^HVjsRRb<OxF%1aP=?28RJNIdKXl4PZh{CJ6a}3~x^+ljp_eu^7Oohe|rc
zRdKu!k>ry*^2DdA2|~{U!Q|v*da@TC!{b2)m&*kqCdg!Zk_b;jijGhiJ#_}x5d{%q
zfN@k$pqLIYD=L&&BEhGU!G6p_s~?rs89r5ttQlxj=s^Y@GG{dcl*#@ds@0C74MYg?
zPrUyrYzRxyBVY((z!Gto>|LCz*_ECr#1RF7;b9oIdZdtYHAY|tHKqrcEII_Z%M>uG
zGg}r6Q)DupRA(R*IvA0P_*7Daj-o1_gvEf^On-@l$q+CYVv#==@|O6p#1cs4#bArY
zBU}*%Cu$KLF~U`ia)r>CT=PI^^`vJJf}=@@N`hlrU^r_YI(96gG4(!iRb$5DFCLQ%
zlEHxH-u|oCBPMcy%-hl7B@d(HkLbvm$I0P7t6TM!yfYb6ks!?2b|)fIGc9=f(7Y;E
zJ4?E=#9Ldvyp*af|HHzHBY!3k$<qd<@5T+y?o691wwvyfc6{yAW~=h0<x5vYpL0X)
z3-_2FvDUpheE`VFDDK`g-Z1c+O>d#$M)HMOM{cR>G8v1#K6IxG{VFa>>nrYTFK<mK
z1LFo(-D`VM<8-_0M!>s1@$vqyOXpaQ@2Zb^v^04vdr?z-^lsMl{b2w7^!CsNzCkPI
zjVq3%v@gHRI4PSK9Jy-4;$U@MZM|j75yy_6C1>j5zsuru&V5Ehi#grG?Jf`boog#k
zJe_so$tKu&H|62-vs-$ztW3&XNlE$nSMne+BoH<&Vx`OMTm-3=C%r6%%e(g+d<jVW
zRFx(c)G`Ba0&A!=4en<5Q%B>8hcPA(%avs}<DSng!DW(l%uvx`<ZkxP_X%hC(N^ym
zF?nnocjLt{!BG_Gn_PE?9ldtn#_(6M7vxPFilCvp@@OThIUd3p2n4Bj4%t^^G~rJ3
zy)WOiQ~#xPK2Yr~+t{$msT~&BhXt4P$NIY0=Nw&qEedHZx6VGCc(^9}76|*I^+&U|
z-L4xd^3E@NQL^OG0*mv$+->6@*tuJ#Y34PY4s9^DNn%QE*Eu=7-7CDFkXueG4l_*s
z^TMql?)1KeKIh7dYbo(d5@+{)({-)jVerXI?rjcp7P>six?0_TV8d2oobYjAbE~o}
z-mj?VGOjt(n&&`6JA1FT6+9oj;L`g#B`8$n)A*GkGmzGpIn~K_CT&tpq48Ai=9Q(w
zaJ~cl#@RFlexr%B&H<`oP4JX8JYmJSr0gS^dFy=k@80OvqUMV)1%x|*0Z}{mSV(_%
z6<>Ll%}DDinphR1P<vPuOx(Pt`03Zq;Sp`syXd(acbF;}`*V){vM6VFhSd$P)j`S*
zN!5uQQ^V4`NOPa^K~HUDX-gWLcIfqv7TiatoVcQ8ejl7Lt02-tkso3>#s}&<_eCDI
zE{#opJE1nu_4V6tlLohcuGKVdGuGv{y1Z;o?VoFttal!q<*>y{1?CJ!eqR+a?LF^+
zMz%PrgyLK8K5#wU?REHlD)GYr>v5uuEPcIy<s9Nvz~g)OEix?M7&~_KnSusxe<(cF
z6VcFfWTru$GVOU8yXf|huR2`4Y!3c@Z^i=A4O_RTn<l+yA(c67+OO=r9gZ_O^951s
e-`l2R7LzCndA#amd+3n)KP43}6IJ-fX8aBFEYPw5

diff --git a/src/components/header-toolbar.vue b/src/components/header-toolbar.vue
index 2aabbc2..2cf2c8b 100644
--- a/src/components/header-toolbar.vue
+++ b/src/components/header-toolbar.vue
@@ -2,7 +2,7 @@
   <header class="header-component">
     <dx-toolbar class="header-toolbar" style="background-image: url('images/bg-header.jpg');">
       <dx-item
-        :visible="menuToggleEnabled"
+        :visible="false"
         location="before"
         css-class="menu-button"
       >
@@ -142,7 +142,7 @@ export default {
 }
 
 .header-title .dx-item-content {
-  padding: 0;
+  padding: 0 24px;
   margin: 0;
 }
 
diff --git a/src/components/side-nav-menu.vue b/src/components/side-nav-menu.vue
index 3f76b67..3638fa5 100644
--- a/src/components/side-nav-menu.vue
+++ b/src/components/side-nav-menu.vue
@@ -1,26 +1,31 @@
 <template>
   <div
-    class="dx-swatch-additional side-navigation-menu"
+    class="side-navigation-menu"
     @click="forwardClick"
   >
     <slot />
-    <div class="menu-container">
-      <dx-tree-view
-        ref="treeViewRef"
-        :items="menus"
-        key-expr="path"
-        selection-mode="single"
-        :focus-state-enabled="false"
-        expand-event="click"
-        @item-click="handleItemClick"
-        width="100%"
-      />
+    <div v-for="item in menus" :key="item.id" class="relative-view">
+      <img :src="item.icon" alt="icon" @click="handleIconClick(item.text)" :class="selectedMenus === item.text ? 'active-icons' : 'icons'">
+
+      <div ref="expandRef" v-if="item.text === selectedMenus" class="absolute-view">
+        <div class="expand-title">
+          <p>{{item.text}}</p>
+        </div>
+
+        <dx-scroll-view ref="scrollViewRef" :class="checkLength(item.items) ? 'expand-menu-height' : 'expand-menu'">
+          <div v-for="it in item.items" :key="it.id" class="no-wrap">
+            <p :class="route.path === it.path ? 'pointer-active' : 'pointer'" @click="handleItemClick(item.text,it.path)">
+              {{it.text}}
+            </p>
+          </div>
+        </dx-scroll-view>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import DxTreeView from "devextreme-vue/ui/tree-view";
+import DxScrollView from "devextreme-vue/scroll-view";
 import { sizes } from '../utils/media-query';
 import navigation from '../app-navigation';
 import { onMounted, ref, watch } from 'vue';
@@ -36,7 +41,12 @@ export default {
     const router = useRouter();
 
     const menus = ref("");
-    auth.getUser().then((e) => menus.value = e.data.menus);
+    const selectedMenus = ref("")
+
+    auth.getUser().then((e) => {
+      const listMenu = e.data.menus.filter((it) => it.text !== "Home")
+      menus.value = listMenu
+      });
     //console.log(navigation);
     console.log(menus);
 
@@ -48,29 +58,39 @@ export default {
       return {...item, expanded: isLargeScreen} 
     });
 
+    const expandRef = ref(null)
     const treeViewRef = ref(null);
+    const scrollViewRef = ref(null);
 
     function forwardClick (...args) {
       context.emit("click", args);
     }
 
-    function handleItemClick(e) {
-      if (!e.itemData.path || props.compactMode) {
+    function handleItemClick(text, path) {
+      if (!path) {
         return;
       }
-      router.push(e.itemData.path);
+      router.push(path);
+      selectedMenus.value = text
+    }
 
-      const pointerEvent = e.event;
-      pointerEvent.stopPropagation();
+    function handleIconClick(text) {
+      if(text === selectedMenus.value) {
+        selectedMenus.value = ""
+        return
+      }
+      selectedMenus.value = text 
     }
 
     function updateSelection () {
-      if (!treeViewRef.value || !treeViewRef.value.instance) {
-        return;
+      if(route.path === "/home") {
+        selectedMenus.value = "Home"
+        selectedMenus.value = ""
       }
+    }
 
-      treeViewRef.value.instance.selectItem(route.path);
-      treeViewRef.value.instance.expandItem(route.path);
+    function checkLength(it) {
+      return it.length > 4
     }
 
     onMounted(() => { 
@@ -105,11 +125,16 @@ export default {
       forwardClick,
       handleItemClick,
       updateSelection,
-      menus
+      menus,
+      route,
+      selectedMenus,
+      handleIconClick,
+      scrollViewRef,
+      checkLength,
+      expandRef
     };
-  },
-  components: {
-    DxTreeView
+  },components: {
+    DxScrollView
   }
 };
 </script>
@@ -117,95 +142,95 @@ export default {
 <style lang="scss">
 @import "../dx-styles.scss";
 @import "../themes/generated/variables.additional.scss";
+@import "../themes/generated/variables.base.scss";
 
 .side-navigation-menu {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   height: 100%;
-  width: 250px !important;
+  width: $side-bar-width !important;
+  box-shadow: $base-shadow-color 4px 100px 10px 0px !important;
+  padding-top: 25px !important;
+  background-color: white;
+  padding-left: 9px;
+  
+  .relative-view {
+    position: relative;
 
-  .menu-container {
-    min-height: 100%;
-    display: flex;
-    flex: 1;
+    .icons {
+      border-radius: 4px !important;
+      width: $side-bar-icon-size !important;
+      height: $side-bar-icon-size !important;
+      border: 1px solid $base-border-color !important;
+      margin-bottom: 24px;
+      cursor: pointer;
+    }
 
-    .dx-treeview {
-      // ## Long text positioning
-      white-space: nowrap;
-      // ##
+    .active-icons {
+      border-radius: 4px !important;
+      width: $side-bar-icon-size !important;
+      height: $side-bar-icon-size !important;
+      border: 1px solid $datagrid-columnchooser-item-color !important;
+      margin-bottom: 24px;
+      cursor: pointer;
+    }
+    
+    .absolute-view {
+      position: absolute;
+      top: 0;
+      z-index: 1;
+      background: transparent;
+      left: $side-bar-expand-left;
+      width: $side-bar-expand-width;
 
-      // ## Icon width customization
-      .dx-treeview-item {
-        padding-left: 0;
-        padding-right: 0;
+        .pointer {
+          cursor: pointer;
+          width: 100%;
+          background: white;
+          padding: 4px 38px;
+          color: $base-text-color;
+        }
 
-        .dx-icon {
-          width: $side-panel-min-width !important;
+        .pointer-active {
+          cursor: pointer;
+          width: 100%;
+          background: white;
+          padding: 4px 38px;
+          color: $datagrid-columnchooser-item-color;
+        }
+
+        .expand-title {
+          border-radius: 0px 8px 0px 0px !important;
+          background: $datagrid-columnchooser-item-color;
           margin: 0 !important;
-        }
-      }
-      // ##
-
-      // ## Arrow customization
-      .dx-treeview-node {
-        padding: 0 0 !important;
-      }
-
-      .dx-treeview-toggle-item-visibility {
-        right: 10px;
-        left: auto;
-      }
-
-      .dx-rtl .dx-treeview-toggle-item-visibility {
-        left: 10px;
-        right: auto;
-      }
-      // ##
-
-      // ## Item levels customization
-      .dx-treeview-node {
-        &[aria-level="1"] {
-          font-weight: bold;
-          border-bottom: 1px solid $base-border-color;
+          color: white;
+          padding: 1px 22px;
+          font-size: 18px;
+          font-weight: 600;
         }
 
-        &[aria-level="2"] .dx-treeview-item-content {
-          font-weight: normal;
-          padding: 0 $side-panel-min-width;
+        .expand-menu {
+          background: white;
+          margin-top: 0px !important;
+          padding: 8px 0px;
+          border-radius: 0px 0px 8px 0px !important;
+        }
+
+        .expand-menu-height {
+          background: white;
+          margin-top: 0px !important;
+          padding: 8px 0px;
+          border-radius: 0px 0px 8px 0px !important;
+          height: 200px;
+        }
+
+        .no-wrap {
+          white-space: nowrap;
         }
       }
-      // ##
-    }
-
-    // ## Selected & Focuced items customization
-    .dx-treeview {
-      .dx-treeview-node-container {
-        .dx-treeview-node {
-          &.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
-            background: transparent;
-          }
-
-          &.dx-state-selected > .dx-treeview-item * {
-            color: $base-accent;
-          }
-
-          &:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
-            background-color: lighten($base-bg, 4);
-          }
-        }
-      }
-    }
-
-    .dx-theme-generic .dx-treeview {
-      .dx-treeview-node-container
-        .dx-treeview-node.dx-state-selected.dx-state-focused
-        > .dx-treeview-item
-        * {
-        color: inherit;
-      }
-    }
-    // ##
   }
+
+
 }
 </style>
diff --git a/src/dx-styles.scss b/src/dx-styles.scss
index 84d9683..f02d081 100644
--- a/src/dx-styles.scss
+++ b/src/dx-styles.scss
@@ -67,3 +67,8 @@
  }
 
 $side-panel-min-width: 60px;
+$side-bar-width: 76px;
+$side-bar-expand-left: 70px;
+$side-bar-icon-size: 56px;
+$side-bar-expand-width: 239px;
+$base-shadow-color: #3333331A;
\ No newline at end of file
diff --git a/src/layouts/side-nav-outer-toolbar.vue b/src/layouts/side-nav-outer-toolbar.vue
index 14249a8..dfa98e3 100644
--- a/src/layouts/side-nav-outer-toolbar.vue
+++ b/src/layouts/side-nav-outer-toolbar.vue
@@ -9,7 +9,6 @@
     <dx-drawer
       class="layout-body"
       position="before"
-      template="menuTemplate"
       v-model:opened="menuOpened"
       :opened-state-mode="drawerOptions.menuMode"
       :reveal-mode="drawerOptions.menuRevealMode"
@@ -18,16 +17,18 @@
       :shading="drawerOptions.shaderEnabled"
       :close-on-outside-click="drawerOptions.closeOnOutsideClick"
     >
-      <dx-scroll-view ref="scrollViewRef" class="with-footer">
-        <slot />
-        <slot name="footer" />
-      </dx-scroll-view>
-      <template #menuTemplate>
-        <side-nav-menu
-          :compact-mode="!menuOpened"
-          @click="handleSideBarClick"
-        />
-      </template>
+      <div class="flex">
+        <div class="sidebar">
+          <side-nav-menu
+            :compact-mode="!menuOpened"
+            @click="handleSideBarClick"
+          />
+        </div>
+        <dx-scroll-view ref="scrollViewRef" class="with-footer">
+          <slot />
+          <slot name="footer" />
+        </dx-scroll-view>
+      </div>
     </dx-drawer>
   </div>
 </template>
@@ -122,6 +123,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "../dx-styles.scss";
+
 .side-nav-outer-toolbar {
   flex-direction: column;
   display: flex;
@@ -132,4 +135,14 @@ export default {
 .layout-header {
   z-index: 1501;
 }
+
+.flex {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.sidebar {
+  width: $side-bar-width;
+}
 </style>