Navigation Behaviors
Use cases and scenarios for the APP::NAV (Navigation) area. These behaviors define how users move through the application and access supporting functions from the persistent header and sidebar chrome. The navigation chrome is visible on every authenticated page and provides the primary wayfinding structure for all personas. Three functional groups are covered: sidebar and page navigation, global search and contextual help, and user notifications.
APP::NAV::0001 — Sidebar and Page Navigation
Section titled “APP::NAV::0001 — Sidebar and Page Navigation”The sidebar provides persistent links to all top-level application areas. It can be expanded to show labeled links or collapsed to icon-only mode. Every page navigation triggers a badge-count refresh to keep the Order Queue indicators current.
| Persona | Irene Itemsworth (Inventory Manager), Sam Scansworth (Shop Floor Worker), David Dealsworth (Purchasing Manager), Keisha Clerkson (Receiving Clerk), Owen Ownerton (Business Principal), Alan Adminson (Account Admin) |
| Status | Covered |
APP::NAV::0001::0001.US — Navigate via Sidebar Link
Section titled “APP::NAV::0001::0001.US — Navigate via Sidebar Link”The user is authenticated and clicks a sidebar link — Dashboard, Items, Order Queue, or Receiving. The browser performs a client-side navigation to the corresponding route (/dashboard, /items, /order-queue, /receiving). The clicked link becomes highlighted as the active link in the sidebar. Page content updates without a full page reload, preserving the authentication session and service worker (MSW) state.
APP::NAV::0001::0002.US — Toggle Sidebar Collapse
Section titled “APP::NAV::0001::0002.US — Toggle Sidebar Collapse”The user clicks the “Toggle Sidebar” hamburger button in the header. If the sidebar was expanded (showing text labels and icons for each navigation link), it collapses to icon-only mode, widening the available main content area. If the sidebar was already in icon-only mode, it expands back to the full-width labeled mode. Navigation remains fully functional in both states. Sidebar visibility state is stored in localStorage under the key sidebarVisibility and persists across page reloads and sessions.
APP::NAV::0001::0003.FS — Refresh Sidebar Badge Counts on Navigation
Section titled “APP::NAV::0001::0003.FS — Refresh Sidebar Badge Counts on Navigation”On every page navigation — regardless of which page was the origin or destination — three badge-refresh API calls fire automatically: POST details/requesting, POST details/requested, and POST details/in-process. These calls update the sidebar badge counts for the Order Queue to reflect the current number of Kanban Cards in each lifecycle state. The calls fire in addition to any page-specific API calls. All page navigation tests must account for these three additional calls completing before asserting on page readiness.
APP::NAV::0002 — Global Search, Help, and Notifications Access
Section titled “APP::NAV::0002 — Global Search, Help, and Notifications Access”The application header provides three utility controls that are accessible from every authenticated page: a global search box, a help button, and a notification bell. These controls give the user quick access to cross-cutting functions without navigating away from their current context.
| Persona | Irene Itemsworth (Inventory Manager), Sam Scansworth (Shop Floor Worker), David Dealsworth (Purchasing Manager), Keisha Clerkson (Receiving Clerk), Owen Ownerton (Business Principal), Alan Adminson (Account Admin) |
| Status | Covered |
APP::NAV::0002::0001.US — Use Global Search
Section titled “APP::NAV::0002::0001.US — Use Global Search”The user clicks the search box in the header bar and types a query. Search results are displayed according to the search implementation — the current behavior may filter the current page, navigate to a search results page, or present a dropdown of matches. The exact result behavior depends on the search endpoint, which was observed in the reference environment but whose full implementation details were not confirmed at the time of E2E discovery.
APP::NAV::0002::0002.US — View Notifications Panel
Section titled “APP::NAV::0002::0002.US — View Notifications Panel”The user clicks the notification bell icon in the header or presses Alt+T. A notification panel opens, listing pending notifications such as order status changes and system alerts. Each notification entry is clickable and navigates the user to the relevant context — for example, an order status change notification navigates to /order-queue, and an item update notification navigates to /items. The panel shows an empty state if no notifications are pending. Closing the panel returns the user to their previous view without navigating away. A badge count on the bell icon reflects the number of unread notifications.
APP::NAV::0002::0003.US — Access Help
Section titled “APP::NAV::0002::0003.US — Access Help”The user clicks the help button (question mark icon) in the header bar. A help panel or overlay opens, displaying help content, links to product documentation, or a support contact form. The Pylon widget used for help content is treated as out of scope for E2E testing — tests verify that the help panel opens and closes correctly but do not assert on the Pylon widget’s content. Closing the panel returns the user to their previous view.
APP::NAV::0003 — User Notifications Review and Action
Section titled “APP::NAV::0003 — User Notifications Review and Action”Users can review their notification list in detail and act on individual notifications by navigating to the context page where the notified event occurred.
| Persona | Irene Itemsworth (Inventory Manager), David Dealsworth (Purchasing Manager), Keisha Clerkson (Receiving Clerk), Owen Ownerton (Business Principal), Alan Adminson (Account Admin) |
| Status | Covered |
APP::NAV::0003::0001.US — Review and Act on a Notification
Section titled “APP::NAV::0003::0001.US — Review and Act on a Notification”The user opens the notification panel via the bell icon or Alt+T. The panel lists available notifications, with a badge count on the icon indicating the total (eight notifications were observed in the reference environment). The user clicks on a notification entry. The application navigates to the relevant context page — for example, to /order-queue for an order status change or to /items for an item update. The notification panel closes on navigation. The user can close the panel without acting on any notification, which returns them to their previous view without a navigation change.
Summary
Section titled “Summary”| Use Case | Scenarios | US | FS | UC |
|---|---|---|---|---|
APP::NAV::0001 Sidebar and Page Navigation | 3 | 2 | 1 | 0 |
APP::NAV::0002 Global Search, Help, and Notifications Access | 3 | 3 | 0 | 0 |
APP::NAV::0003 User Notifications Review and Action | 1 | 1 | 0 | 0 |
| Total | 7 | 6 | 1 | 0 |
Copyright: © Arda Systems 2025-2026, All rights reserved