75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
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(
|
|
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";
|
|
export default {
|
|
name: "MedicalCardSidebar",
|
|
mixins: [v_model],
|
|
data() {
|
|
return {
|
|
menuItem: [
|
|
{
|
|
title: "Основные данные",
|
|
id: "basic-data",
|
|
component: "BasicDataForm",
|
|
},
|
|
{
|
|
title: "Протоколы первичного осмотра",
|
|
id: "protocols",
|
|
component: "Protocols",
|
|
},
|
|
{
|
|
title: "Доверенное лицо",
|
|
id: "trusted-person",
|
|
component: "TrustedPerson",
|
|
},
|
|
{
|
|
title: "Аллергии",
|
|
id: "allergies",
|
|
component: "Allergies",
|
|
},
|
|
{
|
|
title: "Состояние здоровья",
|
|
id: "health-status",
|
|
component: "HealthStatus",
|
|
},
|
|
{
|
|
title: "История болезней",
|
|
id: "medical-history",
|
|
component: "MedicalHistory",
|
|
},
|
|
{
|
|
title: "Зубная формула",
|
|
id: "dental-formula",
|
|
component: "DentalFormula",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
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>
|