40 lines
983 B
Vue
40 lines
983 B
Vue
<template lang="pug">
|
|
.sidebar-wrapper.h-full.rounded.px-2.py-6.flex.flex-col
|
|
.menu-item.text-base.px-4.py-3.rounded.cursor-pointer(
|
|
v-for="item in menuItem",
|
|
:key="item.id",
|
|
:id="item.id",
|
|
@click="selectItem(item)",
|
|
:class="{'menu-item-active': item.component === modelValue}"
|
|
) {{item.title}}
|
|
</template>
|
|
|
|
<script>
|
|
import { v_model } from "@/shared/mixins/v-model";
|
|
import { baseInfoMenu } from "@/pages/newMedicalCard/utils/configMedical.js";
|
|
export default {
|
|
name: "MedicalCardSidebar",
|
|
mixins: [v_model],
|
|
data() {
|
|
return {
|
|
menuItem: baseInfoMenu,
|
|
};
|
|
},
|
|
methods: {
|
|
selectItem(item) {
|
|
this.value = item?.component;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="sass" scoped>
|
|
.sidebar-wrapper
|
|
width: 16.3%
|
|
background-color: var(--default-white)
|
|
.menu-item
|
|
color: var(--font-grey-color)
|
|
.menu-item-active, .menu-item:hover
|
|
color: var(--btn-blue-color)
|
|
background-color: var(--bg-ligth-blue-color)
|
|
</style>
|