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

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

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

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

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

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