Navigation System
Relevant source files
The following files were used as context for generating this wiki page:
The Navigation System manages site-wide links, menus, and routing behaviors. It provides a unified structure for accessing content across three primary domains: Work, Play, and Live. The system integrates static links with dynamic page content and handles both internal and external link behaviors.
Sources: src/features/navigation/navigation.utils.ts:1-25, src/features/navigation/navigation.utils.test.ts:31-50
Navigation Structure
The system categorizes links into distinct groups. These groups are used consistently across the desktop navigation bar and the mobile menu.
Navigation Groups
The buildNavigationGroups function assembles the primary navigation structure into three specific groups:
- Work: Contains professional content such as the Resume.
- Play: Features personal projects like TREAD Talks.
- Live: Dynamically populates with links to published content pages.
Sources: src/features/navigation/navigation.utils.ts:3-17, src/features/navigation/navigation.utils.test.ts:39-44
Data Logic Flow
This diagram illustrates how content items are transformed into navigation groups.
The system maps published pages to their respective href and name attributes based on page IDs and titles.
Sources: src/features/navigation/navigation.utils.ts:7-17, src/features/navigation/navigation.utils.test.ts:16-30
Link Handling and Attributes
The system differentiates between internal site paths and external URLs to apply appropriate security and behavioral attributes.
External Link Validation
Links starting with http:// or https:// are flagged as external. When a link is external, the system applies rel="noopener noreferrer" and target="_blank" attributes for security and user experience.
Sources: src/features/navigation/navigation.utils.ts:19-31, src/features/navigation/navigation.utils.test.ts:52-69
Technical Attribute Summary
| Attribute Logic | Internal Path (e.g., /resume) | External URL (e.g., https://...) |
|---|---|---|
| Rel | None | noopener noreferrer |
| Target | None | _blank |
| Source Detection | Path starts with / | Starts with http |
Sources: src/features/navigation/navigation.utils.ts:19-31
UI and Animation Behaviors
Navigation menus use modern CSS features for positioning and transitions.
Menu Positioning and Transitions
Menus utilize CSS anchor positioning and discrete display transitions.
- Desktop Panels: Use
[data-nav-menu-panel]and are positioned relative to anchor elements with a scale and opacity transition. - Mobile Sheets: Use
[data-mobile-menu-sheet]and animate fromtranslate: 0 100%to0 0when the dialog opens. - Overflow Control: When a navigation dialog is open, the system applies
overflow-hiddento thehtmlandbodyelements to prevent background scrolling.
Sources: src/assets/styles/global.css:8-51
Testing and Identification
The navigation system uses a deterministic ID generation strategy to ensure stable contracts between the codebase and E2E tests.
Test ID Generation
The system generates data-testid attributes using utility functions that slugify paths and names.
Path Conversion*: Slashes are converted to double hyphens (--).
- Slugification: Values are trimmed, lowercased, and special characters are replaced with single hyphens.
- Home Path: If a path slugs to an empty string (like
/), it defaults tohome.
Sources: src/features/navigation/navigation.utils.ts:33-52, src/features/navigation/navigation.utils.test.ts:71-105
E2E Navigation Verification
End-to-end tests verify that the ClientRouter preserves the document state during navigation, ensuring that the site header and navigation root remain visible without a full page reload.
Sources: e2e/specs/navigation.spec.ts:4-28, e2e/components/site-nav.ts:7-35
Summary
The Navigation System provides a robust, typed infrastructure for site traversal. It combines static definitions for major sections with dynamic loading for content pages, while maintaining strict security protocols for external links and providing stable hooks for automated testing.