Merge pull request #7 from hans2103/metismenu-frontend

Metismenu frontend
hans2103 · Aug 10, 2020 · f271621 · f271621
2 parents 9c229e5 + c9fefdf
commit f271621
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 79 deletions.
diff --git a/templates/cassiopeia/html/mod_menu/metismenu.php b/templates/cassiopeia/html/mod_menu/metismenu.php
@@ -19,7 +19,7 @@
 
 $ulAttribs = [
 		'id'    => $params->get('tag_id', ''),
-		'class' => 'mod-menu metismenu ' . $class_sfx . ' mod-list'
+		'class' => 'mod-menu mod-menu_metismenu metismenu' . $class_sfx . ' mod-list'
 ];
 
 // The menu class is deprecated. Use mod-menu instead

diff --git a/templates/cassiopeia/js/mm-horizontal.js b/templates/cassiopeia/js/mm-horizontal.js
@@ -1,10 +1,8 @@
 document.addEventListener("DOMContentLoaded", function(event) {
-  const mm1 = new MetisMenu("#menu").on("shown.metisMenu", function(event) {
-    window.addEventListener("click", function mmClick1(e) {
-      if (!event.target.contains(e.target)) {
-        mm1.hide(event.detail.shownElement);
-        window.removeEventListener("click", mmClick1);
-      }
-    });
-  });
+	const allMenus = document.querySelectorAll('ul.mod-menu_metismenu');
+
+	allMenus.forEach(menu => {
+		// eslint-disable-next-line no-new, no-undef
+		new MetisMenu(menu);
+	});
 });
diff --git a/templates/cassiopeia/scss/_variables.scss b/templates/cassiopeia/scss/_variables.scss
@@ -179,3 +179,6 @@ $zindex-tooltip:                   1070;
 $zindex-mobile-bottom:             8000;
 $zindex-mobile-toggle:             9999;
 $zindex-mobile-menu:               9000;
+
+// MetisMenu
+$metismenu:                        true !default;
diff --git a/templates/cassiopeia/scss/blocks/_metismenu.scss b/templates/cassiopeia/scss/blocks/_metismenu.scss
diff --git a/templates/cassiopeia/scss/template.scss b/templates/cassiopeia/scss/template.scss
@@ -58,6 +58,7 @@
 @import "vendor/bootstrap/table";
 @import "vendor/chosen";
 @import "vendor/dragula";
+@import "vendor/metismenu/metismenu";
 @import "vendor/minicolors";
 @import "vendor/tinymce";
 

diff --git a/templates/cassiopeia/scss/vendor/metismenu/_metismenu.scss b/templates/cassiopeia/scss/vendor/metismenu/_metismenu.scss
@@ -0,0 +1,72 @@
+@if $metismenu == true {
+  .metismenu {
+    display: flex;
+    flex-direction: column;
+
+    @media (min-width: 992px) {
+      flex-direction: row;
+    }
+
+    > li {
+      flex: 1 1 0%;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      @media (min-width: 992px) {
+        flex-direction: column;
+
+        > ul {
+          position: absolute;
+          top: 100%;
+          min-width: 100%;
+          z-index: 1001;
+          background-color: #f8f9fa;
+          color: #333333;
+        }
+      }
+    }
+
+    a {
+      position: relative;
+      display: block;
+      padding: 15px;
+      color: #adb5bd;
+      outline-width: 0;
+      transition: all .3s ease-out;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: #f8f9fa;
+        text-decoration: none;
+        background: #0b7285;
+      }
+    }
+
+    .mm-collapse:not(.mm-show) {
+      display: none;
+    }
+
+    .has-arrow::after {
+      position: absolute;
+      content: "";
+      width: 0.5em;
+      height: 0.5em;
+      border-width: 1px 0 0 1px;
+      border-style: solid;
+      border-color: currentColor;
+      border-color: initial;
+      right: 1em;
+      transform: rotate(-45deg) translate(0, -50%);
+      transform-origin: top;
+      top: 50%;
+      transition: all 0.3s ease-out;
+    }
+
+    .mm-active > .has-arrow::after,
+    .has-arrow[aria-expanded="true"]::after {
+      transform: rotate(-135deg) translate(0, -50%);
+    }
+  }
+}