refactor(frontend) : make page headers and filters sticky across all pages

Wrap title + filters in a sticky container (top-8 sm:top-12, z-20, bg-white)
on all pages for consistent scroll behavior. Also fix SidebarTimer icon
visibility when sidebar is collapsed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-14 09:21:45 +01:00
parent b48ca10304
commit f888a29e0a
17 changed files with 429 additions and 358 deletions

View File

@@ -1,17 +1,18 @@
<template>
<div class="flex min-h-0 flex-1 flex-col">
<div ref="pageHeaderEl" class="flex-shrink-0 pb-4">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-primary-500">Suivi des temps</h1>
<div ref="pageHeaderEl" class="sticky top-8 z-20 flex-shrink-0 bg-white pb-4 sm:top-12">
<div class="flex items-center justify-between gap-3">
<h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Suivi des temps</h1>
<button
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-primary-600 transition sm:px-4 sm:text-sm"
@click="openCreateDrawer()"
>
+ Ajouter une Activité
<span class="hidden sm:inline">+ Ajouter une Activité</span>
<span class="sm:hidden">+ Activité</span>
</button>
</div>
<div class="relative z-30 mt-4 flex items-center gap-4">
<div class="relative z-30 mt-4 flex flex-wrap items-center gap-3 sm:gap-4">
<h2 class="text-lg font-bold text-orange-500">
{{ currentMonthLabel }}
</h2>
@@ -37,7 +38,7 @@
<MalioSelect
v-model="selectedUserId"
:options="userOptions"
min-width="!w-44"
min-width="!w-36 sm:!w-44"
text-field="text-sm"
text-value="text-sm"
label="User"
@@ -49,7 +50,7 @@
:options="projectOptions"
empty-option-label="Tous"
label="Projet"
min-width="!w-44"
min-width="!w-36 sm:!w-44"
text-field="text-sm"
text-value="text-sm"
/>
@@ -59,7 +60,7 @@
:options="tagOptions"
empty-option-label="Tous"
label="Tag"
min-width="!w-44"
min-width="!w-36 sm:!w-44"
text-field="text-sm"
text-value="text-sm"
/>