Skip to main content

@marketdataapp/ui / Site Header

Site Header

The marketdata.app header, rendered to HTML on the server by renderHeader() and wired on the client by initHeader(). Resize the window: the nav links give way to the hamburger when the row cannot hold them, measured rather than at a breakpoint. The drawer, the mega menus, both theme toggles and the account control are all live on this page.

Usage

Render on the server, emit the string in the initial HTML, initialise once on the client. In Astro: 

---
import { renderHeader } from '@marketdataapp/ui/header';
import { getImage } from 'astro:assets';
import logoLight from '@marketdataapp/ui/assets/brand/logo-on-light.png';
import logoDark from '@marketdataapp/ui/assets/brand/logo-on-dark.png';

const [light, dark] = await Promise.all(
  [logoLight, logoDark].map((src) =>
    getImage({ src, widths: [160, 320], sizes: '160px', format: 'webp' }),
  ),
);

const html = renderHeader({
  currentPath: Astro.url.pathname,
  logo: {
    light: { src: light.src, srcset: light.srcSet.attribute, sizes: '160px' },
    dark: { src: dark.src, srcset: dark.srcSet.attribute, sizes: '160px' },
  },
});
---
<Fragment set:html={html} />
<script>
  import { initHeader } from '@marketdataapp/ui/header-client';
  initHeader();
</script>

The full option list, the data catalogue, the slots and the application integration (own account control, login return URL) are in the README under Site Header.

Live state

nav links
drawer
…
open mega menu
…
header ready
…

Page content

This block exists so the drawer has something to sit over and so the skip link has somewhere to land. While the drawer is open, this <main> is inert: Tab cannot reach the paragraph below and the page does not scroll.

A focusable link in the page content.