sidebar element icon is now optional and added more strict styling

This commit is contained in:
2019-11-24 21:28:30 +01:00
parent 20ad976939
commit 0a84223778

View File

@@ -1,8 +1,10 @@
<template> <template>
<div> <div>
<a @click="$emit('click')"><li> <a @click="$emit('click')"><li>
<figure :class="activeClassIfActive"> <figure :class="activeClassIfActive" v-if="iconRefNameIfActive">
<svg><use :xlink:href="iconRefNameIfActive"/></svg> <svg class="icon">
<use :xlink:href="iconRefNameIfActive"/>
</svg>
</figure> </figure>
<span :class="activeClassIfActive">{{ contentTextToDisplay }}</span> <span :class="activeClassIfActive">{{ contentTextToDisplay }}</span>
@@ -21,7 +23,7 @@ export default {
props: { props: {
iconRef: { iconRef: {
type: String, type: String,
required: true required: false
}, },
iconRefActive: { iconRefActive: {
type: String, type: String,
@@ -44,7 +46,7 @@ export default {
iconRefNameIfActive() { iconRefNameIfActive() {
const { iconRefActive, iconRef, active } = this const { iconRefActive, iconRef, active } = this
if ((iconRefActive && iconRef) & active) { if ((iconRefActive && iconRef) && active) {
return iconRefActive return iconRefActive
} }
return iconRef return iconRef
@@ -98,7 +100,7 @@ li {
text-align: right; text-align: right;
} }
figure, figure > svg { figure, figure > .icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin: 0 7px 0 0; margin: 0 7px 0 0;