Issue #3404302 by finnsky, smustgrave, lauriii, markconroy: Create header...

# This is so your IDE knows about the syntax for fixes and autocomplete.

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json

# The human readable name.

name: Umami header

# Status can be: "experimental", "stable", "deprecated", "obsolete".

status: experimental

# Schema for the props. We support www.json-schema.org. Learn more about the

# syntax there.

props:

  # Props are always an object with keys. Each key is a variable in your

  # component template.

  type: object

  properties:

    attributes:

      type: Drupal\Core\Template\Attribute

      title: Attributes

      description: Wrapper attributes.

    label:

      type: string

# Slots always hold arbitrary markup. We know that beforehand, so no need for

# a schema for slots.

slots:

  # The key is the name of the slot. In your template you will use

  # {% block content %}.

  logo:

    title: Logo

  dropdown:

    title: Dropdown

# This is how you take control of the keys in your library

# declaration. The overrides specified here will be merged (shallow merge) with

# the auto-generated library. The result of the merge will become the library

# for the component.

libraryOverrides:

  # Once you add a key in the overrides, you take control of it. What you type

  # here is what will end up in the library component.

  dependencies:

    - core/drupal

    - core/once

.umami-header {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 4%;

}

/* Medium */

@media screen and (min-width: 48rem) { /* 768px */

  .umami-header {

    padding-top: 0;

  }

}

/* Extra large + side margins */

@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */

  .umami-header {

    padding: 0;

  }

}

.umami-header__burger {

  width: 41px;

  height: 41px;

  margin-right: -9px;

  /* the padding, margin & transparent border means the hamburger doesn't move on focus/hover */

  padding: 0 6px;

  text-align: left;

  border: 3px solid transparent;

  border-radius: 0;

  background-color: transparent;

  line-height: 1;

}

.umami-header__burger:hover {

  background-color: transparent;

}

.umami-header__burger svg {

  display: block;

}

@media screen and (min-width: 48em) {

  .umami-header__burger {

    display: none;

  }

}

.umami-header__dropdown {

  overflow: hidden;

  flex-basis: 100%;

  max-height: 0;

  transition: max-height 0.5s ease-in;

}

@media screen and (min-width: 48em) {

  .umami-header__dropdown {

    overflow: auto;

    flex-basis: auto;

    max-height: none;

  }

}

.umami-header__burger[aria-expanded="true"] ~ .umami-header__dropdown {

  overflow-y: auto;

  /**

   * An exact max-height value must be set to make possible to animate the menu display.

   * It my not be much larger than the content because that would break the animation.

   * See: https://css-tricks.com/using-css-transitions-auto-dimensions/

   */

  max-height: 18.75rem;

}

.umami-header__logo {

  flex: 0 1 40%;

}

@media screen and (min-width: 48em) {

  .umami-header__logo {

    flex: 0 1 220px;

    margin: 2.5rem 0;

  }

}

((Drupal, once) => {

  Drupal.behaviors.umamiHeader = {

    attach(context) {

      once(

        'umami-header',

        '[aria-controls="umami-header__dropdown"]',

        context,

      ).forEach((button) => {

        button.addEventListener('click', (e) => {

          button.setAttribute(

            'aria-expanded',

            e.currentTarget.getAttribute('aria-expanded') === 'false',

          );

        });

      });

    },

  };

})(Drupal, once);

<div{{ attributes.addClass('umami-header') }}>

  <div class="umami-header__logo">

    {% block logo %}{% endblock %}

  </div>

  <button

    type="button"

    class="umami-header__burger"

    aria-controls="umami-header__dropdown"

    aria-expanded="false"

    aria-label="{{ 'Toggle the menu'|t }}"

  >

    {{ source(componentMetadata.path ~ '/icons/burger.svg') }}

  </button>

  <div class="umami-header__dropdown">

    {% block dropdown %}{% endblock %}

  </div>

  </div>

</div>