style(reader): améliorer la toolbar et l'UI du mode scroll

- Corriger la troncature de la toolbar (max-height 4rem → 5rem)
- Animer la toolbar en translateY pour un effet "bloc uni" avec le header
- Corriger le bug d'auto-hide du header après switch simple → scroll
- Augmenter la taille du titre de chapitre dans la toolbar (text-sm font-medium)
- Harmoniser le bouton scroll-to-top avec le style des ToolbarButtons
- Ajouter support de prop `class` sur les labels de ToolbarSection
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2026-03-15 16:50:02 +01:00
parent cc702cff19
commit 9c47c717d0
18 changed files with 396 additions and 562 deletions

View File

@@ -12,9 +12,10 @@
@add-manga-click="$emit('add-manga-click', $event)" />
<main :class="[
'flex-1 mt-16 flex flex-col overflow-hidden',
'flex-1 flex flex-col overflow-hidden',
headerStore.shouldShowHeader ? 'mt-16' : 'mt-0',
isReaderMode ? '' : 'md:ml-60'
]">
]" style="transition: margin-top 300ms ease-in-out;">
<RouterView></RouterView>
</main>
</div>
@@ -23,10 +24,12 @@
<script setup>
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useHeaderStore } from '../../stores/headerStore';
import Header from './Header.vue';
import Sidebar from './Sidebar.vue';
const route = useRoute();
const headerStore = useHeaderStore();
const isSidebarOpen = ref(false);
// Détecte si on est en mode Reader