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