# Header

`Header` combines the application identity, an optional app name and responsive navigation with a shared theme switch.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { Header } from "@dg/ui";
  import { page } from "$app/state";
  const links = [
    { label: "Home", href: "/" },
    { label: "Artworks", href: "/artworks" },
  ];
</script>

<Header app="Collection" identity="example.org" identityUrl="/" {links} path={page.url.pathname} />
```

Pass `actions` for compact controls that stay in the bar at every width, such as a button opening a search dialog:

```svelte
<script>
  import { Header, IconButton } from "@dg/ui";
  import { page } from "$app/state";
  let { links, onsearch } = $props();
</script>

<Header {links} path={page.url.pathname}>
  {#snippet actions()}
    <IconButton label="Search" icon="search" aria-haspopup="dialog" onclick={onsearch} />
  {/snippet}
</Header>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the header element.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string. `Header` does not render a children snippet; pass controls through `actions`.
- The header keeps its framed side rails and bottom rule, while its top edge stays open.
- Activating any link, including a same-page `#anchor`, closes the collapsed menu.
- `actions` renders after the inline links and before the theme switch. Below `--medium` the links and the theme switch move into the menu, while the actions stay in the bar before the menu button. Keep them compact, such as an `IconButton`, so the identity keeps its room on narrow screens.
- The app name links to /. The identity becomes muted when an app name is present. The terminal cursor stops blinking under reduced motion.

## Parameters

| Name          | Type                                | Default                                | Description                                                                                                |
| ------------- | ----------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `links`       | `{ label: string, href: string }[]` | `[]`                                   | Navigation links in display order. An empty array leaves only the optional theme switch.                   |
| `path`        | `string`                            | `""`                                   | Current URL pathname for active links and closing the menu after navigation. Pass page.url.pathname.       |
| `identity`    | `string`                            | `"distributed@gallery"`                | Identity shown before the terminal cursor.                                                                 |
| `identityUrl` | `string`                            | `"https://www.distributedgallery.art"` | Destination of the identity link.                                                                          |
| `app`         | `string`                            | `""`                                   | Optional app name. Links to / and takes visual priority over the identity.                                 |
| `themeToggle` | `boolean`                           | `true`                                 | Show the theme switch in the inline navigation and the collapsed menu.                                     |
| `navLabel`    | `string`                            | `undefined`                            | Accessible name of the navigation and mobile dialog. Defaults to the built-in text in the `Page` language. |
| `actions`     | `Snippet`                           | `undefined`                            | Compact controls before the theme switch, kept in the bar beside the menu button below `--medium`.         |

## Accessibility

Pass the current pathname so links expose aria-current. `Page`'s `lang` translates the navigation name, the menu and close buttons and the theme switch. Below the `--medium` breakpoint the links move into a modal directory owned by `Header`; actions stay in the bar at every width, so give each an accessible name.