john-okeefe
79d10b5b37
- 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
319 lines
9.3 KiB
Markdown
319 lines
9.3 KiB
Markdown
# 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
|