feat(ui): redesign header with a DaisyUI navbar

Use the proper navbar-start/navbar-end structure with a horizontal menu
for the Report / View defects links, a red-dot brand mark echoing the
weak-point map, and a sticky shadowed bar. Rename the brand to the less
terse "Project Board Andon".
This commit is contained in:
Julien Calixte
2026-05-28 00:43:05 +02:00
parent 3e5f7d3643
commit bfb0485598

View File

@@ -5,19 +5,26 @@
<template> <template>
<div class="min-h-screen"> <div class="min-h-screen">
<header class="navbar border-base-300 border-b"> <header
<NuxtLink to="/" class="btn btn-ghost text-xl">Andon</NuxtLink> class="navbar bg-base-100 border-base-300 sticky top-0 z-10 border-b px-4 shadow-sm"
<nav class="ml-auto flex gap-1"> >
<NuxtLink to="/" class="btn btn-ghost btn-sm" exact-active-class="btn-active"> <div class="navbar-start">
Report <NuxtLink to="/" class="btn btn-ghost gap-2 text-xl font-semibold">
</NuxtLink> <span class="size-2.5 rounded-full bg-[#e11d48]" aria-hidden="true" />
<NuxtLink Project Board Andon
to="/defects"
class="btn btn-ghost btn-sm"
exact-active-class="btn-active"
>
View defects
</NuxtLink> </NuxtLink>
</div>
<nav class="navbar-end">
<ul class="menu menu-horizontal gap-1 px-0">
<li>
<NuxtLink to="/" exact-active-class="menu-active">Report</NuxtLink>
</li>
<li>
<NuxtLink to="/defects" exact-active-class="menu-active">
View defects
</NuxtLink>
</li>
</ul>
</nav> </nav>
</header> </header>