fix nav design

src/components/SideMenu.vue

@@ -15,17 +15,19 @@
     <br>
       <img class="natlab-logo col-md-12" id="natlab-logo" src="../assets/natlab-logo.png" alt="NatLab Logo">
     <br>
-    <nav>
-      <router-link to="/home">Home</router-link><br>
-      <router-link to="/courses">Kursübersicht</router-link><br>
-      <router-link to="/teachers">Lehrbeauftragtenübersicht</router-link><br>
-      <router-link to="/layouts">Vorlagen</router-link><br>
-      <router-link to="/calendar">Kalender</router-link><br>
-      <router-link to="/register">Neuen User erstellen</router-link>
-      <a class="nav-link" href @click.prevent="logOut()">
-        <a href="/logout">Abmelden</a>
+    <div>
+      <div style="margin-top: 30px" class="navButton">
+        <router-link to="/home"><a class="active navA">Home</a></router-link><br>
+      </div>
+      <router-link to="/courses"><a class="navA">Kursübersicht</a></router-link><br>
+      <router-link to="/teachers"><a class="navA">Lehrbeauftragtenübersicht</a></router-link><br>
+      <router-link to="/layouts"><a class="navA">Vorlagen</a></router-link><br>
+      <router-link to="/calendar"><a class="navA">Kalender</a></router-link><br>
+      <router-link to="/register"><a class="navA">neuen Nutzer anlegen</a></router-link>
+      <a class="nav-link sidebar-bottom" href @click.prevent="logOut()">
+        <a href="/logout"><a class="navA">Abmelden</a></a>
       </a>
-    </nav>
+    </div>
   </div>
 </template>
 
@@ -64,13 +66,8 @@ export default {
   padding-left: 15px;
 }
 
-.sidebar natlab-logo {
-  position: relative;
-  margin: 10px;
-}
-
 /* Sidebar links */
-.sidebar a {
+.navA {
   font-weight: bold;
   display: block;
   color: black;
@@ -81,10 +78,14 @@ export default {
 }
 
 /* Active/current link */
-.sidebar a.active {
+.navA.active {
   font-weight: bold;
   background-color: #e3f5ff;
   color: #528fff;
 }
 
+.navA:hover {
+  background: #9fc1ff;
+}
+
 </style>
\ No newline at end of file

src/components/Teachers.vue

@@ -11,22 +11,4 @@ export default {
 </script>
 
 <style scoped>
-/* On screens that are less than 700px wide, make the sidebar into a topbar */
-@media screen and (max-width: 700px) {
-  .sidebar {
-    width: 100%;
-    height: auto;
-    position: relative;
-  }
-  .sidebar a {float: left;}
-  div.content {margin-left: 0;}
-}
-
-/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
-@media screen and (max-width: 400px) {
-  .sidebar a {
-    text-align: center;
-    float: none;
-  }
-}
 </style>
\ No newline at end of file