Extend sidebar navigation with new pages #41

New Issue

lmiranda · 2026-01-15T19:38:26Z

lmiranda commented

2026-01-15 19:38:26 +00:00

Description

Update the floating sidebar navigation (portfolio_app/components/sidebar.py) to include links to all new pages. This is the foundational change that other page issues depend on.

Current State

NAV_ITEMS in sidebar.py currently has:

NAV_ITEMS = [
    {"path": "/", "icon": "tabler:home", "label": "Home"},
    {"path": "/toronto", "icon": "tabler:map-2", "label": "Toronto Housing"},
]

Target State

Extend to include all portfolio pages:

NAV_ITEMS = [
    {"path": "/", "icon": "tabler:home", "label": "Home"},
    {"path": "/about", "icon": "tabler:user", "label": "About"},
    {"path": "/projects", "icon": "tabler:folder", "label": "Projects"},
    {"path": "/toronto", "icon": "tabler:map-2", "label": "Toronto Housing"},
    {"path": "/blog", "icon": "tabler:article", "label": "Blog"},
    {"path": "/resume", "icon": "tabler:file-text", "label": "Resume"},
    {"path": "/contact", "icon": "tabler:mail", "label": "Contact"},
]

Acceptance Criteria

All 7 navigation items configured in NAV_ITEMS
Appropriate Tabler icons selected for each page
Active state highlighting works for all pages
Nested page detection works (e.g., /toronto active when on /toronto/methodology)
Tooltips display correct labels
Navigation order is logical (Home -> About -> Projects -> [dashboards] -> Blog -> Resume -> Contact)
No visual overflow with additional icons
Mobile sidebar remains functional

Technical Notes

Icons available at: https://tabler-icons.io/
Consider grouping: Core pages vs Dashboard pages vs Utility pages
May need to add visual separator between groups using create_sidebar_divider()
Test active state logic in create_nav_icon() for new paths

Icon Suggestions

Page	Icon	Rationale
Home	`tabler:home`	Standard home icon
About	`tabler:user`	Personal info
Projects	`tabler:folder`	Project collection
Toronto	`tabler:map-2`	Geographic data
Blog	`tabler:article`	Written content
Resume	`tabler:file-text`	Document
Contact	`tabler:mail`	Communication

Dependencies

None (this is a foundational issue)
Blocks: #36, #37, #38, #39, #41, Implement blog system with markdown loader (#42)

Labels: Type/Feature, Priority/Critical, Complexity/Low, Efforts/S, Component/Frontend, Sprint/8

## Description Update the floating sidebar navigation (`portfolio_app/components/sidebar.py`) to include links to all new pages. This is the foundational change that other page issues depend on. ## Current State `NAV_ITEMS` in `sidebar.py` currently has: ```python NAV_ITEMS = [ {"path": "/", "icon": "tabler:home", "label": "Home"}, {"path": "/toronto", "icon": "tabler:map-2", "label": "Toronto Housing"}, ] ``` ## Target State Extend to include all portfolio pages: ```python NAV_ITEMS = [ {"path": "/", "icon": "tabler:home", "label": "Home"}, {"path": "/about", "icon": "tabler:user", "label": "About"}, {"path": "/projects", "icon": "tabler:folder", "label": "Projects"}, {"path": "/toronto", "icon": "tabler:map-2", "label": "Toronto Housing"}, {"path": "/blog", "icon": "tabler:article", "label": "Blog"}, {"path": "/resume", "icon": "tabler:file-text", "label": "Resume"}, {"path": "/contact", "icon": "tabler:mail", "label": "Contact"}, ] ``` ## Acceptance Criteria - [ ] All 7 navigation items configured in `NAV_ITEMS` - [ ] Appropriate Tabler icons selected for each page - [ ] Active state highlighting works for all pages - [ ] Nested page detection works (e.g., `/toronto` active when on `/toronto/methodology`) - [ ] Tooltips display correct labels - [ ] Navigation order is logical (Home -> About -> Projects -> [dashboards] -> Blog -> Resume -> Contact) - [ ] No visual overflow with additional icons - [ ] Mobile sidebar remains functional ## Technical Notes - Icons available at: https://tabler-icons.io/ - Consider grouping: Core pages vs Dashboard pages vs Utility pages - May need to add visual separator between groups using `create_sidebar_divider()` - Test active state logic in `create_nav_icon()` for new paths ## Icon Suggestions | Page | Icon | Rationale | |------|------|-----------| | Home | `tabler:home` | Standard home icon | | About | `tabler:user` | Personal info | | Projects | `tabler:folder` | Project collection | | Toronto | `tabler:map-2` | Geographic data | | Blog | `tabler:article` | Written content | | Resume | `tabler:file-text` | Document | | Contact | `tabler:mail` | Communication | ## Dependencies - None (this is a foundational issue) - Blocks: #36, #37, #38, #39, #41, #42 --- **Labels:** Type/Feature, Priority/Critical, Complexity/Low, Efforts/S, Component/Frontend, Sprint/8

lmiranda commented

2026-01-15 19:59:36 +00:00

✅ Completed

Extended NAV_ITEMS in portfolio_app/components/sidebar.py from 2 to 7 items:

Home (/)
About (/about)
Projects (/projects)
Toronto Housing (/toronto)
Blog (/blog)
Resume (/resume)
Contact (/contact)

Verified: All 7 items load correctly with proper Tabler icons.

✅ **Completed** Extended `NAV_ITEMS` in `portfolio_app/components/sidebar.py` from 2 to 7 items: - Home (/) - About (/about) - Projects (/projects) - Toronto Housing (/toronto) - Blog (/blog) - Resume (/resume) - Contact (/contact) Verified: All 7 items load correctly with proper Tabler icons.

lmiranda closed this issue

2026-01-15 19:59:41 +00:00

lmiranda referenced this issue from a commit

2026-01-15 20:40:22 +00:00

feat: Implement Sprint 8 - Portfolio website expansion (MVP)

lmiranda referenced this issue

2026-01-15 20:46:49 +00:00

feat: Implement Sprint 8 - Portfolio website expansion (MVP) #45

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:30 +00:00

Sign in to join this conversation.