[ui] redesign UX for navbar using sticky

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

@@ -1,12 +1,13 @@
 .sidenav {
-  z-index: 200;
+  z-index: 1;
   background-color: transparent;
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  left: -100vw;
-  top: 0;
+  width: 225px;
+  height: calc(100vh - 65px);
+  position: sticky;
+  top: 65px;
   transition: 0.25s;
+  margin-left: -250px;
+  box-shadow: 5px 0px 30px 0px #000;
 }
 
 .scrollable {
@@ -15,27 +16,27 @@
 }
 
 .sidenav.open {
+  margin-left: 0px;
   left: 0px;
+  display: block;
 }
 
 .sidenav a, button{
   text-decoration: none;
   color: lightgray;
   margin-left: 20px;
-  display: block;
 }
 .sidenav a:hover {
   color: white;
 }
 .sidenav nav {
-  box-shadow: 0px 0px 15px 0px #000;
-  height: 100vh;
-  max-width: 250px;
+  width: 100%;
+  height: calc(100vh - 65px);
   background-color: #1d1f31;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
-  padding-bottom: 100px;
+  padding-bottom: 20px;
 }
 
 @media screen and (max-height: 450px) {