Navigation Bar

Sub Navigation

Autosmmdlgxl

volvocars.com

Show codeHide code

import { IconButton, Wordmark } from '@volvo-cars/react-icons';
import type { CSSProperties } from 'react';
import { useState } from 'react';

const staticNavigationStyle: CSSProperties &
  Record<'--navigation-bar-position', 'static'> = {
  '--navigation-bar-position': 'static',
};

export function SubNavigation() {
  const [open, setOpen] = useState(false);

  return (
    <div style={{ maxHeight: 320, overflow: 'auto' }}>
      <nav
        className="navigation-bar"
        aria-label="Main navigation"
        style={open ? staticNavigationStyle : undefined}
      >
        <div slot="start">
          <button
            type="button"
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
            className="tap-area p-8 -ml-8"
          >
            Our Cars
          </button>
        </div>
        <a slot="center" href="#top" className="py-16 px-8">
          <Wordmark />
        </a>
        <div slot="end">
          <IconButton
            icon="search"
            variant="clear"
            size="large"
            bleed
            aria-label="Search"
          />
        </div>
      </nav>

      {open && (
        <nav className="navigation-bar bg-secondary" aria-label="Our Cars">
          <div slot="start">
            <a href="#top" className="tap-area p-8 -ml-8">
              EX30
            </a>
            <a href="#top" className="tap-area p-8">
              EX90
            </a>
          </div>
          <div slot="end">
            <IconButton
              icon="x"
              variant="clear"
              bleed
              aria-label="Close sub-navigation"
              onClick={() => setOpen(false)}
            />
          </div>
        </nav>
      )}

      <div style={{ height: 600 }} className="bg-secondary pt-24 pagelayout">
        <p className="text-secondary">
          {open
            ? 'Scroll to see the sub-navigation stick while the main bar scrolls away.'
            : 'Click Our Cars to open the sub-navigation.'}
        </p>
      </div>
    </div>
  );
}