DiamondLightSource / DiamondLightSource/sci-react-ui
New components: `SecondaryNav` and `NavigationLayout` for contextual secondary navigation
- Vorherrschende Sprache
- TypeScript
- Sterne
- 8
- Forks
- 3
- Ø Merge
- 3 T. 15 Std.
- Gemergte PRs (30 T.)
- 5
Beschreibung
## 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.
Beitragsleitfaden
Rechercherichtung
Beginne mit der Überprüfung des verknüpften Pull Requests und der Exporte in src/index.ts und lies anschließend die gemeinsame LinkProps-Definition in src/components/navigation/types.ts. Vergleiche die implementierten SecondaryNav und NavigationLayout mit den vorgeschlagenen Schnittstellen und dem responsiven Verhalten; als abgeschlossen gilt die Aufgabe, wenn die angeforderten Komponenten und die Integration von SidebarNav überprüft und vollständig umgesetzt sind.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 5/5
- Geschätzter Aufwand
- Über eine Woche
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 25/100