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 @@
+
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 0000000..92b0fbb
Binary files /dev/null and b/luckydiamond/src/assets/icons-home/case-icon.png differ
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 @@
+
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 @@
+
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 @@
+
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 @@
+