110 lines
2.3 KiB
Vue
110 lines
2.3 KiB
Vue
<template>
|
|
<div class="profile-page">
|
|
<h1>{{ $t('profile.title') }}</h1>
|
|
|
|
<!-- Onglets -->
|
|
<div role="tablist" aria-label="Profil utilisateur" class="tabs">
|
|
<button
|
|
:class="['tab', activeTab === 'general' ? 'active' : '']"
|
|
role="tab"
|
|
:aria-selected="activeTab === 'general'"
|
|
aria-controls="tab-general"
|
|
id="tab-button-general"
|
|
@click="activeTab = 'general'; authStore.user.sudo_token = null"
|
|
>
|
|
{{ $t('profile.tabGeneral') }}
|
|
</button>
|
|
|
|
<button
|
|
:class="['tab', activeTab === 'redzone' ? 'active' : '']"
|
|
class='redzone'
|
|
role="tab"
|
|
:aria-selected="activeTab === 'redzone'"
|
|
aria-controls="tab-redzone"
|
|
id="tab-button-redzone"
|
|
@click="activeTab = 'redzone'; authStore.user.sudo_token = null"
|
|
>
|
|
{{ $t('profile.tabRedZone')}}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Contenu des onglets -->
|
|
<div class="tab-panels">
|
|
<!-- Onglet Général -->
|
|
<section
|
|
v-show="activeTab === 'general'"
|
|
role="tabpanel"
|
|
aria-labelledby="tab-button-general"
|
|
id="tab-general"
|
|
>
|
|
<ProfileGeneral />
|
|
</section>
|
|
|
|
<!-- Onglet RED ZONE -->
|
|
<section
|
|
v-show="activeTab === 'redzone'"
|
|
role="tabpanel"
|
|
aria-labelledby="tab-button-redzone"
|
|
id="tab-redzone"
|
|
>
|
|
<ProfileRedZone />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const authStore = useAuthStore()
|
|
// Onglet actif (TypeScript infère automatiquement le type string)
|
|
const activeTab = ref('general')
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
/* Onglets */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 1rem;
|
|
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.tab {
|
|
padding: 0.5rem 1rem;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
}
|
|
//
|
|
.tab:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.tab.active {
|
|
border-bottom-color: blueviolet;
|
|
color: blueviolet;
|
|
}
|
|
button.redzone{
|
|
color:red;
|
|
&.active{
|
|
border-bottom-color: red;
|
|
color:red;
|
|
|
|
}
|
|
}
|
|
|
|
/* Contenu onglet */
|
|
.tab-panels section {
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
/* Animation simple */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(5px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|