Skip to content
Snippets Groups Projects
Commit 5ad4a135 authored by oetrb's avatar oetrb
Browse files

fixed sidebar active class

parent 7ba86aeb
No related branches found
No related tags found
No related merge requests found
...@@ -154,6 +154,7 @@ export default { ...@@ -154,6 +154,7 @@ export default {
getData(){ getData(){
this.$store.dispatch('teacher/getByID', this.id).then( this.$store.dispatch('teacher/getByID', this.id).then(
(data) => { (data) => {
console.log(data);
//this.teacher.anrede = data.courseNumber; //this.teacher.anrede = data.courseNumber;
}, },
......
...@@ -4,16 +4,23 @@ ...@@ -4,16 +4,23 @@
<img class="natlab-logo col-md-12" id="natlab-logo" src="../assets/natlab-logo.png" alt="NatLab Logo"> <img class="natlab-logo col-md-12" id="natlab-logo" src="../assets/natlab-logo.png" alt="NatLab Logo">
<br> <br>
<div> <div>
<div style="margin-top: 30px;" class="navButton"> <li style="margin-top: 50px;" :class="[currentPage.includes('courses') ? activeClass: '', 'navButton']">
<router-link to="/home"><a class="active navA">Home</a></router-link><br> <router-link style="margin-bottom: -25px;" to="/courses" class="navA">Kursübersicht</router-link><br>
</div> </li>
<router-link to="/courses"><a class="navA">Kursübersicht</a></router-link><br> <li :class="[currentPage.includes('teachers') ? activeClass: '', 'navButton']">
<router-link to="/teachers"><a class="navA">Lehrbeauftragtenübersicht</a></router-link><br> <router-link style="margin-bottom: -25px;" to="/teachers" class="navA">Lehrbeauftragtenübersicht</router-link><br>
<router-link to="/layouts"><a class="navA">Vorlagen</a></router-link><br> </li>
<router-link to="/calendar"><a class="navA">Kalender</a></router-link><br> <li :class="[currentPage.includes('layouts') ? activeClass: '', 'navButton']">
<router-link to="/register"><a class="navA">neuen Nutzer anlegen</a></router-link> <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 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> </a>
</div> </div>
</div> </div>
...@@ -22,6 +29,11 @@ ...@@ -22,6 +29,11 @@
<script> <script>
export default { export default {
name: "SideMenu", name: "SideMenu",
data() {
return {
activeClass: 'active',
}
},
methods: { methods: {
logout: function () { logout: function () {
...@@ -37,6 +49,11 @@ export default { ...@@ -37,6 +49,11 @@ export default {
} }
); );
} }
},
computed: {
currentPage(){
return this.$route.path;
}
} }
} }
...@@ -67,14 +84,14 @@ export default { ...@@ -67,14 +84,14 @@ export default {
font-weight: bold; font-weight: bold;
display: block; display: block;
color: black; color: black;
padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
padding-top: 15px;
padding-left: 15px; padding-left: 15px;
text-decoration: none; text-decoration: none;
} }
/* Active/current link */ /* Active/current link */
.navA.active { .active {
font-weight: bold; font-weight: bold;
background-color: #e3f5ff; background-color: #e3f5ff;
color: #528fff; color: #528fff;
...@@ -84,4 +101,7 @@ export default { ...@@ -84,4 +101,7 @@ export default {
background: #9fc1ff; background: #9fc1ff;
} }
.sidebar li {
list-style: none;
}
</style> </style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment