mobilizon/js/src/components/Settings/SettingMenuItem.vue

54 lines
1.3 KiB
Vue
Raw Normal View History

<template>
<li class="setting-menu-item" :class="{ active: isActive }">
<router-link v-if="menuItem.to" :to="menuItem.to">
<span>{{ menuItem.title }}</span>
</router-link>
<span v-else>{{ menuItem.title }}</span>
</li>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { ISettingMenuSection } from '@/types/setting-menu.model';
@Component
export default class SettingMenuItem extends Vue {
@Prop({ required: true, type: Object }) menuItem!: ISettingMenuSection;
get isActive() {
if (!this.menuItem.to) return false;
if (this.menuItem.to.name === this.$route.name) {
if (this.menuItem.to.params) {
return this.menuItem.to.params.identityName === this.$route.params.identityName;
}
return true;
}
return false;
}
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
li.setting-menu-item {
font-size: 1.05rem;
background-color: #fff1de;
color: $primary;
margin: auto;
span {
padding: 5px 15px;
display: block;
}
a {
display: block;
color: inherit;
}
&:hover, &.active {
cursor: pointer;
background-color: lighten(#fea72b, 10%);
}
}
</style>