DiamondLightSource / DiamondLightSource/sci-react-ui

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

Ouverte
#274 2 commentaires 0 réactions 0 personnes assignées Réclamée par @zoharma Voir sur GitHub
needs-triage
Langage dominant
TypeScript
Étoiles
8
Forks
3
Merge moyen
3 j 15 h
PR mergées (30 j)
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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par examiner la pull request liée et les exports de src/index.ts, puis lisez la définition partagée de LinkProps dans src/components/navigation/types.ts. Comparez SecondaryNav et NavigationLayout tels qu’ils sont implémentés avec les interfaces proposées et le comportement responsive ; le travail est considéré comme terminé lorsque les composants demandés et l’intégration de SidebarNav ont été examinés et sont complets.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.