mirror of https://github.com/lissy93/dashy
65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<template>
|
|
<div @click="itemClicked()"
|
|
:class="`side-bar-item ${icon ? 'w-icon' : 'text-only'}`" v-tooltip="tooltip">
|
|
<Icon v-if="icon" :icon="icon" size="small" :url="url" />
|
|
<p class="small-title" v-else>{{ title }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Icon from '@/components/LinkItems/ItemIcon.vue';
|
|
|
|
export default {
|
|
name: 'SideBarItem',
|
|
inject: ['config'],
|
|
props: {
|
|
icon: String,
|
|
title: String,
|
|
url: String,
|
|
click: Function,
|
|
},
|
|
components: {
|
|
Icon,
|
|
},
|
|
methods: {
|
|
itemClicked() {
|
|
if (this.url) this.$emit('launch-app', this.url);
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
tooltip: {
|
|
disabled: !this.title,
|
|
content: this.title,
|
|
trigger: 'hover focus',
|
|
hideOnTargetClick: true,
|
|
html: false,
|
|
placement: 'right-start',
|
|
delay: { show: 800, hide: 1000 },
|
|
},
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/styles/media-queries.scss';
|
|
@import '@/styles/style-helpers.scss';
|
|
|
|
div.side-bar-item {
|
|
color: var(--side-bar-color);
|
|
background: var(--side-bar-background);
|
|
text-align: center;
|
|
&.text-only {
|
|
background: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
p.small-title {
|
|
margin: 0.1rem auto;
|
|
font-size: 0.6rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|