[#2625] Add close button

INSTALL.rst

@@ -60,12 +60,6 @@ development machine.
 
        git clone [email protected]:maykinmedia/open-inwoner.git
        cd open-inwoner
-       # initialize submodules
-       git submodule update --init --recursive
-
-This will include the `Open-Inwoner-Design-Tokens`_ subdirectory. When all is built and run this is where the OIP design tokens CSS will be generated. When this repository gets updated, it needs to be pulled again.
-
-.. _Open-Inwoner-Design-Tokens: https://github.com/maykinmedia/open-inwoner-design-tokens
 
 3. Install all required (backend) libraries.
    **Tip:** You can use the ``bootstrap.py`` script to install the requirements

src/open_inwoner/components/templates/components/Header/Header.html

@@ -35,7 +35,7 @@
         <div class="header--mobile header__submenu">
 
             <div class="header--mobile__close">
-                {% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="close-mobilenav" %}
+                {% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="close-mobilenav" id="closeMobileNav" %}
             </div>
 
             <nav class="primary-navigation primary-navigation--mobile" aria-label="Hoofd navigatie">

src/open_inwoner/js/components/header/header.js

@@ -20,6 +20,10 @@ export const interactiveButton = document.querySelectorAll('.header__button')
  * Controls the main header and interaction with the mobile menu and dismissing it using the escape key.
  */
 class Header extends Component {
+  constructor(node, initialState = { dismissed: false }) {
+    super(node, initialState)
+  }
+
   /**
    * Binds events to callbacks.
    * Callbacks should trigger `setState` which in turn triggers `render`.
@@ -40,6 +44,11 @@ class Header extends Component {
     this.node.addEventListener('click', this.toggleMobileNavOpen.bind(this))
     this.node.addEventListener('focusout', this.onFocusMobileOut.bind(this))
     window.addEventListener('keyup', this.onEscape.bind(this))
+
+    const closeMobileNav = document.getElementById('closeMobileNav') // Use ID to reference the close button
+    if (closeMobileNav) {
+      closeMobileNav.addEventListener('click', this.closeMenu.bind(this))
+    }
   }
 
   /**
@@ -71,10 +80,19 @@ class Header extends Component {
     window.scrollTo(0, 0)
   }
 
+  /**
+   * Only if body--open exists, handle close-button.
+   */
+  closeMenu() {
+    if (document.body.classList.contains('body--open')) {
+      document.body.classList.remove('body--open')
+    }
+  }
+
   /**
    * Gets called when a key is released.
    * If key is escape key, explicitly close the mobile menu.
-   //* @param {KeyboardEvent} event
+   * @param {KeyboardEvent} event
    */
   onEscape(event) {
     if (event.key === 'Escape') {

src/open_inwoner/scss/components/Header/Header.scss

@@ -212,8 +212,20 @@ $vm: var(--spacing-large);
   }
 
   // header--mobile
+  &--mobile__close {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--spacing-medium) 0;
+
+    .button [class*='icons'] {
+      font-size: 24px;
+    }
+  }
+
   &__submenu {
     border-top: 1px solid var(--color-gray-light);
+    border-top-left-radius: var(--spacing-medium);
+    border-top-right-radius: var(--spacing-medium);
     border-bottom: 1px solid var(--color-gray-light);
     border-left: none;
     border-right: none;
@@ -224,15 +236,15 @@ $vm: var(--spacing-large);
     height: 100vh;
     left: 0;
     margin: 0;
-    max-height: calc(100% - (2 * var(--row-height)));
+    max-height: 100%;
     max-width: 100%;
     overflow-y: auto;
     padding: 0 var(--spacing-large) var(--spacing-extra-large)
       var(--spacing-large);
-    position: relative;
+    position: absolute;
     right: 0;
     text-align: left;
-    top: 0;
+    top: var(--spacing-medium);
     width: 100%;
     z-index: 2;