Energy Dashboard Navigation Summary The provided HTML describes the navigation structure of the Energy Dashboard website, including a responsive menu for different screen sizes and key navigation links. --- Main Navigation Features Responsive Navigation Bar: On smaller screens (extra-large hidden), a dropdown menu button is available with navigation options. On larger screens (extra-large visible), a horizontal menu bar displays. Primary Menu Items: Map (with a dropdown menu containing): Live Map (/live) Historical Map (/historical) Main Map (/map) — the currently selected/active page. Support Site: Link to a PayPal donation page for supporting the site. Data Sources: Link to /data page. Contact: Link to /contact page. Access Data: Link to /api-info page. Logo: Consists of styled graphical bars and the text "Energy Dashboard." Acts as a home link or brand identifier. --- Responsive Behavior On small screens: A hamburger menu icon reveals a dropdown menu with all primary and sub-menu links. On large screens: The menu items are displayed horizontally with dropdown capabilities for the "Map" menu. Secondary links including Data Sources, Contact, and Access Data are shown openly. --- Design and Accessibility Notes Uses Semantic HTML elements: <nav>, <ul>, <li>, <a>. Buttons and links have focus and hover states to enhance interaction. SVG icons provide visual aids next to menu items (e.g., map icon, arrows). The structure ensures accessible navigation with keyboard focus (tabindex). --- Summary of Links | Menu | Submenu | Destination | |---------------|-----------------------|-------------------------------------| | Map | Live | /live | | | Historical | /historical | | | Map | /map | | Support Site | — | PayPal donation link | | Data Sources | — | /data | | Contact | — | /contact | | Access Data | — | /api-info | --- This navigation structure facilitates user access to live and historical energy maps, data resources, contact information, and support options in a user-friendly, accessible manner.