colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajout de la gestion de l'auto-hide du header et amélioration de la réactivité des composants en fonction de la taille de la fenêtre, ainsi que des optimisations CSS pour une meilleure expérience utilisateur sur mobile.

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-06-26 22:59:21 +02:00
parent 4848a1736f
commit ebcca466a9
10 changed files with 279 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/vue/app/shared/components/layout/Layout.vue
View File

@@ -1,24 +1,39 @@
<template>
<div class="min-h-screen bg-gray-50 flex">
<Header
:show-menu-button="isReaderMode"
@menu-click="toggleSidebar"
@manga-click="$emit('manga-click', $event)"
@add-manga-click="$emit('add-manga-click', $event)" />
<Sidebar :is-open="isSidebarOpen" @close="closeSidebar" @add-manga-click="$emit('add-manga-click', $event)" />
<Sidebar
:is-open="isSidebarOpen"
:force-mobile-behavior="isReaderMode"
@close="closeSidebar"
@add-manga-click="$emit('add-manga-click', $event)" />
<main class="flex-1 pt-16 md:ml-60">
<main :class="[
'flex-1 pt-16',
isReaderMode ? '' : 'md:ml-60'
]">
<RouterView></RouterView>
</main>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Header from './Header.vue';
import Sidebar from './Sidebar.vue';
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import Header from './Header.vue';
import Sidebar from './Sidebar.vue';
const route = useRoute();
const isSidebarOpen = ref(false);
// Détecte si on est en mode Reader
const isReaderMode = computed(() => {
return route.name === 'reader';
});
const toggleSidebar = () => {
isSidebarOpen.value = !isSidebarOpen.value;
};