6234e02fa7
- Création d'une nouvelle page de formation avec des sections pour les plans tarifaires et les FAQ. - Ajout de nouvelles animations CSS pour les entrées de page et les éléments. - Mise à jour des traductions pour inclure la section de formation en anglais et en français. - Intégration de la nouvelle route pour accéder à la page de formation. - Amélioration des styles CSS pour la page de formation.
84 lines
3.1 KiB
Vue
84 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { useAssets } from '@/composables/useAssets'
|
|
import { useI18n } from '@/composables/useI18n'
|
|
import ThemeToggle from '@/components/ThemeToggle.vue'
|
|
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
|
|
|
|
const { getImageUrl } = useAssets()
|
|
const { t } = useI18n()
|
|
const isMenuOpen = ref(false)
|
|
|
|
const navigation = computed(() => [
|
|
{ name: t('nav.home'), path: '/' },
|
|
{ name: t('nav.projects'), path: '/projects' },
|
|
{ name: t('nav.about'), path: '/about' },
|
|
{ name: t('nav.contact'), path: '/contact' },
|
|
{ name: t('nav.formation'), path: '/formation' },
|
|
{ name: t('nav.fiverr'), path: '/fiverr' },
|
|
])
|
|
|
|
const toggleMenu = () => {
|
|
isMenuOpen.value = !isMenuOpen.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header class="header" role="banner">
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<!-- Logo -->
|
|
<RouterLink to="/" class="logo" aria-label="Killian - Full Stack Developer Homepage">
|
|
<img :src="getImageUrl('@/assets/images/logo.webp')" alt="Killian - Full Stack Developer Logo"
|
|
class="logo-image" width="40" height="40" loading="eager">
|
|
<span>Killian</span>
|
|
</RouterLink>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="nav hidden md:flex" role="navigation" aria-label="Main navigation">
|
|
<RouterLink v-for="item in navigation" :key="item.name" :to="item.path" class="nav-link"
|
|
:class="{ 'active': $route.path === item.path }"
|
|
:aria-current="$route.path === item.path ? 'page' : undefined">
|
|
{{ item.name }}
|
|
</RouterLink>
|
|
</nav>
|
|
|
|
<!-- Right side controls -->
|
|
<div class="header-actions">
|
|
<!-- Language switcher -->
|
|
<LanguageSwitcher />
|
|
|
|
<!-- Theme toggle -->
|
|
<ThemeToggle />
|
|
|
|
<!-- Mobile menu button -->
|
|
<button @click="toggleMenu" class="md:hidden btn btn-ghost p-2"
|
|
:aria-label="isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'" :aria-expanded="isMenuOpen"
|
|
aria-controls="mobile-menu">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path v-if="!isMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16" />
|
|
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation -->
|
|
<div id="mobile-menu" class="mobile-menu md:hidden" :class="{ 'open': isMenuOpen }" role="navigation"
|
|
aria-label="Mobile navigation">
|
|
<nav class="mobile-menu-nav">
|
|
<RouterLink v-for="item in navigation" :key="item.name" :to="item.path" class="nav-link"
|
|
@click="isMenuOpen = false" :aria-current="$route.path === item.path ? 'page' : undefined">
|
|
{{ item.name }}
|
|
</RouterLink>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@import '../styles/AppHeader.css';
|
|
</style>
|