auto-hide navbar menu when item clicked on mobile

majak_uistyleguide/templates/patterns/organisms/layout/navbar.html

@@ -170,7 +170,13 @@
           {% if important_item %}
             <a
               href="#"
-              class="__js-root flex items-center decoration-1 underline-offset-4 {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}"
+              class="
+                __js-root flex items-center decoration-1 underline-offset-4
+
+                navbar__menu-item
+
+                {% if selected_item == important_item %}navbar__menu-item--selected{% endif %}
+              "
             >
               {% if not is_transparent %}
                 {% include 'patterns/atoms/icons/arrow.html' with width='27' height='28.35' %}
@@ -185,7 +191,13 @@
           {% for item in menu_items %}
             <a
               href="{{ item.url }}"
-              class="decoration-1 underline-offset-4 {% if item == selected_item %}navbar__menu-item--selected{% endif %}"
+              class="
+                decoration-1 underline-offset-4
+
+                navbar__menu-item
+
+                {% if item == selected_item %}navbar__menu-item--selected{% endif %}
+              "
             >{{ item.name }}</a>
           {% endfor %}
         </div>
@@ -241,6 +253,19 @@
       } else {
         navbar.classList.remove(transparentClass)
       }
-    };
+    }
+
+    const menuItems = document.querySelectorAll(".navbar__menu-item")
+
+    menuItems.forEach(
+      (element) => {
+        element.addEventListener(
+          "click",
+          (event) => {
+            document.getElementById("navbar__mobile-menu__toggle").checked = false
+          }
+        )
+      }
+    )
   </script>
 {% endblock %}

src/js/components/navbar/Navbar.vue

-<script>
-  import UiNavbarSubitem from "./NavbarSubitem";
-  import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
-  import { isLgScreenSize } from "../../utils";
-
-  export default {
-    components: {
-      UiNavbarSubitem,
-      UiNavbarSubitemReplacing,
-    },
-    data() {
-      return {
-        isLgScreenSize: isLgScreenSize(),
-        show: false,
-        resizeHandler: () => {
-          this.$data.isLgScreenSize = isLgScreenSize();
-        },
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        window.addEventListener("resize", this.$data.resizeHandler);
-      });
-    },
-    beforeDestroy() {
-      window.removeEventListener("resize", this.$data.resizeHandler);
-    }
-  }
-</script>

src/js/components/navbar/NavbarSubitem.vue

-<template>
-  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
-    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
-    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
-    <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
-      <slot>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import { isLgScreenSize } from "../../utils";
-
-export default {
-  data() {
-    return {
-      show: false
-    };
-  },
-  props: {
-    href: {
-      type: String,
-    },
-    label: {
-      type: String,
-    }
-  },
-  methods: {
-    onMouseEnter() {
-      if (isLgScreenSize()) {
-        this.$data.show = true;
-      }
-    },
-    onMouseLeave() {
-      if (isLgScreenSize()) {
-        this.$data.show = false;
-      }
-    },
-    handleClick(evt) {
-      // On mobile screens, first click should just toggle and redir on second one
-      if (isLgScreenSize() || this.$data.show) {
-        if (this.$props.href) {
-          window.location = this.$props.href;
-        }
-      }
-
-      this.$data.show = !this.$data.show;
-    }
-  }
-}
-</script>

src/js/components/navbar/NavbarSubitemReplacing.vue

-<template>
-  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
-    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
-    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
-    <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
-      <ul class="navbar-menu__submenu">
-        <li v-for="(item, index) in parsedItems" :key="index">
-            <a :href="item[1]" class="navbar-menu__link">{{ item[0] }}</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import { isLgScreenSize } from "../../utils";
-
-export default {
-  data() {
-    return {
-      show: false,
-      parsedItems: JSON.parse(this.items),
-    };
-  },
-  props: {
-    href: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    items: {
-      type: String,
-    }
-  },
-  methods: {
-    onMouseEnter() {
-      if (isLgScreenSize()) {
-        this.$data.show = true;
-      }
-    },
-    onMouseLeave() {
-      if (isLgScreenSize()) {
-        this.$data.show = false;
-      }
-    },
-    handleClick(evt) {
-      // On mobile screens, first click should just toggle and redir on second one
-      if (isLgScreenSize() || this.$data.show) {
-        if (this.$props.href) {
-          window.location = this.$props.href;
-        }
-      }
-
-      this.$data.show = !this.$data.show;
-    }
-  }
-}
-</script>

src/js/main.js

@@ -13,7 +13,6 @@ import ViewProvider from "./components/ViewProvider";
 import Popout from "./components/popout/Popout";
 import PopoutContent from "./components/popout/PopoutContent";
 import PopoutItem from "./components/popout/PopoutItem";
-import Navbar from "./components/navbar/Navbar";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
 import HorizontalScrollable from "./components/HorizontalScrollable";
 import CardProgram from "./components/card_program/CardProgram"
@@ -32,7 +31,6 @@ Vue.component("ui-view-provider", ViewProvider);
 Vue.component("ui-popout", Popout);
 Vue.component("ui-popout-content", PopoutContent);
 Vue.component("ui-popout-item", PopoutItem);
-Vue.component("ui-navbar", Navbar);
 Vue.component("ui-footer-collapsible", FooterCollapsible);
 Vue.component("ui-horizontal-scrollable", HorizontalScrollable);
 Vue.component("ui-candidate-primary-box", CandidatePrimaryBox);