Redesign backend layout: dark sidebar + slim topbar

Moves from a floating-card sidebar to a full-height dark sidebar
(bg-neutral) with the club logo at the top and logged-in user pinned
to the bottom. The topbar becomes a slim bar containing only the
mobile hamburger, notifications, and logout — no duplicate logo.

- base.html: DaisyUI drawer with h-screen/overflow-hidden so the
  sidebar is sticky and the content column scrolls independently.
  The #content div is now the white card (bg-base-100 rounded-xl)
  so HTMX innerHTML swaps stay inside it.
- member_filter.html: replaces the .action_bar component with a
  clean flex row (title + Add button) above a plain filter form.
  Table and mobile card list are unchanged.
- styles.css: adds .sidebar-nav scoped overrides for menu link
  hover/active colours on the dark sidebar; reduces h1.page-title
  bottom margin from mb-12 to mb-4.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-07 17:13:33 +02:00
parent e169d83311
commit fd1d3fcc95
3 changed files with 213 additions and 177 deletions

View File

@@ -62,7 +62,7 @@
@layer components {
h1.page-title {
@apply text-3xl font-bold;
@apply mb-12;
@apply mb-4;
& > svg {
@apply mr-2;
@@ -104,6 +104,39 @@
@apply min-w-fit lg:w-fit;
}
}
/*
* Sidebar navigation — dark background overrides.
* .sidebar-nav wraps the <ul class="menu"> inside the dark aside, so these
* rules only apply there and leave DaisyUI's default menu colours intact
* everywhere else (e.g. inside modals or dropdowns).
*/
.sidebar-nav .menu .menu-title {
color: color-mix(in oklab, var(--color-neutral-content) 40%, transparent);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
padding-inline: 0.75rem;
}
/* Default nav link on dark sidebar */
.sidebar-nav .menu li > a {
color: color-mix(in oklab, var(--color-neutral-content) 70%, transparent);
border-radius: var(--radius-box);
transition: background-color 0.15s, color 0.15s;
}
/* Hover state */
.sidebar-nav .menu li > a:hover {
background-color: color-mix(in oklab, white 10%, transparent);
color: var(--color-neutral-content);
}
/* Active state (set by template class or JS menuHighlight event) */
.sidebar-nav .menu li > a.menu-active {
background-color: color-mix(in oklab, var(--color-primary) 85%, transparent);
color: var(--color-primary-content);
}
}
.choices {