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:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user