docs: add theme fix and admin sidebar implementation plans
- Add THEME_FIX_PLAN.md: comprehensive plan for theme system consistency - Add ADMIN_SIDEBAR_PLAN.md: reusable admin sidebar component plan - Add WOOD_PANELING_PLAN.md: wood paneling and full-width layout plan
This commit is contained in:
@@ -0,0 +1,318 @@
|
||||
# Admin Panel Sidebar Reusable Component Plan
|
||||
|
||||
## Problem Statement
|
||||
|
||||
The admin panel sidebar is currently implemented with code duplication and inconsistencies:
|
||||
|
||||
### Current Issues
|
||||
|
||||
1. **Code Duplication**: Sidebar markup is duplicated across templates:
|
||||
- `admin.templ` (lines 17-32)
|
||||
- `admin_library.templ` (lines 14-29)
|
||||
|
||||
2. **Inconsistent Navigation Links**:
|
||||
- `admin.templ`: Dashboard → **"User Administration"** → Library Management
|
||||
- `admin_library.templ`: Dashboard → **"Profile Settings"** → Library Management
|
||||
- "Profile Settings" link points to `/admin/profile` (doesn't exist)
|
||||
- "User Administration" link points to `/admin/users` (correct)
|
||||
|
||||
3. **Missing Sidebar**: `admin_users.templ` has **no sidebar at all** - only uses main `@Header` component
|
||||
|
||||
4. **Inconsistent Layouts**:
|
||||
- `admin.templ` & `admin_library.templ`: Full sidebar layout with `<aside>` + `<main>` in flex container
|
||||
- `admin_users.templ`: Regular layout without sidebar, just `@Header` + `<main>`
|
||||
|
||||
### Root Cause
|
||||
|
||||
Each admin template implements its own sidebar inline instead of using a shared component, leading to:
|
||||
- Maintenance burden (changes require updating multiple files)
|
||||
- Inconsistency (different links, different styling)
|
||||
- Missing features (admin_users has no sidebar)
|
||||
|
||||
---
|
||||
|
||||
## Solution Strategy
|
||||
|
||||
Create a reusable `AdminSidebar` component that:
|
||||
- Can be included in all admin pages with a single line
|
||||
- Accepts `user` and `currentPath` parameters
|
||||
- Automatically highlights the active page
|
||||
- Provides consistent, maintainable navigation
|
||||
|
||||
---
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### Phase 1: Create AdminSidebar Component
|
||||
|
||||
**New file**: `templates/admin_sidebar.templ`
|
||||
|
||||
```templ
|
||||
package templates
|
||||
|
||||
templ AdminSidebar(user User, currentPath string) {
|
||||
<aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
|
||||
<nav class="space-y-2">
|
||||
<a href="/admin"
|
||||
class={"block px-4 py-2 rounded-lg " +
|
||||
("bg-accent text-bg-primary" if currentPath == "/admin" else "hover:opacity-80")}
|
||||
style="color: var(--text-primary)">
|
||||
🏠 Dashboard
|
||||
</a>
|
||||
<a href="/admin/users"
|
||||
class={"block px-4 py-2 rounded-lg " +
|
||||
("bg-accent text-bg-primary" if currentPath == "/admin/users" else "hover:opacity-80")}
|
||||
style="color: var(--text-primary)">
|
||||
👤 User Administration
|
||||
</a>
|
||||
<a href="/admin/library"
|
||||
class={"block px-4 py-2 rounded-lg " +
|
||||
("bg-accent text-bg-primary" if currentPath == "/admin/library" else "hover:opacity-80")}
|
||||
style="color: var(--text-primary)">
|
||||
📚 Library Management
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
}
|
||||
```
|
||||
|
||||
**Key Features:**
|
||||
- Single source of truth for admin navigation
|
||||
- Dynamic active state highlighting based on `currentPath`
|
||||
- Consistent link labels and destinations
|
||||
- Icon + text format for clarity
|
||||
- No code duplication
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: Update admin.templ
|
||||
|
||||
**File**: `templates/admin.templ`
|
||||
|
||||
**Replace sidebar section (lines 17-32) with component call:**
|
||||
|
||||
**Before:**
|
||||
```templ
|
||||
<aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
|
||||
<nav class="space-y-2">
|
||||
<a href="/admin" class="block px-4 py-2 rounded-lg bg-accent text-bg-primary" style="color: var(--text-primary)">
|
||||
🏠 Dashboard
|
||||
</a>
|
||||
<a href="/admin/users" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
|
||||
👤 User Administration
|
||||
</a>
|
||||
<a href="/admin/library" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
|
||||
📚 Library Management
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
```
|
||||
|
||||
**After:**
|
||||
```templ
|
||||
@AdminSidebar(user, "/admin")
|
||||
```
|
||||
|
||||
**Also update theme on line 13:**
|
||||
```templ
|
||||
<body class="theme-{ user.Theme }">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: Update admin_library.templ
|
||||
|
||||
**File**: `templates/admin_library.templ`
|
||||
|
||||
**Replace sidebar section (lines 14-29) with component call:**
|
||||
|
||||
**Before:**
|
||||
```templ
|
||||
<aside class="w-64 border-r" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg font-semibold mb-6" style="color: var(--text-primary)">Admin Panel</h2>
|
||||
<nav class="space-y-2">
|
||||
<a href="/admin" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
|
||||
🏠 Dashboard
|
||||
</a>
|
||||
<a href="/admin/profile" class="block px-4 py-2 rounded-lg hover:opacity-80" style="color: var(--text-primary)">
|
||||
👤 Profile Settings
|
||||
</a>
|
||||
<a href="/admin/library" class="block px-4 py-2 rounded-lg bg-accent text-bg-primary" style="color: var(--text-primary)">
|
||||
📚 Library Management
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
```
|
||||
|
||||
**After:**
|
||||
```templ
|
||||
@AdminSidebar(user, "/admin/library")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: Add Sidebar to admin_users.templ
|
||||
|
||||
**File**: `templates/admin_users.templ`
|
||||
|
||||
**Current state**: Page has no sidebar, just `@Header` and `<main>`
|
||||
|
||||
**Add sidebar layout wrapper:**
|
||||
|
||||
**Before:**
|
||||
```templ
|
||||
<body class="theme-{ currentUser.Theme }">
|
||||
@Header(currentUser, "/admin/users")
|
||||
|
||||
<!-- Modal Container -->
|
||||
<div id="modal-container"></div>
|
||||
|
||||
<main class="max-w-7xl mx-auto px-4 py-8">
|
||||
```
|
||||
|
||||
**After:**
|
||||
```templ
|
||||
<body class="theme-{ currentUser.Theme }">
|
||||
@Header(currentUser, "/admin/users")
|
||||
|
||||
<!-- Modal Container -->
|
||||
<div id="modal-container"></div>
|
||||
|
||||
<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
|
||||
@AdminSidebar(currentUser, "/admin/users")
|
||||
|
||||
<main class="flex-1 p-8">
|
||||
<div class="max-w-7xl">
|
||||
```
|
||||
|
||||
**Also need to close the new div wrapper at the end of the file (before closing `</body>`):**
|
||||
```templ
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Phase 5: Fix Layout Inconsistency in admin_users.templ
|
||||
|
||||
**File**: `templates/admin_users.templ`
|
||||
|
||||
**Remove max-width and padding from main element (now handled by sidebar layout):**
|
||||
|
||||
Current line 21:
|
||||
```templ
|
||||
<main class="max-w-7xl mx-auto px-4 py-8">
|
||||
```
|
||||
|
||||
Change to:
|
||||
```templ
|
||||
<main class="flex-1 p-8">
|
||||
<div class="max-w-7xl">
|
||||
```
|
||||
|
||||
**This wraps the content in a max-width container to match other admin pages.**
|
||||
|
||||
---
|
||||
|
||||
## Navigation Links Decision
|
||||
|
||||
**DECISION: Use exact links from `admin.templ`**
|
||||
|
||||
The AdminSidebar component will use the same 3 navigation links as `admin.templ`:
|
||||
|
||||
1. 🏠 **Dashboard** → `/admin`
|
||||
2. 👤 **User Administration** → `/admin/users`
|
||||
3. 📚 **Library Management** → `/admin/library`
|
||||
|
||||
**Rationale:**
|
||||
- These links already exist and work correctly
|
||||
- Consistent with current admin.templ implementation
|
||||
- "Profile Settings" link in admin_library.templ pointed to non-existent `/admin/profile`
|
||||
- Clean, functional navigation without broken links
|
||||
|
||||
---
|
||||
|
||||
## Benefits of This Approach
|
||||
|
||||
1. **Maintainability**: Update sidebar in one place, all pages benefit
|
||||
2. **Consistency**: All admin pages have identical navigation
|
||||
3. **Active States**: Automatic highlighting of current page
|
||||
4. **DRY Principle**: No code duplication
|
||||
5. **Scalability**: Easy to add new admin pages - just include component
|
||||
6. **User Experience**: Clear visual indication of current location
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
After implementation:
|
||||
|
||||
- [ ] Visit `/admin` → Dashboard link highlighted
|
||||
- [ ] Visit `/admin/users` → User Administration link highlighted
|
||||
- [ ] Visit `/admin/library` → Library Management link highlighted
|
||||
- [ ] Click each link → navigates to correct page
|
||||
- [ ] All three pages have consistent sidebar appearance
|
||||
- [ ] admin_users page now has sidebar (previously missing)
|
||||
- [ ] No broken links (removed /admin/profile)
|
||||
- [ ] Hover states work on all links
|
||||
- [ ] Active state has different styling (bg-accent)
|
||||
- [ ] Layout consistent across all admin pages
|
||||
- [ ] Templates compile successfully
|
||||
|
||||
---
|
||||
|
||||
## Files Summary
|
||||
|
||||
### New Files Created
|
||||
- `templates/admin_sidebar.templ` - Reusable admin sidebar component
|
||||
|
||||
### Files Modified
|
||||
- `templates/admin.templ` - Replace inline sidebar with component, fix theme
|
||||
- `templates/admin_library.templ` - Replace inline sidebar with component
|
||||
- `templates/admin_users.templ` - Add sidebar (previously missing), fix layout wrapper
|
||||
|
||||
---
|
||||
|
||||
## Migration Notes
|
||||
|
||||
### Breaking Changes
|
||||
- None - purely refactoring, same functionality
|
||||
|
||||
### Backward Compatibility
|
||||
- Full - all URLs and functionality remain the same
|
||||
|
||||
### Database Dependencies
|
||||
- None
|
||||
|
||||
### Performance
|
||||
- No impact - same HTML rendered, just defined once instead of duplicated
|
||||
|
||||
---
|
||||
|
||||
## Rollback Plan
|
||||
|
||||
If issues arise:
|
||||
1. Revert individual template changes
|
||||
2. Delete `admin_sidebar.templ`
|
||||
3. Each admin page returns to its previous standalone state
|
||||
4. No data loss (purely visual component refactoring)
|
||||
|
||||
---
|
||||
|
||||
## Future Improvements
|
||||
|
||||
1. **Collapsible sidebar**: Add toggle to hide/show sidebar
|
||||
2. **Badge notifications**: Show counts (e.g., "3 pending users")
|
||||
3. **Dropdown menus**: Group related admin functions
|
||||
4. **Permission-based links**: Hide/show links based on user role
|
||||
5. **Breadcrumbs**: Add breadcrumb navigation for admin section
|
||||
6. **Additional admin pages**: Easy to extend - just include `@AdminSidebar` with new path
|
||||
Reference in New Issue
Block a user