DiamondLightSource / DiamondLightSource/sci-react-ui

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

オープン
#274 コメント 2 件 リアクション 0 件 担当者 0 名 @zoharma が担当を希望しています GitHub で見る
needs-triage
主要言語
TypeScript
スター
8
フォーク
3
平均マージ
3日 15時間
マージ済み PR(30日)
5

説明

## 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.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、リンクされた pull request と src/index.ts のエクスポートを確認し、次に src/components/navigation/types.ts にある共有の LinkProps 定義を読んでください。実装済みの SecondaryNav と NavigationLayout を、提案されているインターフェースおよびレスポンシブ動作と比較します。要求されたコンポーネントと SidebarNav の統合を確認し、完了していることが完了条件です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。