add-navigation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Add Navigation

接入Navigation组件

Wire

Navigation

from

@cognite/dune-industrial-components/navigation

into this Dune app.

Nav items: $ARGUMENTS

The component is fully controlled — the parent owns

activeId

and

onNavigate

. No state or routing assumptions live inside it.

The

logo

prop is optional and defaults to the Cognite vertical logo. It uses

currentColor

so it automatically renders black in light mode and white in dark mode.

将

@cognite/dune-industrial-components/navigation

中的

Navigation

组件接入当前Dune应用。

导航项：$ARGUMENTS

该组件为完全受控组件——由父组件控制

activeId

和

onNavigate

，组件内部不包含任何状态或路由相关的预设逻辑。

logo

为可选属性，默认使用Cognite垂直logo。它采用

currentColor

属性，因此会自动在浅色模式下显示黑色，深色模式下显示白色。

Step 1 — Check dependencies

步骤1 — 检查依赖

First, check if

@cognite/dune-industrial-components

is installed by looking at

package.json

. If not installed, run:

bash

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

首先，查看

package.json

确认是否已安装

@cognite/dune-industrial-components

。如果未安装，请运行：

bash

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

Step 2 — Read the app

步骤2 — 分析应用

Read

src/App.tsx

(or the main layout file) and

package.json

before changing anything. Note:

Existing routing (
```
react-router-dom
```
?)
Existing dark-mode / theme hook
Where page content currently lives

在修改代码前，先阅读

src/App.tsx

（或主布局文件）和

package.json

，注意以下几点：

现有路由方案（是否使用
```
react-router-dom
```
？）
现有的深色模式/主题钩子
当前页面内容的存放位置

Step 3 — Define nav items

步骤3 — 定义导航项

Create a typed

NavItem[]

array using

$ARGUMENTS

(fall back to the app's existing pages/routes if empty):

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

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

使用

$ARGUMENTS

创建一个类型化的

NavItem[]

数组（如果参数为空，则回退到应用现有页面/路由）：

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

const NAV_ITEMS: NavItem[] = [
  { id: 'home', label: 'Home' },
  // 每个参数/页面对应一个条目
];

Step 4 — Wire into the layout

步骤4 — 接入布局

The Navigation uses the default Cognite logo and includes a theme toggle by default.

Navigation组件默认使用Cognite logo，并自带主题切换功能。

No router (useState)

无路由场景（使用useState）

tsx

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>
  );
}

tsx

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

export function App() {
  const [activeId, setActiveId] = useState(NAV_ITEMS[0].id);
  
  // 如果应用已支持深色模式，请使用现有钩子
  const { isDark, toggle } = useDarkMode(); // 根据应用的主题钩子调整

  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 ? '切换到浅色模式' : '切换到深色模式'}
          >
            {isDark ? '🌙' : '☀️'}
          </button>
        )}
      />
      <main className="flex flex-1 flex-col">{/* 页面内容 */}</main>
    </div>
  );
}

With react-router-dom

结合react-router-dom场景

tsx

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>
  );
}

tsx

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

export function App() {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 如果应用已支持深色模式，请使用现有钩子
  const { isDark, toggle } = useDarkMode(); // 根据应用的主题钩子调整

  // 从路径中提取activeId — 根据应用的路由结构调整
  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 ? '切换到浅色模式' : '切换到深色模式'}
          >
            {isDark ? '🌙' : '☀️'}
          </button>
        )}
      />
      <main className="flex flex-1 flex-col">{/* 页面内容 */}</main>
    </div>
  );
}

Optional — Custom logo

可选配置 — 自定义logo

By default, the Navigation uses the Cognite logo which automatically adapts to light/dark themes. Only add a custom logo if needed.

To use a custom logo, pass the

logo

prop. If the app has dark/light mode, swap the image based on the theme hook:

tsx

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>
  )}
/>

默认情况下，Navigation组件会使用适配深浅色主题的Cognite logo。仅在需要时添加自定义logo。

如需使用自定义logo，传入

logo

属性。如果应用支持深浅色模式，可根据主题钩子切换图片：

tsx

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

// 在组件内部（使用应用对应的钩子）：
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 ? '切换到浅色模式' : '切换到深色模式'}
    >
      {isDark ? '🌙' : '☀️'}
    </button>
  )}
/>

Done

完成

The app now has a sticky navigation header with:

Default Cognite logo that adapts to light/dark themes
Theme toggle button (if dark mode hook exists)
```
aria-current="page"
```
on the active item
```
aria-label
```
attributes on the logo button and
```
<nav>
```
element

Package:

@cognite/dune-industrial-components/navigation

Exports:

Navigation

CogniteLogo

NavItem

NavigationProps

现在应用已拥有一个粘性导航头部，包含以下功能：

自动适配深浅色主题的默认Cognite logo
主题切换按钮（如果应用存在深色模式钩子）
激活项上的
```
aria-current="page"
```
属性
logo按钮和
```
<nav>
```
元素上的
```
aria-label
```
属性

包:

@cognite/dune-industrial-components/navigation

导出内容:

Navigation

CogniteLogo

NavItem

NavigationProps