47 lines
992 B
JavaScript
47 lines
992 B
JavaScript
Vue.component('sidebar-button', {
|
|
props: {
|
|
app: String,
|
|
icon: String,
|
|
active_app: String
|
|
},
|
|
data: function() {
|
|
return {
|
|
hover: false
|
|
}
|
|
},
|
|
methods: {
|
|
selector_css() {
|
|
let result = "sidebar-selector";
|
|
if (this.app == this.active_app) {
|
|
result += " sidebar-selector-active";
|
|
} else if (this.hover) {
|
|
result += " sidebar-selector-hover";
|
|
}
|
|
return result;
|
|
},
|
|
button_css() {
|
|
return "sidebar-button";
|
|
},
|
|
select_app: function() {
|
|
this.$emit('select-app', {name: this.app});
|
|
},
|
|
set_hover(hover) {
|
|
this.hover = hover;
|
|
}
|
|
},
|
|
template: `
|
|
<div class="sidebar-button-container">
|
|
<div :class="selector_css()">
|
|
</div>
|
|
|
|
<div :class="button_css()"
|
|
v-on:click="select_app"
|
|
v-on:mouseover="set_hover(true)"
|
|
v-on:mouseleave="set_hover(false)">
|
|
|
|
<img :src="icon" class="sidebar-icon">
|
|
</div>
|
|
</div>
|
|
`
|
|
});
|