Class Header

Header component

Preserve

Hierarchy

  • GOVUKFrontendComponent
    • Header

Constructors

constructor

Properties

$menu $menuButton $module menuIsOpen mql moduleName

Methods

checkMode handleMenuButtonClick setupResponsiveChecks

Constructors

constructor

  • new Header($module): Header

  • Apply a matchMedia for desktop which will trigger a state sync if the browser viewport moves between states.

    Parameters

    • $module: Element

      HTML element to use for header

    Returns Header

Properties

Private $menu

$menu: HTMLElement

Private $menuButton

$menuButton: Element

Private $module

$module: Element

Private menuIsOpen

menuIsOpen: boolean = false

Save the opened/closed state for the nav in memory so that we can accurately maintain state when the screen is changed from small to big and back to small

Private mql

mql: MediaQueryList = null

A global const for storing a matchMedia instance which we'll use to detect when a screen size change happens. We rely on it being null if the feature isn't available to initially apply hidden attributes

Static moduleName

moduleName: string = 'govuk-header'

Name for the component used when initialising using data-module attributes.

Methods

Private checkMode

  • checkMode(): void
  • Private

    Sync menu state

    Uses the global variable menuIsOpen to correctly set the accessible and visual states of the menu and the menu button. Additionally will force the menu to be visible and the menu button to be hidden if the matchMedia is triggered to desktop.

    Returns void

Private handleMenuButtonClick

  • handleMenuButtonClick(): void
  • Private

    Handle menu button click

    When the menu button is clicked, change the visibility of the menu and then sync the accessibility state and menu button state

    Returns void

Private setupResponsiveChecks

Settings

Member Visibility

Theme

On This Page

constructor$menu$menuButton$modulemenuIsOpenmqlmoduleNamecheckModehandleMenuButtonClicksetupResponsiveChecks