Bertrand Benjamin
6cca179346
Extract shared utilities (color functions, icon registry), replace hero banners with compact PageHeader, add TrimesterSelector/ConfirmDialog/ Breadcrumb components, consolidate off-palette colors to design tokens, convert AssessmentListView to table layout, compress ResultsView stats into horizontal bar, and inline ClassFormView as a modal in ClassListView. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
88 lines
2.9 KiB
Vue
88 lines
2.9 KiB
Vue
<template>
|
|
<header class="bg-white border-b border-gray-200 sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<!-- Logo and main nav -->
|
|
<div class="flex">
|
|
<router-link to="/" class="flex items-center">
|
|
<span class="text-xl font-bold text-primary-600">Notytex</span>
|
|
</router-link>
|
|
|
|
<nav class="hidden md:ml-8 md:flex md:space-x-4">
|
|
<router-link
|
|
v-for="item in navigation"
|
|
:key="item.name"
|
|
:to="item.to"
|
|
class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors"
|
|
:class="isActive(item.to)
|
|
? 'text-primary-600 bg-primary-50'
|
|
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'"
|
|
>
|
|
<component :is="item.icon" class="w-4 h-4 mr-2" />
|
|
{{ item.name }}
|
|
</router-link>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Right side -->
|
|
<div class="flex items-center space-x-4">
|
|
<router-link to="/config" class="text-gray-500 hover:text-gray-700">
|
|
<CogIcon class="w-5 h-5" />
|
|
</router-link>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button
|
|
@click="mobileMenuOpen = !mobileMenuOpen"
|
|
class="md:hidden p-2 rounded-md text-gray-500 hover:text-gray-700"
|
|
>
|
|
<MenuIcon v-if="!mobileMenuOpen" class="w-6 h-6" />
|
|
<XIcon v-else class="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<div v-if="mobileMenuOpen" class="md:hidden border-t border-gray-200">
|
|
<nav class="px-4 py-3 space-y-1">
|
|
<router-link
|
|
v-for="item in navigation"
|
|
:key="item.name"
|
|
:to="item.to"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md"
|
|
:class="isActive(item.to)
|
|
? 'text-primary-600 bg-primary-50'
|
|
: 'text-gray-600 hover:bg-gray-50'"
|
|
@click="mobileMenuOpen = false"
|
|
>
|
|
<component :is="item.icon" class="w-4 h-4 mr-2" />
|
|
{{ item.name }}
|
|
</router-link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { HomeIcon, UsersIcon, ClipboardIcon, AcademicCapIcon, CogIcon, MenuIcon, XIcon } from '@/components/icons'
|
|
|
|
const route = useRoute()
|
|
const mobileMenuOpen = ref(false)
|
|
|
|
const navigation = [
|
|
{ name: 'Accueil', to: '/', icon: HomeIcon },
|
|
{ name: 'Classes', to: '/classes', icon: UsersIcon },
|
|
{ name: 'Évaluations', to: '/assessments', icon: ClipboardIcon },
|
|
{ name: 'Élèves', to: '/students', icon: AcademicCapIcon }
|
|
]
|
|
|
|
function isActive(path) {
|
|
if (path === '/') {
|
|
return route.path === '/'
|
|
}
|
|
return route.path.startsWith(path)
|
|
}
|
|
</script>
|