2020-03-12 14:29:21 +01:00
|
|
|
<template>
|
2020-02-18 08:57:00 +01:00
|
|
|
<li class="setting-menu-item" :class="{ active: isActive }">
|
2020-06-25 11:36:35 +02:00
|
|
|
<router-link v-if="to" :to="to">
|
|
|
|
<span>{{ title }}</span>
|
2020-02-18 08:57:00 +01:00
|
|
|
</router-link>
|
2020-06-25 11:36:35 +02:00
|
|
|
<span v-else>{{ title }}</span>
|
2020-02-18 08:57:00 +01:00
|
|
|
</li>
|
2020-03-12 14:29:21 +01:00
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
2020-02-18 08:57:00 +01:00
|
|
|
import { Component, Prop, Vue } from "vue-property-decorator";
|
2020-06-25 11:36:35 +02:00
|
|
|
import { Route } from "vue-router";
|
2020-03-12 14:29:21 +01:00
|
|
|
|
|
|
|
@Component
|
|
|
|
export default class SettingMenuItem extends Vue {
|
2020-06-25 11:36:35 +02:00
|
|
|
@Prop({ required: false, type: String }) title!: string;
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2020-06-25 11:36:35 +02:00
|
|
|
@Prop({ required: true, type: Object }) to!: Route;
|
2020-03-12 14:29:21 +01:00
|
|
|
|
2020-11-27 19:27:44 +01:00
|
|
|
get isActive(): boolean {
|
2020-06-25 11:36:35 +02:00
|
|
|
if (!this.to) return false;
|
|
|
|
if (this.to.name === this.$route.name) {
|
|
|
|
if (this.to.params) {
|
|
|
|
return this.to.params.identityName === this.$route.params.identityName;
|
2020-03-12 14:29:21 +01:00
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2020-02-18 08:57:00 +01:00
|
|
|
li.setting-menu-item {
|
|
|
|
font-size: 1.05rem;
|
|
|
|
background-color: #fff1de;
|
2020-06-17 15:54:24 +02:00
|
|
|
color: $background-color;
|
2020-02-18 08:57:00 +01:00
|
|
|
margin: auto;
|
2020-03-12 14:29:21 +01:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
span {
|
|
|
|
padding: 5px 15px;
|
|
|
|
display: block;
|
|
|
|
}
|
2020-03-12 14:29:21 +01:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
color: inherit;
|
|
|
|
}
|
2020-03-12 14:29:21 +01:00
|
|
|
|
2020-02-18 08:57:00 +01:00
|
|
|
&:hover,
|
|
|
|
&.active {
|
|
|
|
cursor: pointer;
|
|
|
|
background-color: lighten(#fea72b, 10%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|