<script setup>
import {computed, ref} from "vue";
import {useAppStore} from "../../Stores/App.js";
import {NMenu} from 'naive-ui'

const { collapsed } = useAppStore()

const menuItems = [
    {
        label: 'СофтИнфо',
        key: 'si',
        children: [
            {
                label: 'Стационарные карты',
                key: 'web.si.stt'
            },
            {
                label: 'Амбулаторные карты',
                key: 'web.si.amb'
            },
        ]
    },
    {
        label: 'МИС',
        key: 'mis',
        children: [
            {
                label: 'Стационарные карты',
                key: 'web.mis.stt'
            },
            {
                label: 'Амбулаторные карты',
                key: 'web.mis.amb'
            },
        ]
    },
]
const menu = ref(null)
</script>

<template>
  <NMenu
    ref="menu"
    class="side-menu"
    accordion
    :indent="18"
    :collapsed-icon-size="22"
    :collapsed-width="64"
    :collapsed="collapsed"
    :options="menuItems"
  />
</template>

<style>
.side-menu:not(.n-menu--collapsed) .n-menu-item-content::before {
    left: 8px;
    right: 8px;
}

.side-menu:not(.n-menu--collapsed) .n-menu-item-content.n-menu-item-content--selected::before {
    border-left: 4px solid #EC6608;
}
</style>
