From 48e4f6b213de8bcf60d0243d7f1aada1a37f8952 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 18 Nov 2023 22:26:50 +0300
Subject: [PATCH] added style for asidebar

---
 .../assets/css/ElementsStyles/asidebar.css    |  50 ++++++++++++++++++
 luckydiamond/src/assets/css/global.css        |   5 +-
 .../src/assets/icons-home/bomb-icon.svg       |  17 ++++++
 .../src/assets/icons-home/case-icon.png       | Bin 0 -> 914 bytes
 .../src/assets/icons-home/crush-icon.svg      |  17 ++++++
 .../src/assets/icons-home/settings-icon.svg   |  32 +++++++++++
 .../src/assets/icons-home/slots-icon.svg      |  21 ++++++++
 luckydiamond/src/pages/AsidebarElement.vue    |  20 ++++++-
 8 files changed, 159 insertions(+), 3 deletions(-)
 create mode 100644 luckydiamond/src/assets/css/ElementsStyles/asidebar.css
 create mode 100644 luckydiamond/src/assets/icons-home/bomb-icon.svg
 create mode 100644 luckydiamond/src/assets/icons-home/case-icon.png
 create mode 100644 luckydiamond/src/assets/icons-home/crush-icon.svg
 create mode 100644 luckydiamond/src/assets/icons-home/settings-icon.svg
 create mode 100644 luckydiamond/src/assets/icons-home/slots-icon.svg

