feat: segmented section tracks in the menu bar and collapsible sidebar groups

docs/customization.md

@@ -72,13 +72,38 @@ The **Theme** tab also lets you personalize the navigation bar with your own bra
 
 Both settings take effect immediately and persist across page reloads.
 
-## 7. Responsive Menu Bar
+## 7. Menu Bar
+
+### Section Tracks
+
+Pages that are split into sections carry those sections in a **rounded track** in the menu bar, placed
+directly after the page they belong to, so it is always clear which page a section belongs to. The
+section you are looking at is marked by a filled pill, which follows you as you scroll.
+
+Three pages have one:
+
+- **Overview** — one item per project bar, showing at most three at a time: the section you are
+  looking at plus its neighbours. Switching the project bars on or off (see the
+  [Overview settings](/settings#overview-settings-overview-tab)) adds and removes items with them.
+- **Dashboard** — *Runs*, *Suites*, *Tests* and *Keywords*. Sections you hide leave the track as well.
+  In [Unified Mode](/tabs-pages#unified-mode) the whole track disappears, since there are no separate
+  sections to jump between.
+- **Tables** — one item per table that is shown, in the order you arranged the tables in.
+
+Clicking an item scrolls to that section, expanding it first if it was collapsed. While you are
+editing the layout the tracks step aside, so the undo/redo buttons have the middle of the bar to
+themselves.
+
+### Responsive Menu Bar
 
 The navigation bar automatically adapts to any screen width — no manual configuration required:
 
 - When the viewport becomes too narrow to display all page links, the menu items (*Overview*, *Dashboard*, *Compare*, *Tables*, etc.) are moved into a **slide-in sidebar**.
 - If the viewport is even smaller and the icon shortcuts also no longer fit, those move into the sidebar too.
 - A **hamburger button** (☰) appears in the top-right corner whenever items have been moved to the sidebar. Clicking it opens the sidebar; clicking the backdrop or the close button dismisses it.
+- In the sidebar each page that has sections becomes a **collapsible group**: the page you are on is
+  expanded, and the chevron next to a page folds its sections away. Opening the group of another page
+  takes you to that page.
 - The sidebar reorganizes itself to reflect the current page order configured by the user.
 
 This behavior is fully automatic and requires no action from the user.

robotframework_dashboard/css/base.css

@@ -265,6 +265,10 @@ body.lock-scroll {
   overflow: hidden;
 }
 
+#navigation {
+  min-height: 54px;
+}
+
 #mainNavItems {
   white-space: nowrap;
   min-width: 0;
@@ -282,6 +286,35 @@ body.lock-scroll {
   display: block;
 }
 
+.nav-tracks-hidden .nav-track {
+  display: none;
+}
+.nav-track {
+  display: flex;
+  align-items: center;
+  /* the navbar row stretches its flex items, which made the track fill the bar top to bottom */
+  align-self: center;
+  gap: 2px;
+  padding: 3px;
+  margin: 0 6px;
+  border-radius: 999px;
+  background: var(--color-track-bg);
+  border: 1px solid var(--color-track-border);
+  flex-shrink: 0;
+}
+.navbar .nav-track-item {
+  padding: 3px 13px;
+  font-size: 0.8125rem;
+  line-height: 1.3;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.navbar .nav-track-item.active,
+.navbar .nav-track-item.active:hover {
+  background: var(--color-highlight);
+  color: var(--color-on-highlight);
+}
+
 .sidenav-backdrop {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
@@ -343,29 +376,80 @@ body.lock-scroll {
   color: var(--color-text-muted);
   letter-spacing: 0.05em;
 }
+.sidenav-group-header {
+  display: flex;
+  align-items: center;
+  border-left: 3px solid transparent;
+}
+.sidenav-group-header:hover {
+  background: var(--color-menu-hover-bg);
+}
+.sidenav-group-header.active {
+  border-left-color: var(--color-highlight);
+  background: var(--color-highlight-tint);
+}
 .sidenav-body .sidenav-nav-item {
+  flex: 1;
+  min-width: 0;
+  padding: 7px 4px 7px 16px;
+  font-weight: 500;
+  color: var(--color-menu-text);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sidenav-group-header:hover .sidenav-nav-item {
+  color: var(--color-highlight);
+}
+.sidenav-group-header.active .sidenav-nav-item {
+  font-weight: 600;
+  color: var(--color-highlight);
+}
+.sidenav-group-toggle {
+  background: none;
+  border: none;
+  padding: 8px 14px 8px 8px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  display: flex;
+}
+.sidenav-group-header.active .sidenav-group-toggle {
+  color: var(--color-highlight);
+}
+.sidenav-group-toggle svg {
+  width: 15px;
+  height: 15px;
   display: block;
-  padding: 6px 16px;
+}
+.sidenav-subgroup {
+  display: flex;
+  flex-direction: column;
+  margin: 2px 0 6px 22px;
+  border-left: 1px solid var(--color-border);
+}
+.sidenav-body .sidenav-sub-item {
+  display: block;
+  padding: 6px 12px 6px 14px;
+  margin-left: -1px;
+  font-size: 0.84375rem;
   color: var(--color-menu-text);
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-left: 3px solid transparent;
+  border-left: 2px solid transparent;
 }
-.sidenav-body .sidenav-nav-item:hover {
-  background: rgba(255, 255, 255, 0.06);
+.sidenav-body .sidenav-sub-item:hover {
+  background: var(--color-menu-hover-bg);
   color: var(--color-highlight);
 }
-.sidenav-body .sidenav-nav-item.active {
+.sidenav-body .sidenav-sub-item.active {
   border-left-color: var(--color-highlight);
   color: var(--color-highlight);
 }
-.sidenav-body .sidenav-nav-submenu {
-  padding-left: 32px;
-  font-style: italic;
-}
 .sidenav-icon-row {
   display: grid;
   grid-template-columns: repeat(3, auto);

robotframework_dashboard/css/colors.css

@@ -3,6 +3,11 @@
   --color-card: #ffffff;
   --color-menu-text: var(--color-text);
   --color-highlight: #3451b2;
+  --color-on-highlight: #ffffff;
+  --color-highlight-tint: rgba(52, 81, 178, 0.07);
+  --color-track-bg: rgba(0, 0, 0, 0.07);
+  --color-track-border: rgba(0, 0, 0, 0.08);
+  --color-menu-hover-bg: rgba(0, 0, 0, 0.05);
   --color-text: #000000;
   --color-text-muted: #6c757d;
   --color-text-disabled: #6c757d;
@@ -35,6 +40,11 @@
   --color-card: rgba(30, 41, 59, 0.9);
   --color-menu-text: var(--color-text);
   --color-highlight: #a8b1ff;
+  --color-on-highlight: #10192f;
+  --color-highlight-tint: rgba(168, 177, 255, 0.1);
+  --color-track-bg: rgba(255, 255, 255, 0.08);
+  --color-track-border: rgba(255, 255, 255, 0.12);
+  --color-menu-hover-bg: rgba(255, 255, 255, 0.06);
   --color-text: #eee;
   --color-text-muted: #9ca3af;
   --color-text-disabled: #94a3b8;

robotframework_dashboard/js/eventlisteners.js

@@ -19,7 +19,7 @@ import { arrowDown, arrowRight } from "./variables/svg.js";
 import { fullscreenButtons, graphChangeButtons, compareRunIds } from "./variables/graphs.js";
 import { toggle_theme, apply_theme_colors, apply_custom_branding } from "./theme.js";
 import { add_alert, show_graph_loading, hide_graph_loading, update_graphs_with_loading, show_loading_overlay, hide_loading_overlay } from "./common.js";
-import { setup_data_and_graphs, update_menu } from "./menu.js";
+import { setup_data_and_graphs, update_menu, setup_overview_section_menu_buttons } from "./menu.js";
 import { update_dashboard_graphs } from "./graph_creation/all.js";
 import {
     setup_filtered_data_and_filters,
@@ -834,6 +834,7 @@ function setup_sections_filters() {
                 update_overview_sections_visibility();
                 // update all tagged bars
                 update_projectbar_visibility();
+                setup_overview_section_menu_buttons();
                 hide_loading_overlay();
             });
         });
@@ -852,6 +853,7 @@ function setup_sections_filters() {
                 update_overview_sections_visibility();
                 // update all named project bars
                 update_projectbar_visibility();
+                setup_overview_section_menu_buttons();
                 hide_loading_overlay();
             });
         });
@@ -860,11 +862,13 @@ function setup_sections_filters() {
         settings.switch.latestRuns = !settings.switch.latestRuns
         update_switch_local_storage("switch.latestRuns", settings.switch.latestRuns);
         update_overview_sections_visibility();
+        setup_overview_section_menu_buttons();
     });
     document.getElementById("switchTotalStats").addEventListener("click", function () {
         settings.switch.totalStats = !settings.switch.totalStats
         update_switch_local_storage("switch.totalStats", settings.switch.totalStats);
         update_overview_sections_visibility();
+        setup_overview_section_menu_buttons();
     });
     document.getElementById("switchSortFilters").addEventListener("click", function () {
         settings.switch.sortFilters = !settings.switch.sortFilters

robotframework_dashboard/js/layout.js

@@ -539,6 +539,8 @@ function customize_layout() {
     document.querySelectorAll("#iconNavItems > li").forEach(li => {
         if (!li.querySelector("#saveLayout")) li.classList.add("navbar-disabled");
     });
+    // the undo/redo buttons sit centred over the navbar, so the tracks step aside while editing
+    document.getElementById("navigation").classList.add("nav-tracks-hidden");
     document.getElementById("layoutHistoryNavItems").hidden = false;
     layoutHistory = [capture_settings_snapshot()];
     layoutHistoryIndex = 0;
@@ -551,6 +553,7 @@ function save_layout() {
     document.getElementById("saveLayout").hidden = true;
     document.getElementById("mainNavItems").classList.remove("navbar-disabled");
     document.querySelectorAll("#iconNavItems > li").forEach(li => li.classList.remove("navbar-disabled"));
+    document.getElementById("navigation").classList.remove("nav-tracks-hidden");
     document.getElementById("layoutHistoryNavItems").hidden = true;
     layoutHistory = [];
     layoutHistoryIndex = -1;