Refactor NavBar

frontend/components/nav/SideBar.vue

@@ -20,6 +20,9 @@ function handleStateChange(newState : string, newLane: number) {
 </script>
 
 <template>
+    <!-- To make content have a 300px margin -->
+    <div class="sidebar-margin" />
+
     <div class="sidebar-container">
         <Logo font-size="2.6rem" img-width="60" style="padding-left: 15px; padding-right: 15px; margin-top: 30px;"/>
 
@@ -49,13 +52,16 @@ function handleStateChange(newState : string, newLane: number) {
 .sidebar-container {
     background-color: #2B2826;
     width: 300px;
-    /* height: 100%; */
-    flex-shrink: 0;
 
-    margin: 0px;
-    /* position: absolute;
-    top: 0px;
-    left: 0px; */
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    z-index: 10;
+}
+.sidebar-margin {
+    width: 300px; 
+    flex-shrink: 0;
 }
 .sidebar-link {
     user-select: none;
@@ -77,5 +83,8 @@ function handleStateChange(newState : string, newLane: number) {
     .sidebar-container {
         display: none;
     }
+    .sidebar-margin {
+        display: none;
+    }
 }
 </style>