diff --git a/luckydiamond/src/assets/css/ElementsStyles/asidebar.css b/luckydiamond/src/assets/css/ElementsStyles/asidebar.css
new file mode 100644
index 0000000..639ee66
--- /dev/null
+++ b/luckydiamond/src/assets/css/ElementsStyles/asidebar.css
@@ -0,0 +1,50 @@
+.menu {
+    margin: 4px 6px 0 6px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.menu__content {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.menu__btns--gamemodes {
+    border-radius: 20px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+.menu__content--gamemodes {
+    background: rgba(217, 217, 217, 0.12);
+    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
+    border-radius: 20px;
+}
+
+.menu__content--gamemodes a {
+    padding: 20px 0px 20px 0px;
+}
+
+.menu__btn--home {
+    margin-top: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.menu__content--gamemodes {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 12px;
+}
diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css
index 5ba6fe2..3c04061 100644
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -13,6 +13,8 @@ ul {
 
 body, html {
     background: #121212;
+    height: 100%;
+    margin: 0;
 }
 
 /* /Global Settings */
@@ -21,7 +23,7 @@ body, html {
 
 .content-grid {
     display: grid;
-    grid-template-columns: .3fr repeat(5, 1fr) 1.2fr;
+    grid-template-columns: .35fr repeat(5, 1fr) 1.2fr;
     grid-template-rows: repeat(6, 1fr);
     grid-auto-columns: 1fr;
     gap: 0px 0px;
@@ -57,7 +59,6 @@ body, html {
     background: #17181C;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     border-radius: 20px;
-    height: 100%;
 }
 
 /* /Menu */
diff --git a/luckydiamond/src/assets/icons-home/bomb-icon.svg b/luckydiamond/src/assets/icons-home/bomb-icon.svg
new file mode 100644
index 0000000..15c4c05
--- /dev/null
+++ b/luckydiamond/src/assets/icons-home/bomb-icon.svg
@@ -0,0 +1,17 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Vector" filter="url(#filter0_d_362_96)">
+<path d="M17.849 52C12.8909 52 8.67658 50.2956 5.20595 46.8867C1.73532 43.4778 0 39.3659 0 34.5511C0 29.7363 1.71548 25.663 5.14645 22.3311C8.57742 18.9993 12.7719 17.3333 17.73 17.3333C18.2094 17.3333 18.6532 17.0802 18.8972 16.6676L20.1098 14.6178C20.5858 13.7704 21.2998 13.2215 22.2517 12.9711C23.2037 12.7207 24.1159 12.8459 24.9886 13.3467L26.2919 14.0639C26.563 14.2131 26.9034 14.1269 27.0709 13.8667C27.9832 12.2104 29.4111 11.1319 31.3547 10.6311C33.2982 10.1304 35.1228 10.3615 36.8284 11.3244C37.9677 11.9567 38.3544 13.412 37.6866 14.5307C37.0443 15.6066 35.6607 15.9838 34.5651 15.3758L34.4485 15.3111C33.8932 15.003 33.2883 14.9356 32.6339 15.1089C31.9794 15.2822 31.4935 15.6385 31.1762 16.1778C31.015 16.4282 31.0986 16.7628 31.3586 16.908L33.2586 17.9689C34.0915 18.4311 34.6369 19.1244 34.8947 20.0489C35.1526 20.9733 35.0435 21.84 34.5675 22.6489C33.583 24.3486 33.7126 26.4332 34.4571 28.251C34.67 28.771 34.8556 29.3014 35.0137 29.8422C35.4699 31.4022 35.6979 33.0104 35.6979 34.6667C35.6979 39.4815 33.9626 43.5741 30.492 46.9444C27.0214 50.3148 22.807 52 17.849 52ZM17.849 47.3778C21.4584 47.3778 24.5423 46.1356 27.1007 43.6511C29.659 41.1667 30.9382 38.1719 30.9382 34.6667C30.9382 33.4726 30.7696 32.2978 30.4325 31.1422C30.0953 29.9867 29.5896 28.8889 28.9153 27.8489L28.3715 27.0161C27.758 26.0766 27.7353 24.8692 28.3131 23.9073C29.1638 22.4912 28.6753 20.6522 27.2342 19.8448L26.3537 19.3515C24.8639 18.5169 22.9806 19.017 22.1013 20.4809C21.5302 21.4317 20.5023 22.0133 19.3931 22.0133H18.5629C14.8345 22.0133 11.5919 23.1689 8.83524 25.48C6.07857 27.7911 4.70023 30.8148 4.70023 34.5511C4.70023 38.0948 5.9794 41.1185 8.53776 43.6222C11.0961 46.1259 14.1998 47.3778 17.849 47.3778ZM47.1715 19.6444C45.8951 19.6444 44.8604 18.6097 44.8604 17.3333C44.8604 16.0569 45.8951 15.0222 47.1715 15.0222H49.6889C50.9653 15.0222 52 16.0569 52 17.3333C52 18.6097 50.9653 19.6444 49.6889 19.6444H47.1715ZM34.151 6.93333C32.8367 6.93333 31.7712 5.86783 31.7712 4.55347V2.37986C31.7712 1.0655 32.8367 0 34.151 0C35.4654 0 36.5309 1.0655 36.5309 2.37986V4.55347C36.5309 5.86783 35.4654 6.93333 34.151 6.93333ZM44.9901 10.043C44.0894 10.9176 42.6566 10.9176 41.7559 10.043C40.8171 9.13131 40.8171 7.62425 41.7559 6.71259L43.4813 5.03703C44.382 4.1624 45.8148 4.1624 46.7155 5.03703C47.6543 5.94869 47.6543 7.45575 46.7155 8.36741L44.9901 10.043Z" fill="#EF4444"/>
+</g>
+<defs>
+<filter id="filter0_d_362_96" x="0" y="0" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_362_96"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_362_96" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/luckydiamond/src/assets/icons-home/case-icon.png b/luckydiamond/src/assets/icons-home/case-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..92b0fbb729c45acd64725b35cf9003c65333f0a3
GIT binary patch
literal 914
zcmV;D18w|?P)<h;3K|Lk000e1NJLTq001-q001-y1^@s6#dsU*00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH11CvDK~#7F?U`Lt
z+b|G-SF&JuqV@?IPEa@jCL}XF(i31#KsW*61i%R>Cn%2$B;cN)=?NN65cjDJSW$Ns
z+jT<z+9*L}{LN&vmTjR$tKHQaprD|jAP37|bbQ~1wKdnfxoKy8m5L8a9l%?|Smbct
zTED%$O1nCHd!_tb36b3_mjmGZ45Zx2`gV8Eu{pxQzy@TuOaI^vuhFRMj;ANLQ?34V
z7^|m>>Y3t0^uP(p_;9a}R!fKu*hn0EUKmCs;@nlzdyI2G=d^5)D1)Ze&R!B?6KrK=
z<x?gz)=s1|T&+!xCUyeLf>I|O8y}VjpQBbKSRPysOGcrP?Gy^xj=*#$$gaBGD3jy3
z1*@w8*vRwqV<szALmgZwcqcH-s4rng9LEXMZ1<mz8;o6HLK*7!s?`8Zej8>);GhA_
zh?J5Vt&n7_<NyRyy{J@}yV^D}mnHOa^QVO?(Mn_=SD^%RM4;W4U{<=_Ut{iGd(Gx4
z3Aj%#QMq8~Q!g*a=zi-kBf`7Ce*_CiPM{IY$RbS6N6*)jl<GePW8nh~BXVbQB1AW;
zizM3p0z6DL3Lf3jtTsp_7mis*{;m(B4v}&EBNg%QeaB|HV?SfQcX#(KdG8@Vz8Nov
z8~t~={E@_@tQ1asN2xDpW^FyGUR}dT4a1n*e#+;Bas0Wj;PRRl2CviX%3xi?WE`qf
z)rADT!KK`yRTxl=_DmfW-sxK%rS`!Prk%o9oZt?bUE;M4sk4)qBf0mqo~HXr87XNG
z7|WK;DntbroFH!0!!$=DhJ^<0bfmmAU8FJZwtEvKrLM8PpmSAL<?K~s$t;iXw~x<)
zY33P+_VrH)T8&7@oCTE377<tp7nNDasdBWJ6QT{|UhN~qyl-T>Hc}z&sTz$fAUA6d
zb;@K?mp_b&aR>)E)$!!*xz=-;z~CP8=>rlf5IIVnuQ!{$uVtKHOo;sRCyxJqxvNxa
z*c_mvd9^p$KysQV!a+9jfzSpfeTW-pa_$=EAHX*78}PW>W8F3;oHZRoY$A^TUm>Ih
o?~I~YZ#%-07*kMCP%t0<0C0dxx;><<VgLXD07*qoM6N<$f_>JSVE_OC

literal 0
HcmV?d00001

diff --git a/luckydiamond/src/assets/icons-home/crush-icon.svg b/luckydiamond/src/assets/icons-home/crush-icon.svg
new file mode 100644
index 0000000..66d316f
--- /dev/null
+++ b/luckydiamond/src/assets/icons-home/crush-icon.svg
@@ -0,0 +1,17 @@
+<svg width="59" height="58" viewBox="0 0 59 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Vector" filter="url(#filter0_d_362_99)">
+<path d="M6.53125 20.5327L13.3438 23.4389C14.1146 21.9181 14.9375 20.4181 15.8125 18.9389C16.6875 17.4598 17.625 16.0327 18.625 14.6577L13.4688 13.5952L6.53125 20.5327ZM16.25 25.6264L24.5625 33.9389C27.125 32.7306 29.4531 31.4337 31.5469 30.0483C33.6406 28.6629 35.3333 27.3244 36.625 26.0327C39.9583 22.6994 42.401 19.2671 43.9531 15.7358C45.5052 12.2046 46.3646 8.17852 46.5312 3.65768C42.0104 3.82435 37.9844 4.67852 34.4531 6.22018C30.9219 7.76185 27.4896 10.1994 24.1562 13.5327C22.8646 14.8244 21.526 16.5223 20.1406 18.6264C18.7552 20.7306 17.4583 23.0639 16.25 25.6264ZM31 19.1889C30.1667 18.3764 29.75 17.3712 29.75 16.1733C29.75 14.9754 30.1667 13.9598 31 13.1264C31.8125 12.2931 32.8177 11.8764 34.0156 11.8764C35.2135 11.8764 36.2292 12.2931 37.0625 13.1264C37.875 13.9598 38.2812 14.9754 38.2812 16.1733C38.2812 17.3712 37.875 18.3764 37.0625 19.1889C36.2292 20.0223 35.2135 20.4389 34.0156 20.4389C32.8177 20.4389 31.8125 20.0223 31 19.1889ZM29.6562 43.6577L36.5938 36.7202L35.5312 31.5639C34.1562 32.5431 32.7292 33.4754 31.25 34.3608C29.7708 35.2462 28.2708 36.0744 26.75 36.8452L29.6562 43.6577ZM50.0625 0.126434C50.5 5.52227 49.8125 10.5952 48 15.3452C46.1875 20.0952 43.2708 24.4806 39.25 28.5014L38.9844 28.7671L38.7188 29.0327L40.0938 36.0014C40.2188 36.6056 40.1875 37.1889 40 37.7514C39.8125 38.3139 39.5104 38.8139 39.0938 39.2514L28.4688 49.9389L23.1875 37.6264L12.5312 27.0014L0.25 21.7202L10.9688 11.0952C11.3854 10.6577 11.875 10.3452 12.4375 10.1577C13 9.97018 13.5833 9.93893 14.1875 10.0639L21.1562 11.4702C21.2396 11.3869 21.3229 11.3087 21.4062 11.2358C21.4896 11.1629 21.5833 11.0848 21.6875 11.0014C25.7083 6.9806 30.0938 4.05352 34.8438 2.22018C39.5938 0.38685 44.6667 -0.311067 50.0625 0.126434ZM4.59375 34.4389C6.05208 32.9806 7.81771 32.2514 9.89062 32.2514C11.9635 32.2514 13.7188 32.9598 15.1562 34.3764C16.5938 35.8348 17.3073 37.6004 17.2969 39.6733C17.2865 41.7462 16.5625 43.5014 15.125 44.9389C14.0208 46.0431 12.3542 46.9441 10.125 47.6421C7.89583 48.34 4.52083 48.991 0 49.5952C0.625 45.0744 1.27083 41.6941 1.9375 39.4546C2.60417 37.215 3.48958 35.5431 4.59375 34.4389ZM7.125 37.0327C6.5 37.6994 5.96354 38.7046 5.51562 40.0483C5.06771 41.3921 4.66667 43.1264 4.3125 45.2514C6.4375 44.8973 8.17188 44.4962 9.51562 44.0483C10.8594 43.6004 11.8646 43.0639 12.5312 42.4389C13.3229 41.7514 13.7292 40.8556 13.75 39.7514C13.7708 38.6473 13.4062 37.6994 12.6562 36.9077C11.8438 36.1577 10.8906 35.7931 9.79688 35.8139C8.70312 35.8348 7.8125 36.241 7.125 37.0327Z" fill="#EF4444"/>
+</g>
+<defs>
+<filter id="filter0_d_362_99" x="0" y="0" width="58.1902" height="57.939" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_362_99"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_362_99" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/luckydiamond/src/assets/icons-home/settings-icon.svg b/luckydiamond/src/assets/icons-home/settings-icon.svg
new file mode 100644
index 0000000..87cfb85
--- /dev/null
+++ b/luckydiamond/src/assets/icons-home/settings-icon.svg
@@ -0,0 +1,32 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 7">
+<g id="Rectangle 86" filter="url(#filter0_d_457_36)">
+<path d="M0 20C0 8.95431 8.95431 0 20 0H53C64.0457 0 73 8.95431 73 20V53C73 64.0457 64.0457 73 53 73H20C8.95431 73 0 64.0457 0 53V20Z" fill="#D9D9D9" fill-opacity="0.12" shape-rendering="crispEdges"/>
+</g>
+<g id="Vector" filter="url(#filter1_d_457_36)">
+<path d="M35.8095 67C32.5868 67 29.8409 64.6604 29.3292 61.4787L29.1688 60.4819C28.879 58.6801 27.609 57.1737 26.0184 56.2789C25.9581 56.245 25.8978 56.2109 25.8375 56.1765C23.8309 55.0321 21.402 54.762 19.3004 55.721C16.2321 57.1211 12.6025 55.9437 10.9404 53.0089L9.85651 51.095C8.2289 48.2211 9.01602 44.5835 11.6861 42.6395L13.8942 41.0319C14.6456 40.4849 14.9839 39.5424 14.9417 38.6139C14.9164 38.0566 14.9037 37.525 14.9037 37.019C14.9037 36.5889 14.9164 36.0765 14.9417 35.482C14.9849 34.469 14.6066 33.4488 13.787 32.8521L11.7363 31.3591C9.03854 29.395 8.24558 25.7183 9.89396 22.8169L11.0152 20.8433C12.6354 17.9914 16.1656 16.8494 19.1492 18.2119L19.7327 18.4784C21.589 19.3262 23.7558 19.005 25.5244 17.9867C27.3751 16.9212 28.909 15.2317 29.2442 13.1226L29.3353 12.5489C29.8433 9.35272 32.5995 7 35.8358 7H38.1083C41.3783 7 44.1646 9.37397 44.6839 12.6025L44.7597 13.0737C45.0951 15.159 46.5497 16.8725 48.3996 17.8918C50.2176 18.8936 52.4239 19.3053 54.3134 18.4461L54.9614 18.1514C57.8836 16.8225 61.337 17.9428 62.9227 20.734L64.0288 22.681C65.7158 25.6503 64.8793 29.4147 62.0936 31.3902L60.0752 32.8216C59.2652 33.396 58.8591 34.3773 58.9253 35.3681C58.9633 35.9374 58.9823 36.4877 58.9823 37.019C58.9823 37.5503 58.9633 38.0923 58.9253 38.6452C58.8589 39.61 59.2518 40.5669 60.0399 41.1275L62.0882 42.5845C64.8574 44.5542 65.6892 48.2986 64.0146 51.2556L62.9222 53.1845C61.3165 56.0196 57.8097 57.1567 54.8458 55.8031L54.1885 55.503C52.3619 54.6688 50.2312 55.004 48.5147 56.0461C46.6456 57.1808 45.0856 58.9001 44.7384 61.0589L44.6737 61.4611C44.1603 64.653 41.4056 67 38.1727 67H35.8095ZM33.2559 59.3421C33.4888 61.2231 35.087 62.6357 36.9823 62.6357C38.8695 62.6357 40.4635 61.235 40.7061 59.3635L40.9044 57.8335C41.1965 55.5805 42.883 53.8132 44.9281 52.8239C45.3023 52.6429 45.67 52.4488 46.0312 52.2415C46.3935 52.0336 46.7486 51.8132 47.0963 51.5804C48.9972 50.3076 51.3969 49.766 53.4939 50.6804L55.2311 51.438C56.8627 52.1494 58.7678 51.5045 59.6316 49.9482C60.4764 48.426 60.0563 46.5129 58.6514 45.4848L55.9984 43.5433C54.7374 42.6205 54.1417 41.0484 54.4034 39.5079C54.5428 38.6876 54.6124 37.855 54.6124 37.0099C54.6124 36.1557 54.5617 35.3238 54.4604 34.5142C54.2694 32.9877 54.7545 31.4027 55.9944 30.492L58.6726 28.5248C60.0684 27.4995 60.4906 25.5999 59.6605 24.0799C58.803 22.5098 56.8895 21.8529 55.2484 22.5652L53.5963 23.2822C51.4564 24.211 49.0077 23.5934 47.0992 22.2518C46.7811 22.0282 46.4546 21.8146 46.1197 21.611C45.8085 21.4218 45.4918 21.2471 45.1696 21.0867C43.0643 20.0392 41.1877 18.2891 40.897 15.9557L40.7374 14.6752C40.5018 12.7839 38.8943 11.3643 36.9884 11.3643C35.0762 11.3643 33.4655 12.7931 33.2374 14.6917L33.069 16.094C32.7952 18.3739 31.0549 20.1357 28.9697 21.0974C28.5755 21.2792 28.1934 21.4757 27.8233 21.6869C27.4662 21.8907 27.1155 22.1097 26.7712 22.344C24.8723 23.6362 22.4668 24.2185 20.3646 23.2931L18.7327 22.5747C17.0999 21.856 15.1883 22.4953 14.3165 24.0517C13.4593 25.582 13.8817 27.5116 15.2999 28.5437L17.8436 30.395C19.1259 31.3283 19.704 32.9329 19.4636 34.5005C19.3369 35.3262 19.2736 36.1523 19.2736 36.9787C19.2736 37.8405 19.3306 38.6825 19.4446 39.5047C19.6618 41.0713 19.0927 42.6714 17.8163 43.6054L15.2918 45.4525C13.8768 46.4879 13.4558 48.4158 14.3103 49.9468C15.1802 51.5052 17.09 52.1503 18.7267 51.4385L20.4273 50.699C22.5056 49.7951 24.8815 50.3259 26.7659 51.585C27.1422 51.8365 27.5264 52.0729 27.9183 52.2941C28.2949 52.5067 28.6788 52.7054 29.0698 52.8901C31.1157 53.8564 32.7952 55.6209 33.0732 57.8664L33.2559 59.3421ZM36.9226 46.6964C39.5979 46.6964 41.8788 45.7533 43.7651 43.8672C45.6515 41.981 46.5947 39.6976 46.5947 37.0171C46.5947 34.3365 45.6506 32.0538 43.7624 30.1689C41.8742 28.284 39.5884 27.3416 36.905 27.3416C34.1944 27.3416 31.9018 28.2846 30.0272 30.1708C28.1526 32.057 27.2153 34.3403 27.2153 37.0209C27.2153 39.7015 28.1526 41.9842 30.0272 43.8691C31.9018 45.754 34.2003 46.6964 36.9226 46.6964Z" fill="#EF4444"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_457_36" x="0" y="0" width="81" height="81" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_457_36"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_457_36" result="shape"/>
+</filter>
+<filter id="filter1_d_457_36" x="9.01221" y="7" width="63.8853" height="68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_457_36"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_457_36" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/luckydiamond/src/assets/icons-home/slots-icon.svg b/luckydiamond/src/assets/icons-home/slots-icon.svg
new file mode 100644
index 0000000..c8162d4
--- /dev/null
+++ b/luckydiamond/src/assets/icons-home/slots-icon.svg
@@ -0,0 +1,21 @@
+<svg width="73" height="44" viewBox="0 0 73 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_d_644_4)">
+<rect width="65" height="36" fill="url(#pattern0)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_644_4" x="0" y="0" width="73" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_644_4"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_644_4" result="shape"/>
+</filter>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_644_4" transform="matrix(0.00193643 0 0 0.00354004 0 -0.40625)"/>
+</pattern>
+<image id="image0_644_4" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAZQTFRFAAAA70RE4n0h2gAAAAJ0Uk5TAP9bkSK1AAAET0lEQVR4nO3bTZKbMBAFYCgWLH2DcBQdDY7GUTgCSy8oFGP+W0J0q41xUu8tUnkV+qsZLH4mA0mCIAiCIAiCIAiCIAiCIAiCIAiCIAiC/JMpe918Zm2tAgprnyqgtFb1PaT2lUoB5APQKIDHALQKoBgAzV40A9ApgHIANB+DfSd+Ph2BKhrIRqCOBvIRaO4DHiMQv5LUQDEC8UtRDZgRiF/LaqAcgfiDYTihqU5qr+Em1wDDcZBpDsfhSEyVwPRHNNC/d8SdQPdeTQDuBe5fB+qlrAd0R6P6hPIC2ocS0J1U778uqIH7L67332Co75HUt3nqG001oL5X1t+tG91K/sBPLOofujLdMkjGj0EzP+xFzT58H06aHxvfe7EBAAAAAAAfB6bbHVYqD5AK5reXkgWQfAHbq+ECGBHQuoBofvM9zEAmA3oHyGXA+jnMQCEEagoYIdBQoBQCLQWE8+uN2QSI1uGQTgv0BBAuA7vemU2AdBk4gOxQGlJpgXoPFN8Hmj1gvg+0HwZKu79pp7fg+z6tGgK0xwNOL9fdsAJNYID24g10G8CSHx5PgMf6PaxAaID2aSdU0UC2roUF6EMDB0AbDUznn+cWCA4cAL0WsPcB81Wg0gK1FmhuB1ot8Lwd6H4OMMtBet7no2kHLCyrFw6QrQcpp+cOMN8kMPv4K7ItMF/jK15PD4Ga2R2gIBuc9fIIaJhdDRgKGHeDsw7gMqDm94uAit8vAgT9GqAXdAcYzlO9pDtAvjkLczo9H+w2OOte4EEGQt0D9MMGT253gAfZ4Kw7QD5er1pu9wBPMhDuDpC+/s0IugMkr78aQXeBP++LRc3tLpCQgZPuBcbDndcvAeZfxLP6VUCfcLsPyMhAsB8AXcLtPiAnA8F+CTAd7rw+n+Y/DbQJt/uAggwE+wHQJNzuAwwZCPYDoE64/RKgJAPBfgBUCbf7AEsGgv0ASBJuvwKYTzi8/jGgXjfIyEC4+4GODAT6DFQfBPL5v+1ZfQbYAwdArwW257zlcQZWN+uHEA0kc6YNiumEw+s/CcxnLF7/VaDidw9QkoFwvwgQdA9gyUC4XwP0gu4CKRk46dcAnaD/IpAtv4xldRcoyMBJdwFLFs5Jd4DN61Ws7gD5fLFn9s8Dm/ezWN0BiuVKx+s/CJhhg07U/zvg659CeTtgtceCAwiPxtQBNg/ucnq+/VVxzBnp4QCbV0453bpAIuh2XZb/NPC8HWgFA9cAjRaotUAVC6SfAiRfsg/o2QMHQLfdIPYxkjhg8yTMskHMszj1DqjkwG6D/WsQJ0BB96H0gSZDDiX3Df4w4Hl/prTy7B7iMrrxGKDZA8X3gXoPxD+fGA1UeyD/PrCflz9mSl+iin9Sdo4UeFKg1AJGCDQUKIRATQHpSqooIF0IdF76OTqfovRj8LzGVYgAZx8KF7P3bcBS9x0gCIIgCIIgCIIgCIIgCIIgCIIgCIIgt+UvVBu5EERv1u4AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/luckydiamond/src/pages/AsidebarElement.vue b/luckydiamond/src/pages/AsidebarElement.vue
index 9a5333e..df8abe9 100644
--- a/luckydiamond/src/pages/AsidebarElement.vue
+++ b/luckydiamond/src/pages/AsidebarElement.vue
@@ -1,12 +1,30 @@
 <template>
   <aside class="menu">
     <div class="menu__content">
-      <h1>MENU</h1>
+      <div class="menu__btn--home">
+        <a href="#"><img width="73" height="73" src="../assets/icons-home/home-icon.svg"></a>
+      </div>
+      <div class="menu__btns--gamemodes">
+        <div class="menu__content--gamemodes">
+          <a href="#"><img src="../assets/icons-home/slots-icon.svg"></a>
+          <a href="#"><img src="../assets/icons-home/crush-icon.svg"></a>
+          <a href="#"><img src="../assets/icons-home/case-icon.png"></a>
+          <a href="#"><img src="../assets/icons-home/bomb-icon.svg"></a>
+        </div>
+      </div>
+      <div class="menu__btn--settings">
+        <div class="menu__content--settings">
+          <a href="#"><img  src="../assets/icons-home/settings-icon.svg"></a>
+        </div>
+      </div>
     </div>
   </aside>
 </template>
 
+
 <script>
+import '@/assets/css/ElementsStyles/asidebar.css'
+
 export default {
   name: 'AsideBar-Element'
 }