Sub-Menu Elements

src/styles.css

@@ -3,8 +3,8 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
-
-  color: #ffffff;
+  overflow: hidden;
+  /* color: #ffffff; */
   background-color: #231929;
 
   font-synthesis: none;
@@ -15,18 +15,45 @@
 }
 
 .container {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: left;
-  text-align: left;
+  background-color: #231929;
 }
-/*
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-} */
 
-.row {
+.sub-element {
+  width: 100%;
+  padding: 2px;
+  border: 0px solid #ffffff00;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+
+.sub-element:hover {
+  background-color: #231929;
+}
+
+.menu {
+  z-index: 1;
+  background-color: #382C44;
+  color: #ffffff;
+  /* filter: drop-shadow(-20px 0 1em #382C44); */
+  box-shadow: -24px 0 1em  6px #382C44;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 92vh;
+  padding: 8px;
+}
+
+.footer {
+  display: flex;
+  color: #ffffff;
+  background-color: #231929;
+}
+
+.footer-content {
+  z-index: 2;
+  background-color: #231929;
+}
+
+.item {
   display: flex;
   justify-content: left;
   padding-left: 2px;
@@ -34,16 +61,18 @@
   border: 0px solid #ffffff00;
   border-radius: 4px;
   padding: 2px;
+  padding-top: 0;
+  padding-bottom: 0;
   font-size: 18px;
   color: #ffffff;
 }
 
-.row:hover {
-  background-color: #382c44;
+.item:hover {
+  background-color: #534264;
 }
 
-.row:active {
-  background-color: #493a59;
+.item:active {
+  background-color: #59486c;
 }
 
 h1 {