Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat(ui): group sidebar footer menus into distinct panels

Browse Source 
The account and appearance menus sat in one container with no separation,
so expanding one made the other hard to find. Each collapsible menu now
lives in its own subtly lifted, bordered panel (.sidebar-panel) so the
expanded items stay visually contained and the menus never blend together.
Applied to the account, appearance, and sign-in menus.
This commit is contained in:
john-okeefe
2026-08-06 08:14:10 -04:00
parent 9165c4eb3f
commit 033a012069
4 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/header.templ
+3 -3
View File
@@ -81,7 +81,7 @@ templ Header(user User, currentPath string) {
@SidebarSignIn(currentPath)
}
<!-- Theme picker -->
<div x-data="{ themeOpen: false }">
<div x-data="{ themeOpen: false }" class="sidebar-panel">
<button
type="button"
@click="themeOpen = !themeOpen"
@@ -155,7 +155,7 @@ templ Header(user User, currentPath string) {
// SidebarUserMenu is the bottom-of-sidebar account control for signed-in users.
templ SidebarUserMenu(user User) {
<div x-data="{ userOpen: false }">
<div x-data="{ userOpen: false }" class="sidebar-panel">
<button
type="button"
@click="userOpen = !userOpen"
@@ -195,7 +195,7 @@ templ SidebarUserMenu(user User) {
// SidebarSignIn is an inline sign-in for signed-out visitors, preserving the
// original header's inline login (htmx POST) so users can auth from any page.
templ SidebarSignIn(currentPath string) {
<div x-data="{ signInOpen: false }">
<div x-data="{ signInOpen: false }" class="sidebar-panel">
<button
type="button"
@click="signInOpen = !signInOpen"
templates/header_templ.go
+3 -3
View File
@@ -224,7 +224,7 @@ func Header(user User, currentPath string) templ.Component {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<!-- Theme picker --><div x-data=\"{ themeOpen: false }\"><button type=\"button\" @click=\"themeOpen = !themeOpen\" class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-content-muted hover:text-content hover:bg-surface-hover\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<!-- Theme picker --><div x-data=\"{ themeOpen: false }\" class=\"sidebar-panel\"><button type=\"button\" @click=\"themeOpen = !themeOpen\" class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-content-muted hover:text-content hover:bg-surface-hover\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -394,7 +394,7 @@ func SidebarUserMenu(user User) templ.Component {
templ_7745c5c3_Var20 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<div x-data=\"{ userOpen: false }\"><button type=\"button\" @click=\"userOpen = !userOpen\" class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-surface-hover\" style=\"color: var(--text-primary);\"><span class=\"grid place-items-center h-7 w-7 rounded-full shrink-0\" style=\"background-color: var(--accent-muted); color: var(--accent);\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<div x-data=\"{ userOpen: false }\" class=\"sidebar-panel\"><button type=\"button\" @click=\"userOpen = !userOpen\" class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-surface-hover\" style=\"color: var(--text-primary);\"><span class=\"grid place-items-center h-7 w-7 rounded-full shrink-0\" style=\"background-color: var(--accent-muted); color: var(--accent);\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -488,7 +488,7 @@ func SidebarSignIn(currentPath string) templ.Component {
templ_7745c5c3_Var22 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<div x-data=\"{ signInOpen: false }\"><button type=\"button\" @click=\"signInOpen = !signInOpen\" class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-surface-hover\" style=\"color: var(--text-primary);\"><span class=\"grid place-items-center h-7 w-7 rounded-full shrink-0\" style=\"background-color: var(--accent-muted); color: var(--accent);\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<div x-data=\"{ signInOpen: false }\" class=\"sidebar-panel\"><button type=\"button\" @click=\"signInOpen = !signInOpen\" class=\"w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-surface-hover\" style=\"color: var(--text-primary);\"><span class=\"grid place-items-center h-7 w-7 rounded-full shrink-0\" style=\"background-color: var(--accent-muted); color: var(--accent);\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
web/static/input.css
+10
View File
@@ -212,6 +212,16 @@
pointer-events: auto;
}
/* Grouped panels for the collapsible footer menus (account, appearance).
Each menu lives in its own subtly lifted, bordered box so that expanded
submenus stay visually contained and one menu never blends into another. */
.sidebar-panel {
background-color: color-mix(in srgb, var(--text-primary) 4%, var(--bg-secondary));
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 0.375rem;
}
/* Desktop: pin the sidebar, offset body content, drop the backdrop. */
@media (min-width: 1024px) {
body {
web/static/style.css
+1 -1
View File
File diff suppressed because one or more lines are too long