feat: Add floating sidebar navigation and dark theme support
- Add floating pill-shaped sidebar with navigation icons - Implement dark/light theme toggle with localStorage persistence - Update all figure factories for transparent backgrounds - Use carto-darkmatter map style for choropleths - Add methodology link button to Toronto dashboard header - Add back to dashboard button on methodology page - Remove social links from home page (now in sidebar) - Update CLAUDE.md to Sprint 7 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
5
portfolio_app/callbacks/__init__.py
Normal file
5
portfolio_app/callbacks/__init__.py
Normal file
@@ -0,0 +1,5 @@
|
||||
"""Application-level callbacks for the portfolio app."""
|
||||
|
||||
from . import theme
|
||||
|
||||
__all__ = ["theme"]
|
||||
38
portfolio_app/callbacks/theme.py
Normal file
38
portfolio_app/callbacks/theme.py
Normal file
@@ -0,0 +1,38 @@
|
||||
"""Theme toggle callbacks using clientside JavaScript."""
|
||||
|
||||
from dash import Input, Output, State, clientside_callback
|
||||
|
||||
# Toggle theme on button click
|
||||
# Stores new theme value and updates the DOM attribute
|
||||
clientside_callback(
|
||||
"""
|
||||
function(n_clicks, currentTheme) {
|
||||
if (n_clicks === undefined || n_clicks === null) {
|
||||
return window.dash_clientside.no_update;
|
||||
}
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-mantine-color-scheme', newTheme);
|
||||
return newTheme;
|
||||
}
|
||||
""",
|
||||
Output("theme-store", "data"),
|
||||
Input("theme-toggle", "n_clicks"),
|
||||
State("theme-store", "data"),
|
||||
prevent_initial_call=True,
|
||||
)
|
||||
|
||||
# Initialize theme from localStorage on page load
|
||||
# Uses a dummy output since we only need the side effect of setting the DOM attribute
|
||||
clientside_callback(
|
||||
"""
|
||||
function(theme) {
|
||||
if (theme) {
|
||||
document.documentElement.setAttribute('data-mantine-color-scheme', theme);
|
||||
}
|
||||
return theme;
|
||||
}
|
||||
""",
|
||||
Output("theme-init-dummy", "data"),
|
||||
Input("theme-store", "data"),
|
||||
prevent_initial_call=False,
|
||||
)
|
||||
Reference in New Issue
Block a user