add-navigation

ナビゲーションを追加する

この Dune アプリに @cognite/dune-industrial-components/navigation の Navigation を組み込みます。

ナビゲーション項目：$ARGUMENTS

このコンポーネントは完全制御型です。親コンポーネントが activeId と onNavigate を管理します。コンポーネント内に状態管理やルーティングに関する前提はありません。

logo プロパティは省略可能で、デフォルトでは Cognite の縦型ロゴが使用されます。currentColor を使用するため、ライトモードでは自動的に黒、ダークモードでは白で表示されます。

ステップ 1 — 依存関係を確認する

まず、package.json を確認し、@cognite/dune-industrial-components がインストールされているかを調べます。インストールされていない場合は、次を実行します。

pnpm install "github:cognitedata/dune-industrial-components#semver:*"

ステップ 2 — アプリを確認する

変更を加える前に、src/App.tsx（またはメインのレイアウトファイル）と package.json を確認します。次の点を把握してください。

• 既存のルーティング（react-router-dom？）
• 既存のダークモード／テーマフック
• 現在、ページコンテンツが配置されている場所

ステップ 3 — ナビゲーション項目を定義する

$ARGUMENTS を使って、型指定された NavItem[] 配列を作成します。空の場合は、アプリの既存のページ／ルートを使用します。

import type { NavItem } from '@cognite/dune-industrial-components/navigation';

const NAV_ITEMS: NavItem[] = [
  { id: 'home', label: 'Home' },
  // one entry per argument / page
];

ステップ 4 — レイアウトに組み込む

Navigation はデフォルトの Cognite ロゴを使用し、テーマ切り替え機能をデフォルトで含みます。

ルーターなし（useState を使用）

import { useState } from 'react';
import { Navigation } from '@cognite/dune-industrial-components/navigation';

export function App() {
  const [activeId, setActiveId] = useState(NAV_ITEMS[0].id);
  
  // If the app has dark mode, use the existing hook
  const { isDark, toggle } = useDarkMode(); // Adjust to match app's theme hook

  return (
    <div className="flex min-h-screen flex-col">
      <Navigation
        items={NAV_ITEMS}
        activeId={activeId}
        onNavigate={setActiveId}
        renderThemeToggle={() => (
          <button
            type="button"
            onClick={toggle}
            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
          >
            {isDark ? '🌙' : '☀️'}
          </button>
        )}
      />
      <main className="flex flex-1 flex-col">{/* page content */}</main>
    </div>
  );
}

react-router-dom を使用する場合

import { useLocation, useNavigate } from 'react-router-dom';
import { Navigation } from '@cognite/dune-industrial-components/navigation';

export function App() {
  const location = useLocation();
  const navigate = useNavigate();
  
  // If the app has dark mode, use the existing hook
  const { isDark, toggle } = useDarkMode(); // Adjust to match app's theme hook

  // Derive activeId from path — adjust to match the app's route structure
  const activeId = location.pathname.split('/')[1] || NAV_ITEMS[0].id;

  return (
    <div className="flex min-h-screen flex-col">
      <Navigation
        items={NAV_ITEMS}
        activeId={activeId}
        onNavigate={(id) => navigate(`/${id === NAV_ITEMS[0].id ? '' : id}`)}
        renderThemeToggle={() => (
          <button
            type="button"
            onClick={toggle}
            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
          >
            {isDark ? '🌙' : '☀️'}
          </button>
        )}
      />
      <main className="flex flex-1 flex-col">{/* page content */}</main>
    </div>
  );
}

任意 — カスタムロゴ

デフォルトでは、Navigation はライトテーマ／ダークテーマに自動で適応する Cognite ロゴを使用します。必要な場合にのみ、カスタムロゴを追加してください。

カスタムロゴを使用するには、logo プロパティを渡します。アプリにダークモード／ライトモードがある場合は、テーマフックを使って画像を切り替えます。

import { Navigation } from '@cognite/dune-industrial-components/navigation';
import logoLight from '@/assets/logo-light.svg';
import logoDark from '@/assets/logo-dark.svg';

// Inside the component (whatever hook the app uses):
const { isDark } = useDarkMode();

<Navigation
  items={NAV_ITEMS}
  activeId={activeId}
  onNavigate={setActiveId}
  logo={
    <img
      src={isDark ? logoDark : logoLight}
      alt="App"
      className="h-8 w-auto"
    />
  }
  renderThemeToggle={() => (
    <button
      type="button"
      onClick={toggle}
      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
    >
      {isDark ? '🌙' : '☀️'}
    </button>
  )}
/>

完了

アプリに、次の機能を備えた固定ナビゲーションヘッダーが追加されました。

• ライトテーマ／ダークテーマに適応するデフォルトの Cognite ロゴ
• テーマ切り替えボタン（ダークモードフックが存在する場合）
• アクティブな項目の aria-current="page"
• ロゴボタンと <nav> 要素の aria-label 属性

パッケージ：@cognite/dune-industrial-components/navigation エクスポート：Navigation、CogniteLogo、NavItem、NavigationProps