[ui] redesign UX for navbar

frontend/src/app/components/menu/menu.component.scss

@@ -1,22 +1,17 @@
 .sidenav {
-  z-index: 10;
-  background-color: #1d1f31;
-  box-shadow: 0px 0px 15px 0px #000;
-  width: 225px;
-  height: calc(100vh - 65px);
+  z-index: 200;
+  background-color: transparent;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: -100vw;
+  top: 0;
+  transition: 0.25s;
+}
+
+.scrollable {
   overflow-x: hidden;
   overflow-y: scroll;
-  position: fixed;
-  left: -225px;
-  top: 65px;
-  transition: 0.25s;
-  @media (max-width: 991px) {
-    height: calc(100vh - 65px - 55px);
-  }
-  @media (max-width: 572px) {
-    top: 100px;
-    height: calc(100vh - 105px);
-  }
 }
 
 .sidenav.open {
@@ -25,7 +20,6 @@
 
 .sidenav a, button{
   text-decoration: none;
-  font-size: 20x;
   color: lightgray;
   margin-left: 20px;
   display: block;
@@ -34,18 +28,16 @@
   color: white;
 }
 .sidenav nav {
-  height: auto;
+  box-shadow: 0px 0px 15px 0px #000;
+  height: 100vh;
+  max-width: 250px;
+  background-color: #1d1f31;
   padding-left: 20px;
   padding-right: 20px;
-  padding-top: 30px;
-  padding-bottom: 50px;
-  @media (max-width: 572px) {
-    padding-bottom: 100px;
-  }
+  padding-top: 20px;
+  padding-bottom: 100px;
 }
 
-/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 @media screen and (max-height: 450px) {
-  .sidenav {padding-top: 15px;}
   .sidenav a {font-size: 18px;}
 }