Navigation Components
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Navigation Components in the Promethean Conduit project facilitate user movement between different consciousness modules, administration panels, and informational pages. These components are built using a combination of custom React logic and low-level primitives from Radix UI, ensuring accessibility and smooth transitions across desktop and mobile viewports.
The system encompasses high-level routing structures, global headers with mobile-optimized hamburger menus, and specialized UI elements like breadcrumbs and pagination for deep-level data exploration.
Sources: frontend/src/App.js:14-142, frontend/src/components/ui/navigation-menu.jsx
Core Header and Global Navigation
The primary entry point for navigation is the Header component, which provides a fixed, backdrop-blurred navigation bar. It utilizes react-router-dom for client-side routing and manages a mobile-specific overlay for smaller screens.
Navigation Architecture
The application uses a BrowserRouter to handle routes such as /chat, /timeline, /library, and /admin. The Header component maps a predefined list of navItems to both desktop and mobile views.
The diagram shows the logic flow for rendering different navigation interfaces based on screen size.
Sources: frontend/src/App.js:18-105, frontend/src/App.js:632-646
Navigation State Management
The Header maintains a mobileMenuOpen state to toggle the visibility of the mobile overlay. It also interacts with useLocation to apply active styling to the current route.
| Component Item | Role | Target Route |
|---|---|---|
| Consciousness | Chat Interface | /chat |
| Timeline | Evolution Track | /timeline |
| Export | Data Download | /export |
| Truth Library | Knowledge Base | /library |
| Community | Social Transmissions | /community |
| Admin | System Config | /admin |
Sources: frontend/src/App.js:23-31, frontend/src/App.js:77-100
UI Primitives for Navigation
The project leverages specialized UI components to handle complex navigation patterns like hierarchical menus and sequential data access.
Navigation Menu and Menubar
These components provide structured list containers for navigation links. The NavigationMenu includes a viewport for animated content transitions, while the Menubar offers a traditional desktop-style application menu.
The diagram illustrates the hierarchical relationship between Radix-based navigation primitives.
Sources: frontend/src/components/ui/navigation-menu.jsx:7-50, frontend/src/components/ui/menubar.jsx:26-94
Breadcrumbs and Pagination
For deep navigation and list management, the project implements:
- Breadcrumbs: Functional for displaying the current location within a hierarchy, utilizing a
navelement witharia-label="breadcrumb". - Pagination: Provides sequential navigation for large datasets (e.g., library entries), including "Previous" and "Next" controls.
Sources: frontend/src/components/ui/breadcrumb.jsx:7-21, frontend/src/components/ui/pagination.jsx:7-20
Mobile Navigation Patterns
Mobile navigation is primarily handled through the Sheet component and the mobile menu logic in App.js.
Sheet (Side Drawer)
The Sheet component acts as a sliding overlay (drawer) that can appear from any side of the screen. It is used to present navigation or supplemental content without losing the user's current context.
This sequence shows the interaction flow for side-drawer navigation.
Sources: frontend/src/components/ui/sheet.jsx:45-66, frontend/src/App.js:84-105
Conclusion
The Navigation Components form a responsive and accessible framework for interacting with the Promethean Conduit. By integrating high-level React routing with low-level Radix UI primitives, the system provides a consistent experience across desktop and mobile devices, supporting everything from global site navigation to granular data pagination.