add-navigation

添加导航

将 Navigation 从 @cognite/dune-industrial-components/navigation 接入此 Dune 应用。

导航项：$ARGUMENTS

该组件完全受控——父级负责管理 activeId 和 onNavigate。组件内部不假设任何状态或路由。

logo 属性为可选项，默认为 Cognite 竖版 Logo。它使用 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？）
• 现有的深色模式／主题 Hook
• 当前页面内容所在位置

第 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 Logo，并包含主题切换按钮。

无路由器（使用 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>
  );
}

可选——自定义 Logo

默认情况下，Navigation 使用 Cognite Logo，并会自动适配浅色／深色主题。仅在需要时添加自定义 Logo。

如需使用自定义 Logo，请传入 logo 属性。如果应用支持深色／浅色模式，请根据主题 Hook 切换图片：

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 Logo
• 主题切换按钮（如果存在深色模式 Hook）
• 当前项上的 aria-current="page"
• Logo 按钮和 <nav> 元素上的 aria-label 属性

包：@cognite/dune-industrial-components/navigation 导出项：Navigation、CogniteLogo、NavItem、NavigationProps