[#2625] Processed codereview for mobile nav

INSTALL.rst

@@ -132,6 +132,9 @@ using ``npm run watch``.
 .. _ECMA: https://ecma-international.org/
 .. _Sass: https://sass-lang.com/
 
+**Note:** The project makes use of the `open-inwoner-design-tokens package`_ , a node module which contains the values for the project's design tokens from the NL Design System.
+
+.. _open-inwoner-design-tokens package: https://github.com/maykinmedia/open-inwoner-design-tokens
 
 ElasticSearch
 -------------

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

@@ -30,17 +30,6 @@ class Header extends Component {
    * Focus is split to be handled in Safari
    */
   bindEvents() {
-    this.node.addEventListener('click', (e) => {
-      /**
-       * Remove focus from search in order to prevent native keyboard on mobile
-       */
-      const blurInput = document.querySelectorAll(
-        '.header__submenu .form .input'
-      )
-      blurInput.forEach((elem) => {
-        elem.blur()
-      })
-    })
     this.node.addEventListener('click', this.toggleMobileNavOpen.bind(this))
     this.node.addEventListener('focusout', this.onFocusMobileOut.bind(this))
     window.addEventListener('keyup', this.onEscape.bind(this))

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

@@ -331,7 +331,7 @@ $vm: var(--spacing-large);
     left: 0;
     margin: 0;
     max-width: 100%;
-    padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
+    padding: 0 var(--spacing-medium) 0 var(--spacing-medium);
     position: initial;
     right: 0;
     top: calc(2 * var(--row-height));
@@ -509,7 +509,7 @@ $vm: var(--spacing-large);
             }
 
             .link {
-              gap: var(--spacing-medium);
+              gap: var(--spacing-large);
               vertical-align: bottom;
             }
           }