personal-projects/personal-portfolio
Template
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Sprint 7: Navigation & Theme Modernization #27

New Issue
Closed
opened 2026-01-15 06:50:23 +00:00 by lmiranda · 0 comments
lmiranda commented 2026-01-15 06:50:23 +00:00
Owner
Copy Link

Sprint 7 Overview

This sprint adds a floating icon sidebar for navigation and implements a dark/light theme system with dark as default.

Goals

  • Replace page-specific social links with global sidebar navigation
  • Implement dark theme as default with light theme toggle
  • Modernize UI with floating pill-shaped sidebar
  • Ensure all Plotly figures work well with dark backgrounds

Key Components

  1. Floating Sidebar - Fixed position, vertically centered, pill-shaped
  2. Theme System - Dark default with localStorage persistence
  3. Figure Updates - Transparent backgrounds, dark-compatible maps

Sprint Issues

  • #28 - Create floating sidebar navigation component
  • #29 - Add sidebar CSS styles
  • #30 - Implement theme toggle system with localStorage persistence
  • #31 - Restructure app layout for sidebar and theme integration
  • #32 - Update figure factories for dark theme support
  • #33 - Refactor home page to remove social links section

Architecture Decisions

  1. Clientside callbacks for instant theme switching (no server round-trip)
  2. localStorage persistence via dcc.Store for theme state
  3. Transparent figure backgrounds to let Mantine theme show through
  4. CSS custom properties for theme-aware styling

Dependencies

#28 (sidebar component) ──┐
#29 (sidebar CSS) ────────┼──> #31 (app layout integration)
#30 (theme callbacks) ────┘           │
                                      v
                              #33 (home page refactor)

#32 (figure factories) - independent, can be done in parallel

Implementation Order

  1. #28 - Create sidebar component (static, no theme toggle)
  2. #29 - Create sidebar CSS
  3. #30 - Create theme callbacks module
  4. #31 - Restructure app layout (integration point)
  5. #32 - Update figure factories (can parallelize with #28-#31)
  6. #33 - Refactor home page (after #31 verified working)

Success Criteria

  • Dark theme is default on first visit
  • Theme persists across page refreshes
  • Sidebar visible on all pages
  • Active page indicator works correctly
  • All Plotly charts readable on dark background
  • Maps use carto-darkmatter in dark mode
  • Social links accessible from sidebar on all pages

Estimated Effort

Issue Effort Complexity
#28 Medium Medium
#29 Small Low
#30 Small Medium
#31 Medium Medium
#32 Small Low
#33 Small Low

Total: ~1-2 days of focused work

## Sprint 7 Overview This sprint adds a floating icon sidebar for navigation and implements a dark/light theme system with dark as default. ### Goals - Replace page-specific social links with global sidebar navigation - Implement dark theme as default with light theme toggle - Modernize UI with floating pill-shaped sidebar - Ensure all Plotly figures work well with dark backgrounds ### Key Components 1. **Floating Sidebar** - Fixed position, vertically centered, pill-shaped 2. **Theme System** - Dark default with localStorage persistence 3. **Figure Updates** - Transparent backgrounds, dark-compatible maps ### Sprint Issues - [ ] #28 - Create floating sidebar navigation component - [ ] #29 - Add sidebar CSS styles - [ ] #30 - Implement theme toggle system with localStorage persistence - [ ] #31 - Restructure app layout for sidebar and theme integration - [ ] #32 - Update figure factories for dark theme support - [ ] #33 - Refactor home page to remove social links section ### Architecture Decisions 1. **Clientside callbacks** for instant theme switching (no server round-trip) 2. **localStorage persistence** via dcc.Store for theme state 3. **Transparent figure backgrounds** to let Mantine theme show through 4. **CSS custom properties** for theme-aware styling ### Dependencies ``` #28 (sidebar component) ──┐ #29 (sidebar CSS) ────────┼──> #31 (app layout integration) #30 (theme callbacks) ────┘ │ v #33 (home page refactor) #32 (figure factories) - independent, can be done in parallel ``` ### Implementation Order 1. #28 - Create sidebar component (static, no theme toggle) 2. #29 - Create sidebar CSS 3. #30 - Create theme callbacks module 4. #31 - Restructure app layout (integration point) 5. #32 - Update figure factories (can parallelize with #28-#31) 6. #33 - Refactor home page (after #31 verified working) ### Success Criteria - [ ] Dark theme is default on first visit - [ ] Theme persists across page refreshes - [ ] Sidebar visible on all pages - [ ] Active page indicator works correctly - [ ] All Plotly charts readable on dark background - [ ] Maps use carto-darkmatter in dark mode - [ ] Social links accessible from sidebar on all pages ### Estimated Effort | Issue | Effort | Complexity | |-------|--------|------------| | #28 | Medium | Medium | | #29 | Small | Low | | #30 | Small | Medium | | #31 | Medium | Medium | | #32 | Small | Low | | #33 | Small | Low | **Total**: ~1-2 days of focused work
lmiranda added this to the Launch: Host, Bio and Toronto House Market Analysis project 2026-01-16 14:51:54 +00:00
lmiranda self-assigned this 2026-01-16 14:51:59 +00:00
lmiranda moved this to Done in Launch: Host, Bio and Toronto House Market Analysis on 2026-01-16 14:52:09 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Complexity/Complex
High uncertainty or many dependencies
 Complexity/Medium
Some unknowns or dependencies
 Complexity/Simple
Straightforward, well-understood
 Effort/L
3-5 days
 Effort/M
1-2 days
 Effort/S
2-4 hours
 Effort/XL
> 1 week
 Effort/XS
< 2 hours
 Priority/Critical
Immediate attention required
 Priority/High
Important, needs attention soon
 Priority/Low
Nice to have, can wait
 Priority/Medium
Normal priority
 Type/Bug
Something isn't working
 Type/Chore
Maintenance tasks
 Type/Documentation
Documentation improvements
 Type/Feature
New feature or request
 Type/Refactor
Code refactoring without changing behavior
 Type/Test
Testing related
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project Launch: Host, Bio and Toronto House Market Analysis
Assignees
Clear assignees
lmiranda
No Assignees lmiranda
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: personal-projects/personal-portfolio#27
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?