Create floating sidebar navigation component #28

New Issue

lmiranda · 2026-01-15T06:51:01Z

lmiranda commented

2026-01-15 06:51:01 +00:00

Description

Create a new sidebar component that provides icon-based navigation for the portfolio app. The sidebar will be a fixed-position, vertically-centered pill-shaped container on the left side of the screen.

Files to Create

portfolio_app/components/sidebar.py

Component Specification

Layout Structure

[LM]           <- Brand initials
---            <- Divider
[Home icon]    <- dcc.Link to /
[Map icon]     <- dcc.Link to /toronto
---            <- Divider
[Theme icon]   <- ActionIcon for theme toggle (moon/sun)
---            <- Divider
[GitHub]       <- External link
[LinkedIn]     <- External link

Technical Requirements

Container: dmc.Paper with:
- Fixed positioning (handled by CSS class)
- 60px width
- Pill shape (border-radius: 32px)
- className="floating-sidebar"
Brand: dmc.Text with "LM" initials
- className="sidebar-brand"
- Bold, centered
Navigation Icons: Use dmc.ActionIcon wrapped in dcc.Link
- Home: tabler:home icon
- Toronto: tabler:map-2 icon
- Each wrapped in dmc.Tooltip with label
Theme Toggle: dmc.ActionIcon with:
- id="theme-toggle-btn"
- Default icon: tabler:moon (for dark mode)
- Tooltip: "Toggle theme"
External Links: dmc.ActionIcon wrapped in dmc.Anchor
- GitHub: tabler:brand-github, href="https://github.com/leomiranda"
- LinkedIn: tabler:brand-linkedin, href="https://linkedin.com/in/leobmiranda"
Dividers: dmc.Divider with my="xs", className="sidebar-divider"
Active Page Indicator: Add className="nav-icon-active" conditionally based on current path

Function Signature

def create_sidebar(current_path: str = "/") -> dmc.Paper:
    """Create the floating sidebar navigation component."""

Dependencies

dash-iconify for icons
dash-mantine-components for UI components
dash.dcc for Link and Store components

Acceptance Criteria

Sidebar renders without errors
All icons display correctly using tabler icon set
Internal links use dcc.Link for client-side navigation
External links open in new tab
Theme toggle button has correct ID for callback wiring
Component exports properly from components/__init__.py

References

Icons: https://tabler.io/icons
DMC ActionIcon: https://www.dash-mantine-components.com/components/actionicon

Part of Sprint 7 (#27)

## Description Create a new sidebar component that provides icon-based navigation for the portfolio app. The sidebar will be a fixed-position, vertically-centered pill-shaped container on the left side of the screen. ## Files to Create - `portfolio_app/components/sidebar.py` ## Component Specification ### Layout Structure ``` [LM] <- Brand initials --- <- Divider [Home icon] <- dcc.Link to / [Map icon] <- dcc.Link to /toronto --- <- Divider [Theme icon] <- ActionIcon for theme toggle (moon/sun) --- <- Divider [GitHub] <- External link [LinkedIn] <- External link ``` ### Technical Requirements 1. **Container**: `dmc.Paper` with: - Fixed positioning (handled by CSS class) - 60px width - Pill shape (border-radius: 32px) - `className="floating-sidebar"` 2. **Brand**: `dmc.Text` with "LM" initials - `className="sidebar-brand"` - Bold, centered 3. **Navigation Icons**: Use `dmc.ActionIcon` wrapped in `dcc.Link` - Home: `tabler:home` icon - Toronto: `tabler:map-2` icon - Each wrapped in `dmc.Tooltip` with label 4. **Theme Toggle**: `dmc.ActionIcon` with: - `id="theme-toggle-btn"` - Default icon: `tabler:moon` (for dark mode) - Tooltip: "Toggle theme" 5. **External Links**: `dmc.ActionIcon` wrapped in `dmc.Anchor` - GitHub: `tabler:brand-github`, href="https://github.com/leomiranda" - LinkedIn: `tabler:brand-linkedin`, href="https://linkedin.com/in/leobmiranda" 6. **Dividers**: `dmc.Divider` with `my="xs"`, `className="sidebar-divider"` 7. **Active Page Indicator**: Add `className="nav-icon-active"` conditionally based on current path ### Function Signature ```python def create_sidebar(current_path: str = "/") -> dmc.Paper: """Create the floating sidebar navigation component.""" ``` ## Dependencies - `dash-iconify` for icons - `dash-mantine-components` for UI components - `dash.dcc` for Link and Store components ## Acceptance Criteria - [ ] Sidebar renders without errors - [ ] All icons display correctly using tabler icon set - [ ] Internal links use dcc.Link for client-side navigation - [ ] External links open in new tab - [ ] Theme toggle button has correct ID for callback wiring - [ ] Component exports properly from `components/__init__.py` ## References - Icons: https://tabler.io/icons - DMC ActionIcon: https://www.dash-mantine-components.com/components/actionicon ## Part of Sprint 7 (#27)

lmiranda referenced this issue

2026-01-15 06:51:02 +00:00

Add sidebar CSS styles #29

lmiranda referenced this issue

2026-01-15 06:51:44 +00:00

Restructure app layout for sidebar and theme integration #31

lmiranda referenced this issue

2026-01-15 06:52:05 +00:00

Sprint 7: Navigation & Theme Modernization #27

lmiranda closed this issue

2026-01-15 19:16:00 +00:00

lmiranda added this to the Launch: Host, Bio and Toronto House Market Analysis project 2026-01-16 14:51:54 +00:00