enhanced navbar dropdown & top-nav example

- added Dropdown.js
- added .dropdown-submenu
- added .dropdown-hover
- added dropdown example & fixed card headers in pages/layout/top-nav.html

build/js/AdminLTE.js

@@ -6,6 +6,7 @@ import DirectChat from './DirectChat'
 import TodoList from './TodoList'
 import CardWidget from './CardWidget'
 import CardRefresh from './CardRefresh'
+import Dropdown from './Dropdown'
 
 export {
   ControlSidebar,
@@ -15,5 +16,6 @@ export {
   DirectChat,
   TodoList,
   CardWidget,
-  CardRefresh
+  CardRefresh,
+  Dropdown
 }

build/js/Dropdown.js

@@ -0,0 +1,112 @@
+/**
+ * --------------------------------------------
+ * AdminLTE Dropdown.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const Dropdown = (($) => {
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'Dropdown'
+  const DATA_KEY           = 'lte.dropdown'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Selector = {
+    DROPDOWN_MENU: 'ul.dropdown-menu',
+    DROPDOWN_TOGGLE: '[data-toggle="dropdown"]',
+  }
+
+  const ClassName = {
+    DROPDOWN_HOVER: '.dropdown-hover'
+  }
+
+  const Default = {
+  }
+
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class Dropdown {
+    constructor(element, config) {
+      this._config  = config
+      this._element = element
+    }
+
+    // Public
+
+    toggleSubmenu() {
+      this._element.siblings().show().toggleClass("show");
+
+      if (! this._element.next().hasClass('show')) {
+        this._element.parents('.dropdown-menu').first().find('.show').removeClass("show").hide();
+      }
+
+      this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
+        $('.dropdown-submenu .show').removeClass("show").hide();
+      });
+
+    }
+
+    // Static
+
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let data      = $(this).data(DATA_KEY)
+        const _config = $.extend({}, Default, $(this).data())
+
+        if (!data) {
+          data = new Dropdown($(this), _config)
+          $(this).data(DATA_KEY, data)
+        }
+
+        if (config === 'toggleSubmenu') {
+          data[config]()
+        }
+      })
+    }
+  }
+
+  /**
+   * Data API
+   * ====================================================
+   */
+
+  $(Selector.DROPDOWN_MENU + ' ' + Selector.DROPDOWN_TOGGLE).on("click", function(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    Dropdown._jQueryInterface.call($(this), 'toggleSubmenu')
+  });
+
+  // $(Selector.SIDEBAR + ' a').on('focusin', () => {
+  //   $(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
+  // })
+
+  // $(Selector.SIDEBAR + ' a').on('focusout', () => {
+  //   $(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
+  // })
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = Dropdown._jQueryInterface
+  $.fn[NAME].Constructor = Dropdown
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return Dropdown._jQueryInterface
+  }
+
+  return Dropdown
+})(jQuery)
+
+export default Dropdown

build/scss/_dropdown.scss

@@ -37,6 +37,38 @@
   }
 }
 
+// Dropdown Submenu
+.dropdown-submenu {
+  position: relative;
+
+  & > a:after {
+    @include caret-right;
+    float: right;
+    margin-left: .5rem;
+    margin-top: .5rem;
+  }
+
+  & > .dropdown-menu {
+    left: 100%;
+    margin-left: 0px;
+    margin-top: 0px;
+    top: 0;
+  }
+}
+
+// Dropdown Hover
+.dropdown-hover {
+  &.nav-item.dropdown:hover,
+  .dropdown-submenu:hover,
+  &.dropdown-submenu:hover {
+    > ul.dropdown-menu {
+      display: block;
+    }
+  }
+}
+
+
+
 // Dropdown Sizes
 .dropdown-menu-xl {
   max-width: 420px;

pages/layout/top-nav.html

@@ -40,6 +40,39 @@ scratch. This page gets rid of all links and provides the needed markup only.
         <li class="nav-item d-none d-sm-inline-block">
           <a href="#" class="nav-link">Contact</a>
         </li>
+        <li class="nav-item dropdown">
+          <a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a>
+          <ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu border-0 shadow">
+            <li><a href="#" class="dropdown-item">Some action </a></li>
+            <li><a href="#" class="dropdown-item">Some other action</a></li>
+
+            <li class="dropdown-divider"></li>
+
+            <!-- Level two dropdown-->
+            <li class="dropdown-submenu">
+              <a id="dropdownSubMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">Hover for action</a>
+              <ul aria-labelledby="dropdownSubMenu2" class="dropdown-menu border-0 shadow">
+                <li>
+                  <a tabindex="-1" href="#" class="dropdown-item">level 2</a>
+                </li>
+
+                <!-- Level three dropdown-->
+                <li class="dropdown-submenu">
+                  <a id="dropdownSubMenu3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">level 2</a>
+                  <ul aria-labelledby="dropdownSubMenu3" class="dropdown-menu border-0 shadow">
+                    <li><a href="#" class="dropdown-item">3rd level</a></li>
+                    <li><a href="#" class="dropdown-item">3rd level</a></li>
+                  </ul>
+                </li>
+                <!-- End Level three -->
+
+                <li><a href="#" class="dropdown-item">level 2</a></li>
+                <li><a href="#" class="dropdown-item">level 2</a></li>
+              </ul>
+            </li>
+            <!-- End Level two -->
+          </ul>
+        </li>
       </ul>
 
       <!-- SEARCH FORM -->
@@ -207,7 +240,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
           <div class="col-lg-6">
             <div class="card">
               <div class="card-header">
-                <h5 class="m-0">Featured</h5>
+                <h5 class="card-title m-0">Featured</h5>
               </div>
               <div class="card-body">
                 <h6 class="card-title">Special title treatment</h6>
@@ -219,7 +252,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
 
             <div class="card card-primary card-outline">
               <div class="card-header">
-                <h5 class="m-0">Featured</h5>
+                <h5 class="card-title m-0">Featured</h5>
               </div>
               <div class="card-body">
                 <h6 class="card-title">Special title treatment</h6>
@@ -267,6 +300,6 @@ scratch. This page gets rid of all links and provides the needed markup only.
 <!-- Bootstrap 4 -->
 <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
 <!-- AdminLTE App -->
-<!-- <script src="../../dist/js/adminlte.min.js"></script> -->
+<script src="../../dist/js/adminlte.min.js"></script>
 </body>
 </html>