Navigation and branding

Navigation layouts and logo

Open Settings and choose Navigation layout: Left sidebar or Top navigation. The choice is saved in the existing browser preferences. Older saved preferences default to the sidebar. Both options use the navigation drawer below 992px.

The sidebar keeps its brand, workspace context and account fixed while page links scroll independently. Sidebar groups open inline as an accordion; opening one closes the previous group, while navigation search reveals all matching groups. The clicked heading stays in view when content height changes. Horizontal navigation uses grouped dropdowns with normal Tab navigation, Escape-to-close and outside-click dismissal. Links use the same route inventory as the sidebar.

The workspace header uses HeaderActions.tsx for inline page/customer search and non-modal activity/account dropdowns. Search opens with Ctrl K (Command K on macOS), supports arrow keys and Enter, and shows grouped results. On mobile, the search icon expands a field below the header. Escape returns focus and closes the open panel; outside clicks, leaving the header with Tab, and navigation also close panels. Only one header panel opens at a time. The account dropdown uses the same Jamie Davis demo identity as the sidebar. Activity read IDs persist locally under adminbag:activity-read; marking activity read does not change business records or send a backend request. New activity IDs restore the unread indicator. The minimal starter does not include business search or activity records.

The supplied original PNG is retained in src/assets/brand/navrenza.png. The active logo is src/assets/brand/navrenza-transparent.png, a background-extracted PNG with a real alpha channel. BrandLogo.tsx renders it without a background; dark surfaces use a light wordmark with the blue mark preserved. CSS frames show a compact mark on narrow top headers. See LOGO-ASSET.md for edit provenance.

Use the desktop header menu button to collapse the sidebar to a 76px icon rail or expand it in place. Browse all pages expands the same sidebar and focuses its filter; it never opens a desktop navigation dialog. The rail keeps workspace links, active-page indicators, expansion and sign-out accessible. The sidebarCollapsed preference persists across reloads and is ignored by the mobile drawer and horizontal navigation. Settings includes an Icon-only sidebar switch. The /layouts/sidebar-closed page includes a live workspace action as well as its contained preview.

Below 992px, navigation opens as a full-height edge drawer (left for LTR, right for RTL), with focus trapping, Escape/backdrop/close-button dismissal, and independently scrolling links. Resizing to desktop closes the drawer automatically. The starter uses the same drawer. Other dialogs keep their existing centered presentation.

Sidebar background

Settings includes Auto, Light, Dark and Brand color navigation backgrounds. Auto preserves the application's light/dark appearance; the other choices apply local colors to the expanded sidebar, collapsed icon rail and mobile navigation drawer without changing content or top navigation. Brand color follows the selected accent palette. The optional sidebarStyle preference is validated, saved locally and defaults to auto for older stored data. The starter kit includes the same control. Light sidebar mode preserves the dark wordmark even on dark pages; dark/brand sidebars use the light wordmark with the original blue mark.

Preference reference

Current demo user

Update src/data/current-user.ts and the matching photo mapping in src/data/people-images.ts. The header, sidebar and default profile share this identity. Directory links with ?contact=id display another person without changing the session identity.