DiamondLightSource / DiamondLightSource/sci-react-ui

New components: `SecondaryNav` and `NavigationLayout` for contextual secondary navigation

Open
#274 2 comments 0 reactions 0 assignees Claimed by @zoharma View on GitHub
needs-triage
Dominant language
TypeScript
Stars
8
Forks
3
Avg merge
3d 15h
Merged PRs (30d)
5

Description

## What is being proposed?

Two new components, built on top of the existing `SidebarNav`:

- **`SecondaryNav`**: a second, contextual navigation panel (grouped items, optional one-level nesting, optional search, optional title/back header) that sits alongside the primary sidebar. It renders as a fixed side panel on desktop and a temporary overlay drawer on mobile.
- **`NavigationLayout`**: a composing layout component that owns `SidebarNav` + `SecondaryNav` + main content together, and handles the responsive coordination between the two panels (e.g. only one temporary drawer visible at a time on mobile, back-navigation between them).

## Why is this needed?

`SidebarNav` alone only models a single, flat/nested primary navigation tree. Several Diamond apps need a second level of navigation that's contextual to what's selected in the primary sidebar (e.g. picking Experiments in the sidebar, then navigating between each experiment in a secondary panel), something like `SidebarNav`'s pattern, but for a scoped set of items that changes with context.

Without a shared component, each consuming app would re-implement this panel-plus-drawer pattern, including the fiddly responsive behaviour (mobile drawer stacking, back button wiring, history/popstate handling)
that `NavigationLayout` centralises.

## What will change?

- Introduces two new components: `SecondaryNav` and `NavigationLayout` (both already implemented and exported from `src/index.ts` on this branch).
- No changes to existing component props/behaviour, other than a small addition to `SidebarNav` (see below) needed for `NavigationLayout` to drive it.
- New shared type: `LinkProps` in `src/components/navigation/types.ts`, reused by `SecondaryNav`'s item definitions.

## Interface changes (if any)

```tsx
// Standalone SecondaryNav

// Composed with SidebarNav via NavigationLayout

{children}

```

## Breaking change?

- [ ] Yes
- [X] No

## Next steps
A maintainer will review this issue.
If accepted, it will be marked as `accepted` and a PR may then be opened.

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the linked pull request and the exports in src/index.ts, then read the shared LinkProps definition in src/components/navigation/types.ts. Compare the implemented SecondaryNav and NavigationLayout with the proposed interfaces and responsive behavior; done means the requested components and SidebarNav integration are reviewed and complete.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.