Merge pull request #5 from hans2103/metismenu-frontend

Metismenu frontend
wilsonge · Aug 10, 2020 · c27d13a · c27d13a
2 parents 23d62a7 + 32a81f9
commit c27d13a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 57 deletions.
diff --git a/templates/cassiopeia/html/mod_menu/metismenu.php b/templates/cassiopeia/html/mod_menu/metismenu.php
@@ -10,8 +10,9 @@
 defined('_JEXEC') or die;
 
 use Joomla\CMS\Helper\ModuleHelper;
+use Joomla\CMS\WebAsset\WebAssetManager;
 
-/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
+/** @var WebAssetManager $wa */
 $wa = $app->getDocument()->getWebAssetManager();
 $wa->registerAndUseScript('metismenu', 'mm-horizontal.js', [], [], ['metismenujs']);
 

diff --git a/templates/cassiopeia/scss/blocks/_metismenu.scss b/templates/cassiopeia/scss/blocks/_metismenu.scss
@@ -1,47 +1,53 @@
 .metismenu {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-}
+  display: flex;
+  flex-direction: column;
 
-.metismenu > li {
-    -webkit-box-flex: 1;
-        -ms-flex: 1 1 0%;
-            flex: 1 1 0%;
-    display: -webkit-box;
-    display: -ms-flexbox;
+  @media (min-width: 992px) {
+    flex-direction: row;
+  }
+
+  > li {
+    flex: 1 1 0%;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
+    flex-direction: column;
     position: relative;
-}
 
-.metismenu a {
+    @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;
-}
 
-.metismenu a:hover,
-.metismenu a:focus,
-.metismenu a:active {
-    color: #f8f9fa;
-    text-decoration: none;
-    background: #0b7285;
-}
-.metismenu .mm-collapse:not(.mm-show) {
+    &:hover,
+    &:focus,
+    &:active {
+      color: #f8f9fa;
+      text-decoration: none;
+      background: #0b7285;
+    }
+  }
+
+  .mm-collapse:not(.mm-show) {
     display: none;
-}
-.metismenu .has-arrow::after {
+  }
+
+  .has-arrow::after {
     position: absolute;
     content: "";
     width: 0.5em;
@@ -55,30 +61,10 @@
     transform-origin: top;
     top: 50%;
     transition: all 0.3s ease-out;
-}
-.metismenu .mm-active > .has-arrow::after, 
-.metismenu .has-arrow[aria-expanded="true"]::after {
+  }
+
+  .mm-active > .has-arrow::after,
+  .has-arrow[aria-expanded="true"]::after {
     transform: rotate(-135deg) translate(0, -50%);
-}
-@media (min-width: 992px) {
-    .metismenu {
-        -webkit-box-orient: horizontal;
-        -webkit-box-direction: normal;
-            -ms-flex-direction: row;
-                flex-direction: row;
-    }
-    .metismenu > li {
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-                flex-direction: column;
-    }
-    .metismenu > li > ul {
-        position: absolute;
-        top: 100%;
-        min-width: 100%;
-        z-index: 1001;
-        background-color: #f8f9fa;
-        color: #333333;
-    }
+  }
 }