Navigation & Dashboard Interactivity
Relevant source files
The following files were used as context for generating this wiki page:
Navigation and Dashboard Interactivity in Zephyr manages the transitions between application views and the real-time interactive elements of the user interface. The system uses a sidebar-driven navigation model coupled with specialized dashboard modes—Minimal and Console—to provide different levels of network monitoring and control.
Interactivity is enhanced through custom animation engines, 3D hover effects for UI components, and virtualized scrolling for high-performance data rendering. The architecture ensures that outgoing pages are hidden immediately to prevent flickering while incoming pages animate into view.
Sources: apps/desktop/src/ui/navigation.js:15-32, apps/desktop/src/main.js:235-248
Navigation Architecture
The navigation system coordinates sidebar interactions, page visibility, and lifecycle callbacks for specialized modules.
Sidebar and Page Switching
The sidebar utilizes data-nav attributes to identify target pages. When you click a navigation item, the system performs the following sequence:
- Normalization: It redirects 'home' to 'console' if the Console dashboard mode is enabled.
- Lifecycle Execution: It fires "leave" callbacks for the current page (e.g., stopping log polling).
- Visual Transition: It updates CSS classes for active/leaving states and moves a sliding
nav-indicatorbehind the selected button. - Animation: It cross-fades background glows and triggers a rise-and-fade animation for the incoming page.
Sources: apps/desktop/src/ui/navigation.js:148-166, apps/desktop/src/ui/navigation.js:200-220
Navigation Lifecycle Callbacks
Specific pages require setup or cleanup when entered or exited. The initNavigation function accepts a configuration object to map these events.
| Page ID | Enter Callback | Leave Callback |
|---|---|---|
proxies | onProxies | onLeaveProxies |
console | onConsole | onLeaveConsole |
logs | onLogs | onLeaveLogs |
home | onHome | N/A |
Sources: apps/desktop/src/ui/navigation.js:180-196, apps/desktop/src/main.js:410-424
Programmatic Navigation Flow
This diagram illustrates how the system handles a navigation request, whether from a user click or an internal event.
Dashboard Interactivity
The dashboard provides real-time feedback through two primary modes: Minimal and Console.
Minimal vs. Console Mode
The dashboard mode is determined by the home_page_mode setting. Minimal mode focuses on simple toggles and a hero traffic chart, while Console mode provides detailed group management and node selection. The application listens for HOME_PAGE_MODE_CHANGED events via the internal event bus to swap these views instantly without manual navigation.
Sources: apps/desktop/src/main.js:235-248, apps/desktop/src/main.js:501-518
3D Interaction Effects
Zephyr applies a dynamic 3D tilt effect to navigation items and proxy cards. The setup3DEffect function calculates mouse position relative to the element center and applies perspective and rotate transforms.
- Sensitivity: Defaults to
20. - Smoothing: Uses CSS transitions for entry and exit.
- Cleanup: Automatically resets transforms on
mouseleave.
Sources: apps/desktop/src/ui/3d-effect.js:10-52
Performance Optimization
High-interactivity areas, such as logs and node lists, utilize specialized utilities to maintain 60fps performance.
Virtual Scrolling
The system implements a manual virtual scroll engine to handle large datasets (like 2000+ log lines). It calculates a prefixSum of row heights to perform $O(\log n)$ binary searches for visible items.
- Overscan: Renders hidden rows above and below the viewport to prevent white gaps during rapid scrolling.
- Quantization: Updates the DOM only when the scroll position crosses a specific pixel threshold (bin size).
- Hard Cap: Limits the total number of mounted DOM nodes to prevent browser memory exhaustion.
Sources: apps/desktop/src/utils/virtual-scroll.js:10-45, apps/desktop/src/ui/console-home.js:460-475
Sequence: Console Dashboard Activation
When you navigate to the Console, the system must synchronize the core state before rendering.
UI Layout Structure
The layout is defined in apps/desktop/src/index.html using a multi-layered approach to separate navigation, background effects, and content.
| Layer | ID / Selector | Purpose |
|---|---|---|
| Glows | [id^="glow-"] | Shared background accent colors that cross-fade. |
| Sidebar | nav#sidebar-nav | Contains nav-btn elements and the nav-indicator. |
| Main Area | .flex-1 | The container for all data-page containers. |
| Notifications | #notif-container | Floating overlay for system alerts. |
Sources: apps/desktop/src/index.html:15-110
Summary
The Navigation & Dashboard Interactivity system provides a seamless, high-performance experience by combining localized lifecycle management with sophisticated visual effects. By utilizing virtual scrolling for data-heavy views and 3D transforms for interactive elements, Zephyr maintains a responsive feel even when handling complex proxy configurations and real-time traffic data.