@glamcor/dna-shared-nav

Shared navigation component for DNA microsites. Provides a consistent two-row navigation across all DNA applications.

Installation

``bash
npm install @glamcor/dna-shared-nav
`

Usage

`tsx
import { DNANavigation } from '@glamcor/dna-shared-nav';
import '@glamcor/dna-shared-nav/dist/styles.css';

export default function Layout({ children }) {
const user = {
id: '1',
name: 'John Doe',
email: 'john@example.com',
role: 'admin',
};

return (
<>
user={user}
currentApp="Water"
appName="Water"
subnavItems={[
{ name: 'Dashboard', href: '/admin', isActive: true },
{ name: 'Customers', href: '/admin/customers' },
{ name: 'Jobs', href: '/admin/jobs' },
]}
pinnedJobs={[
{
id: '1',
appName: 'Water',
jobName: 'Q4 Enrichment',
progress: 59,
appColor: '#38bdf8',
},
]}
onUnpinJob={(id) => console.log('Unpin:', id)}
onLogout={() => signOut()}
/>


{children}



);
}
`

Components

$3

Main wrapper that renders both the header and app subnav.

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| user | DNAUser \| null | Yes | Current user object |
| currentApp | string | No | Name of active app in header nav |
| appName | string | Yes | Name shown in subnav |
| headerItems | DNANavItem[] | No | Override default header nav items |
| subnavItems | AppSubnavItem[] | Yes | App-specific subnav links |
| pinnedJobs | PinnedJob[] | No | Jobs to show in pinned area |
| logoSrc | string | No | Custom logo URL (defaults to CloudFront CDN) |
| onLogout | () => void | No | Logout handler |
| onUnpinJob | (id: string) => void | No | Handler for unpinning jobs |

$3

Just the top header bar (logo, inter-app nav, avatar).

$3

Just the second row (app name, pages, pinned jobs).

$3

Standalone avatar dropdown component.

$3

Standalone pinned jobs carousel.

Default Nav Items

The header includes these nav links by default:

| Name | Environment Variable |
|------|---------------------|
| Dashboard | NEXT_PUBLIC_DNA_DASHBOARD_URL |
| SPOT | NEXT_PUBLIC_SPOT_URL |
| Nitrogen | NEXT_PUBLIC_DNA_NITROGEN_URL |
| Water | NEXT_PUBLIC_DNA_WATER_URL |
| Methane | NEXT_PUBLIC_DNA_METHANE_URL |
| Hydrogen | NEXT_PUBLIC_DNA_HYDROGEN_URL |
| Oxygen | NEXT_PUBLIC_DNA_OXYGEN_URL |
| Ammonia | NEXT_PUBLIC_DNA_AMMONIA_URL |
| Carbon | NEXT_PUBLIC_DNA_CARBON_URL |
| Lightning | NEXT_PUBLIC_DNA_LIGHTNING_URL |
| CRUSH | NEXT_PUBLIC_DNA_CRUSH_URL |

Logo

The logo defaults to the CloudFront CDN URL. To use a custom logo:

`tsx
logoSrc="/your-custom-logo.png"
// ... other props
/>
`

Environment Variables

Configure inter-app navigation URLs in your .env.local:

`bash
NEXT_PUBLIC_DNA_DASHBOARD_URL=https://dna-dashboard.vercel.app
NEXT_PUBLIC_SPOT_URL=https://spot.vercel.app
NEXT_PUBLIC_DNA_NITROGEN_URL=https://dna-nitrogen.vercel.app
NEXT_PUBLIC_DNA_WATER_URL=https://dna-water.vercel.app
NEXT_PUBLIC_DNA_METHANE_URL=https://dna-methane.vercel.app
NEXT_PUBLIC_DNA_HYDROGEN_URL=https://dna-hydrogen.vercel.app
NEXT_PUBLIC_DNA_OXYGEN_URL=https://dna-oxygen.vercel.app
NEXT_PUBLIC_DNA_AMMONIA_URL=https://dna-ammonia.vercel.app
NEXT_PUBLIC_DNA_CARBON_URL=https://dna-carbon.vercel.app
NEXT_PUBLIC_DNA_LIGHTNING_URL=https://dna-lightning.vercel.app
NEXT_PUBLIC_DNA_CRUSH_URL=https://dna-crush.vercel.app
`

Development

`bash


Install dependencies

npm install

Build

npm run build

Watch mode

npm run dev
`

Types

`typescript
interface DNAUser {
id: string;
email: string;
name: string;
role?: 'superadmin' | 'admin' | 'editor' | 'viewer';
avatar?: string;
}

interface DNANavItem {
name: string;
href: string;
requiredRole?: 'viewer' | 'editor' | 'admin' | 'superadmin';
hasNotification?: boolean;
}

interface AppSubnavItem {
name: string;
href: string;
isActive?: boolean;
}

interface PinnedJob {
id: string;
appName: string;
appColor?: string;
jobName: string;
progress: number;
meta?: string;
}
``

Changelog

$3

- Updated nav items: SPOT, Nitrogen, Water, Methane, Hydrogen, Oxygen, Ammonia, Carbon, Lightning, CRUSH
- Logo now defaults to CloudFront CDN URL
- Fixed installation instructions for npm

$3

- Initial npm publish