fixed sidebar active class

src/components/CreateEditComponents/EditTeacher.vue

@@ -154,6 +154,7 @@ export default {
     getData(){
       this.$store.dispatch('teacher/getByID', this.id).then(
           (data) => {
+            console.log(data);
             //this.teacher.anrede = data.courseNumber;
 
           },

src/components/SideMenu.vue

@@ -4,16 +4,23 @@
       <img class="natlab-logo col-md-12" id="natlab-logo" src="../assets/natlab-logo.png" alt="NatLab Logo">
     <br>
     <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>
+      <li style="margin-top: 50px;" :class="[currentPage.includes('courses') ? activeClass: '', 'navButton']">
+        <router-link style="margin-bottom: -25px;" to="/courses" class="navA">Kursübersicht</router-link><br>
+      </li>
+      <li :class="[currentPage.includes('teachers') ? activeClass: '', 'navButton']">
+        <router-link style="margin-bottom: -25px;" to="/teachers" class="navA">Lehrbeauftragtenübersicht</router-link><br>
+      </li>
+      <li :class="[currentPage.includes('layouts') ? activeClass: '', 'navButton']">
+        <router-link style="margin-bottom: -25px;" to="/layouts" class="navA">Vorlagen</router-link><br>
+      </li>
+      <li :class="[currentPage.includes('calendar') ? activeClass: '', 'navButton']">
+        <router-link style="margin-bottom: -25px;" to="/calendar" class="navA">Kalender</router-link><br>
+      </li>
+      <li :class="[currentPage.includes('register') ? activeClass: '', 'navButton']">
+        <router-link style="margin-bottom: -25px;" to="/register" class="navA">neuen Nutzer anlegen</router-link>
+      </li>
       <a class="nav-link sidebar-bottom" href @click.prevent="logout">
-        <a href="/logout"><a class="navA">Abmelden</a></a>
+        <a href="/logout" class="navA">Abmelden</a>
       </a>
     </div>
   </div>
@@ -22,6 +29,11 @@
 <script>
 export default {
   name: "SideMenu",
+  data() {
+    return {
+      activeClass: 'active',
+    }
+  },
 
   methods: {
     logout: function () {
@@ -37,6 +49,11 @@ export default {
           }
       );
     }
+  },
+  computed: {
+    currentPage(){
+      return this.$route.path;
+    }
   }
 }
 
@@ -67,14 +84,14 @@ export default {
   font-weight: bold;
   display: block;
   color: black;
-  padding-top: 15px;
   padding-bottom: 15px;
+  padding-top: 15px;
   padding-left: 15px;
   text-decoration: none;
 }
 
 /* Active/current link */
-.navA.active {
+.active {
   font-weight: bold;
   background-color: #e3f5ff;
   color: #528fff;
@@ -84,4 +101,7 @@ export default {
   background: #9fc1ff;
 }
 
+.sidebar li {
+  list-style: none;
+}
 </style>
\ No newline at end of file