<script setup>
import {useI18n} from 'vue-i18n';

const {t} = useI18n({useScope: 'local'});
</script>

<template>
          
    <details>
        <summary>
            <span>👤 {{ t('menu.contact') }}</span>
        </summary>
        <ul>
            <li><router-link to="/profil">📝 {{ t('menu.profile') }}</router-link></li>
            <li><router-link to="">🗒️ {{ t('menu.contacts list') }}</router-link></li>
        </ul>
    </details>

    <details>
        <summary>
            <span>💬 ✉️ {{ t('menu.messages') }}</span>
        </summary>
        <ul>
            <li><router-link to="/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
            <li><router-link to="/chat">💬 {{ t('menu.chat') }}</router-link></li>
            <li><router-link to="">🎥 {{ t('menu.video conferencing') }}</router-link></li>
        </ul>  
    </details> 
           
</template>

<style scoped>
    li {
        list-style-type: none;
    }
    details {
        padding-bottom: 5px;
    }
</style>


<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>