61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<li @click="$emit('click', $event)" class="side-text-button">
|
|
<div class="icon-wrapper-seamless">
|
|
<IconImage
|
|
v-if="icon"
|
|
:src="icon"
|
|
:width="iconWidth"
|
|
:height="iconHeight"
|
|
class="seamless-icon"
|
|
/>
|
|
</div>
|
|
<div class="text-label" style="color: var(--text-primary);">
|
|
{{ text }}
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
<script setup>
|
|
import IconImage from '../IconImage.vue'
|
|
|
|
defineProps({
|
|
text: { type: String, required: true },
|
|
icon: { type: String, default: '' },
|
|
iconWidth: { type: [String, Number], default: 30 },
|
|
iconHeight: { type: [String, Number], default: 30 },
|
|
})
|
|
|
|
defineEmits(['click'])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.side-text-button {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 16px;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.side-text-button:hover {
|
|
background: var(--bg-tertiary) !important;
|
|
}
|
|
|
|
.icon-wrapper-seamless {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.seamless-icon {
|
|
filter: brightness(1.1) contrast(1.1);
|
|
}
|
|
|
|
.text-label {
|
|
font-weight: 500;
|
|
}
|
|
</style>
|