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

Issue #3404302 by finnsky, smustgrave, lauriii, markconroy: Create header component for Umami, with JS

core/profiles/demo_umami/themes/umami/components/header/header.component.yml

+# 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

core/profiles/demo_umami/themes/umami/components/header/header.css

+.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;
+  }
+}

core/profiles/demo_umami/themes/umami/components/header/header.js

+((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);

core/profiles/demo_umami/themes/umami/components/header/header.twig

+<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>

core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css

@@ -4,45 +4,15 @@
  */
 
 .menu-main {
-  overflow: hidden;
-  max-height: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
-  transition: max-height 0.5s ease-in;
   color: #000;
   font-family: "Scope One", Georgia, serif;
   font-size: 1.266rem;
   font-weight: 400;
   line-height: 1.2;
 }
-.menu-main--active {
-  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;
-}
-.menu-main-toggle {
-  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;
-}
-.menu-main-toggle:hover {
-  background-color: transparent;
-}
-.menu-main-toggle svg {
-  display: block;
-}
 .menu-main__item {
   margin-top: 0.8em;
   text-align: center;
@@ -75,13 +45,8 @@
 @media screen and (min-width: 48em) {
   .menu-main {
     display: flex;
-    overflow: auto;
     flex-wrap: wrap;
     justify-content: flex-end;
-    max-height: none;
-  }
-  .menu-main-toggle {
-    display: none;
   }
   .menu-main__item {
     margin-top: 0;
@@ -96,12 +61,6 @@
   }
 }
 
-@media screen and (min-width: 48em) {
-  .menu-main-togglewrap {
-    display: none;
-  }
-}
-
 .menu-main__wrapper {
   flex: 0 1 100%;
   text-align: center;

core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css

@@ -10,40 +10,3 @@
   padding: 0;
   background: #fff;
 }
-
-.region-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 4%;
-}
-
-@media screen and (min-width: 48em) {
-  .region-header {
-    padding-top: 0;
-  }
-}
-/* Medium */
-@media screen and (min-width: 48rem) { /* 768px */
-  .region-header {
-    padding-top: 0;
-  }
-}
-/* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
-  .region-header {
-    padding: 0;
-  }
-}
-
-.region-header .block-system-branding-block {
-  flex: 0 1 40%;
-}
-
-@media screen and (min-width: 48em) {
-  .region-header .block-system-branding-block {
-    flex: 0 1 220px;
-    margin: 2.5rem 0;
-  }
-}

core/profiles/demo_umami/themes/umami/js/components/navigation/menu-main/menu-main.js

-/**
- * @file
- * This file is used to add any javascript that is needed for the main menu.
- */
-
-(function () {
-  const toggler = document.querySelector(
-    '[data-drupal-selector="menu-main-toggle"]',
-  );
-  const menu = document.querySelector('[data-drupal-selector="menu-main"]');
-
-  function toggleMenu() {
-    toggler.classList.toggle('menu-main-toggle--active');
-    menu.classList.toggle('menu-main--active');
-    return false;
-  }
-
-  toggler.addEventListener('click', toggleMenu);
-})();

core/profiles/demo_umami/themes/umami/templates/components/navigation/block--umami-main-menu.html.twig

-{#
-/**
- * @file
- * Theme override for a menu block.
- *
- * Available variables:
- * - plugin_id: The ID of the block implementation.
- * - label: The configured label of the block if visible.
- * - configuration: A list of the block's configuration values.
- *   - label: The configured label for the block.
- *   - label_display: The display settings for the label.
- *   - provider: The module or other provider that provided this block plugin.
- *   - Block plugin specific settings will also be stored here.
- * - in_preview: Whether the plugin is being rendered in preview mode.
- * - content: The content of this block.
- * - attributes: HTML attributes for the containing element.
- *   - id: A valid HTML ID and guaranteed unique.
- * - title_attributes: HTML attributes for the title element.
- * - content_attributes: HTML attributes for the content element.
- * - title_prefix: Additional output populated by modules, intended to be
- *   displayed in front of the main title tag that appears in the template.
- * - title_suffix: Additional output populated by modules, intended to be
- *   displayed after the main title tag that appears in the template.
- *
- * Headings should be used on navigation menus that consistently appear on
- * multiple pages. When this menu block's label is configured to not be
- * displayed, it is automatically made invisible using the 'visually-hidden' CSS
- * class, which still keeps it visible for screen-readers and assistive
- * technology. Headings allow screen-reader and keyboard only users to navigate
- * to or skip the links.
- * See http://juicystudio.com/article/screen-readers-display-none.php and
- * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
- */
-#}
-{%
-  set classes = [
-    'block',
-    'block-menu',
-    'navigation',
-    'menu-' ~ derivative_plugin_id|clean_class ~ '__wrapper',
-  ]
-%}
-
-<div class="menu-main-togglewrap">
-  <button type="button" name="menu_toggle" class="menu-main-toggle" data-drupal-selector="menu-main-toggle" aria-label="Toggle the menu">{% include active_theme_path() ~ '/images/svg/menu-icon.svg' %}</button>
-</div>
-
-{% set heading_id = attributes.id ~ '-menu'|clean_id %}
-<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
-  {# Label. If not displayed, we still provide it for screen readers. #}
-  {% if not configuration.label_display %}
-    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
-  {% endif %}
-  {{ title_prefix }}
-  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
-  {{ title_suffix }}
-
-  {# Menu. #}
-  {% block content %}
-    {{ content }}
-  {% endblock %}
-</nav>

core/profiles/demo_umami/themes/umami/templates/layout/region--header.html.twig

+{#
+/**
+ * @file
+ * Theme override to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ */
+#}
+{%
+  set classes = [
+    'region',
+    'region-' ~ region|clean_class,
+  ]
+%}
+
+{% embed "umami:header" with {
+  attributes,
+} %}
+  {% block logo %}
+    {{ elements.umami_branding }}
+  {% endblock %}
+  {% block dropdown %}
+    {{ elements.umami_main_menu }}
+  {% endblock %}
+{% endembed %}

core/profiles/demo_umami/themes/umami/umami.libraries.yml

@@ -46,8 +46,6 @@ global:
       css/layout/grid-3.css: {}
       css/layout/grid-4.css: {}
       css/layout/layout.css: {}
-  js:
-    js/components/navigation/menu-main/menu-main.js: {}
 
 messages:
   css: