4ce0214ec9
All checks were successful
Auto Tag Develop / tag (push) Successful in 6s
- Add dark mode toggle button in top nav - Add darkMode store with localStorage persistence - Enable Tailwind class-based dark mode - Import dark.css global overrides - Remove inline dark: Tailwind classes (handled by global CSS) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
79 lines
2.9 KiB
Vue
79 lines
2.9 KiB
Vue
<template>
|
|
<header class="border-b border-neutral-200 bg-primary-500 px-3 py-2 text-white sm:px-5 sm:py-2 max-h-[60px]">
|
|
<div class="flex h-full items-center justify-between">
|
|
<button
|
|
class="rounded-md p-2 text-white hover:bg-primary-600 transition-colors lg:hidden"
|
|
@click="ui.openMobileSidebar()"
|
|
>
|
|
<Icon name="mdi:menu" size="24" />
|
|
</button>
|
|
<div class="hidden items-center gap-2 lg:flex">
|
|
<h1 class="text-lg font-bold tracking-tight">{{ appTitle }}</h1>
|
|
<button
|
|
type="button"
|
|
class="rounded-md p-1 text-white/60 transition-colors hover:bg-primary-600 hover:text-white"
|
|
:title="appTitle === 'NeauTime' ? 'Switch to Lesstime' : 'Switch to NeauTime'"
|
|
@click="toggleTitle"
|
|
>
|
|
<Icon name="mdi:swap-horizontal" size="18" />
|
|
</button>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-4 text-xl text-white sm:gap-8">
|
|
<button
|
|
type="button"
|
|
class="rounded-md p-1.5 text-white/70 transition-colors hover:bg-primary-600 hover:text-white"
|
|
:title="ui.darkMode ? 'Mode clair' : 'Mode sombre'"
|
|
@click="ui.toggleDarkMode()"
|
|
>
|
|
<Icon :name="ui.darkMode ? 'mdi:weather-sunny' : 'mdi:weather-night'" size="22" />
|
|
</button>
|
|
<NotificationBell />
|
|
<div class="group relative flex gap-2 sm:gap-4">
|
|
<UserAvatar v-if="user" :user="user" size="md" class="cursor-pointer" />
|
|
<Icon v-else name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
|
|
<p class="hidden self-center cursor-pointer sm:block">{{ user?.username }}</p>
|
|
<div class="invisible absolute right-0 top-full z-50 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
|
|
<button
|
|
type="button"
|
|
class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
|
|
@click="navigateTo('/profile')"
|
|
>
|
|
{{ $t('profile.title') }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
|
|
@click="handleLogout"
|
|
>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { UserData } from '~/services/dto/user-data'
|
|
|
|
defineProps<{
|
|
user?: UserData
|
|
}>()
|
|
|
|
const auth = useAuthStore()
|
|
const ui = useUiStore()
|
|
|
|
const appTitle = ref(localStorage.getItem('appTitle') || 'NeauTime')
|
|
|
|
function toggleTitle() {
|
|
appTitle.value = appTitle.value === 'NeauTime' ? 'Lesstime' : 'NeauTime'
|
|
localStorage.setItem('appTitle', appTitle.value)
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await auth.logout()
|
|
await navigateTo('/login')
|
|
}
|
|
</script>
|