cc702cff19
All checks were successful
Deploy / deploy (push) Successful in 2m46s
feat(conversion): simplifier ConversionPage et brancher les toasts style(manga): réécriture de la liste de résultats dans AddManga chore(task): ajouter tâche conversion CBR→CBZ dans TASK.md
63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<template>
|
|
<header
|
|
:class="[
|
|
'bg-green-600 h-16 flex items-center fixed w-full z-50 transition-transform duration-300 ease-in-out',
|
|
headerStore.shouldShowHeader ? 'translate-y-0' : '-translate-y-full'
|
|
]"
|
|
>
|
|
<button
|
|
@click="$emit('menu-click')"
|
|
:class="[
|
|
'ml-4 text-white p-2',
|
|
showMenuButton ? '' : 'md:hidden'
|
|
]"
|
|
>
|
|
<Bars3Icon class="h-6 w-6" />
|
|
</button>
|
|
<div class="flex items-center flex-1">
|
|
<router-link to="/" class="ml-4">
|
|
<img src="/img/mangarr_logo.png" alt="Mangarr" class="h-10" />
|
|
</router-link>
|
|
<SearchBar />
|
|
</div>
|
|
<button
|
|
@click="toggleDarkMode"
|
|
class="mr-4 text-white p-2 hover:text-green-200 transition-colors"
|
|
:title="isDark ? 'Passer en mode clair' : 'Passer en mode sombre'"
|
|
>
|
|
<SunIcon v-if="isDark" class="h-6 w-6" />
|
|
<MoonIcon v-else class="h-6 w-6" />
|
|
</button>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { Bars3Icon, SunIcon, MoonIcon } from '@heroicons/vue/24/outline';
|
|
import { useHeaderStore } from '../../stores/headerStore';
|
|
import { useUserPreferencesStore } from '../../../domain/setting/application/store/userPreferencesStore';
|
|
import SearchBar from './SearchBar.vue';
|
|
|
|
const headerStore = useHeaderStore();
|
|
const preferencesStore = useUserPreferencesStore();
|
|
|
|
const isDark = computed(() => {
|
|
if (preferencesStore.theme === 'dark') return true;
|
|
if (preferencesStore.theme === 'light') return false;
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
});
|
|
|
|
function toggleDarkMode() {
|
|
preferencesStore.setTheme(isDark.value ? 'light' : 'dark');
|
|
}
|
|
|
|
defineProps({
|
|
showMenuButton: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
defineEmits(['menu-click']);
|
|
</script>
|