Ticket #3399 - Sandwich main menu on mobile.

modules/boonex/artificer/data/template/bx_organizations/unit.html

@@ -0,0 +1 @@
+<bx_include_auto_mod_profile:unit.html />

modules/boonex/artificer/data/template/system/_header_js_custom.html

@@ -1,6 +1,82 @@
 <script language="javascript">
     $(document).ready(function () {
         bx_activate_anim_icons('#283C50');
+        
+        /*--- Sandwich Menu: BEG ---*/
+        var sidebarTrigger = $('.cd-nav-trigger');
+
+        //mobile only - open sidebar when user clicks the hamburger menu
+        sidebarTrigger.on('click', function(event) {
+            event.preventDefault();
+
+            $(sidebarTrigger).toggleClass('nav-is-visible');
+        });
+        /*--- Sandwich Menu: AND ---*/
+
+
+        /*--- Dropdown Menu: BEG ---*/
+        //open/close mega-navigation
+        $('.cd-dropdown-trigger').on('click', function(event){
+            event.preventDefault();
+            toggleNav();
+        });
+
+        //close meganavigation
+        $('.cd-dropdown .cd-close').on('click', function(event){
+            event.preventDefault();
+            toggleNav();
+
+            $(sidebarTrigger).toggleClass('nav-is-visible');
+        });
+
+        //on mobile - open submenu
+        $('.has-children').children('a').on('click', function(event){
+            //prevent default clicking on direct children of .has-children 
+            event.preventDefault();
+            var selected = $(this);
+            selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
+        });
+
+        //on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
+        var submenuDirection = ( !$('.cd-dropdown-wrapper').hasClass('open-to-left') ) ? 'right' : 'left';
+        $('.cd-dropdown-content').menuAim({
+            activate: function(row) {
+                $(row).children().addClass('is-active').removeClass('fade-out');
+                if( $('.cd-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
+            },
+            deactivate: function(row) {
+                $(row).children().removeClass('is-active');
+                if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
+                    $('.cd-dropdown-content').find('.fade-in').removeClass('fade-in');
+                    $(row).children('ul').addClass('fade-out')
+                }
+            },
+            exitMenu: function() {
+                $('.cd-dropdown-content').find('.is-active').removeClass('is-active');
+                return true;
+            },
+            submenuDirection: submenuDirection,
+        });
+
+        //submenu items - go back link
+        $('.go-back').on('click', function(){
+            var selected = $(this),
+                visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
+            selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
+        }); 
+
+        function toggleNav(){
+            var navIsVisible = ( !$('.cd-dropdown').hasClass('dropdown-is-active') ) ? true : false;
+            $('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible);
+            $('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible);
+            if( !navIsVisible ) {
+                $('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
+                    $('.has-children ul').addClass('is-hidden');
+                    $('.move-out').removeClass('move-out');
+                    $('.is-active').removeClass('is-active');
+                }); 
+            }
+        }
     });
 
     function bx_site_search_complete(oContainer, oData) {

modules/boonex/artificer/data/template/system/css/menu-dropdown.css

@@ -0,0 +1,890 @@
+/*--- Reset ---*/
+.cd-dropdown *, 
+.cd-dropdown *::after, 
+.cd-dropdown *::before {
+  box-sizing: border-box;
+}
+.cd-dropdown ol,
+.cd-dropdown li {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+.cd-dropdown li {
+    display: list-item;
+    text-align: -webkit-match-parent;
+}
+.cd-dropdown li.bx-menu-item-cd-more-auto {
+    display: none;
+}
+
+/*--- Main Components ---*/
+.cd-dropdown .cd-dropdown-content a,
+.cd-dropdown .cd-dropdown-content ul a {
+  height: 3.5rem;
+  line-height: 3.5rem;
+}
+
+.cd-dropdown .cd-dropdown-content a,
+.cd-dropdown .cd-dropdown-content ul a,
+.cd-dropdown .cd-dropdown-content .cd-divider {
+  padding: 0 20px;
+}
+
+.cd-dropdown {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #ffffff;
+  visibility: hidden;
+  /* Force Hardware Acceleration */
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-transform: translateY(-100%);
+  -moz-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  -o-transform: translateY(-100%);
+  transform: translateY(-100%);
+  -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
+  -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
+  transition: transform 0.5s 0s, visibility 0s 0.5s;
+}
+.cd-dropdown .cd-dropdown-title {
+  position: relative;
+  z-index: 1;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.cd-dropdown.dropdown-is-active {
+  visibility: visible;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+  -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0s;
+  -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0s;
+  transition: transform 0.5s 0s, visibility 0s 0s;
+}
+
+/* 
+ * Note: Currently this menu 
+ * isn't used on Desktop view
+ */
+.bx-media-tablet .cd-dropdown,
+.bx-media-desktop .cd-dropdown {
+    display: none;
+}
+
+.cd-dropdown .cd-dropdown-content, 
+.cd-dropdown .cd-dropdown-content ul {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-transition: -webkit-transform 0.3s;
+  -moz-transition: -moz-transform 0.3s;
+  transition: transform 0.3s;
+  list-style: none;
+}
+
+.cd-dropdown .cd-dropdown-content li > a {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.cd-dropdown .cd-dropdown-content a, 
+.cd-dropdown .cd-dropdown-content ul a {
+  display: block;
+  
+  border-top-width: 1px;
+  border-color: rgba(255,255,255,0.1);
+  border-style: solid;
+
+  /* truncate text with ellipsis if too long */
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  white-space: nowrap;
+}
+
+.cd-dropdown .cd-dropdown-content a .sys-icon, 
+.cd-dropdown .cd-dropdown-content ul a .sys-icon,
+.cd-dropdown .cd-dropdown-content a img:not(.bx-def-thumb), 
+.cd-dropdown .cd-dropdown-content ul a img:not(.bx-def-thumb) {
+	width: 1.5rem;
+	height: 1.5rem;
+	margin-right: 0.625rem;
+}
+
+.cd-dropdown .cd-dropdown-content a .sys-icon, 
+.cd-dropdown .cd-dropdown-content ul a .sys-icon {
+	line-height: 1.5rem;
+	text-align: center;
+}
+
+.cd-dropdown .cd-dropdown-content a img:not(.bx-def-thumb), 
+.cd-dropdown .cd-dropdown-content ul a img:not(.bx-def-thumb) {
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+.cd-dropdown .cd-dropdown-content li:first-of-type > a, 
+.cd-dropdown .cd-dropdown-content ul li:first-of-type > a {
+  border-top-width: 0;
+}
+.cd-dropdown .cd-dropdown-content li:last-of-type > a, 
+.cd-dropdown .cd-dropdown-content ul li:last-of-type > a {
+  border-bottom-width: 1px;
+}
+.cd-dropdown .cd-dropdown-content .cd-divider, 
+.cd-dropdown .cd-dropdown-content ul .cd-divider {
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
+  background-color: rgba(2, 33, 45, 1.0);
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.5);
+}
+.cd-dropdown .cd-dropdown-content .cd-divider + li > a, 
+.cd-dropdown .cd-dropdown-content ul .cd-divider + li > a {
+  border-top-width: 0;
+}
+.cd-dropdown .cd-dropdown-content a, 
+.cd-dropdown .cd-dropdown-content .bx-lcd-mdd-search, 
+.cd-dropdown .cd-dropdown-content .bx-lcd-login,
+.cd-dropdown .cd-dropdown-content .bx-lcd-mdd-profile,
+.cd-dropdown .cd-dropdown-content .cd-divider, 
+.cd-dropdown .cd-dropdown-content ul a, 
+.cd-dropdown .cd-dropdown-content ul .bx-lcd-mdd-search, 
+.cd-dropdown .cd-dropdown-content ul .bx-lcd-login,
+.cd-dropdown .cd-dropdown-content ul .bx-lcd-mdd-profile,
+.cd-dropdown .cd-dropdown-content ul .cd-divider {
+  /* Force Hardware Acceleration */
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
+  transition: opacity 0.3s, transform 0.3s;
+}
+.cd-dropdown .cd-dropdown-content.is-hidden, 
+.cd-dropdown .cd-dropdown-content ul.is-hidden {
+  /* push the secondary dropdown items to the right */
+  -webkit-transform: translateX(100%);
+  -moz-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  -o-transform: translateX(100%);
+  transform: translateX(100%);
+}
+.cd-dropdown .cd-dropdown-content.is-hidden > li > a, 
+.cd-dropdown .cd-dropdown-content.is-hidden > li > .bx-lcd-login,
+.cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-search, 
+.cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-profile,  
+.cd-dropdown .cd-dropdown-content.is-hidden > .cd-divider, 
+.cd-dropdown .cd-dropdown-content.move-out > li > a, 
+.cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
+.cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search, 
+.cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,  
+.cd-dropdown .cd-dropdown-content.move-out > .cd-divider, 
+.cd-dropdown .cd-dropdown-content ul.is-hidden > li > a, 
+.cd-dropdown .cd-dropdown-content ul.is-hidden > li > .bx-lcd-login,
+.cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-search,
+.cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-profile,
+.cd-dropdown .cd-dropdown-content ul.is-hidden > .cd-divider, 
+.cd-dropdown .cd-dropdown-content ul.move-out > li > a, 
+.cd-dropdown .cd-dropdown-content ul.move-out > li > .bx-lcd-login,
+.cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-search, 
+.cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-profile,  
+.cd-dropdown .cd-dropdown-content ul.move-out > .cd-divider {
+  /* lower down the dropdown items opacity - when secondary dropdown slides in or for dropdown items hidden on the right */
+  opacity: 0;
+}
+.cd-dropdown .cd-dropdown-content.move-out > li > a, 
+.cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
+.cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
+.cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
+.cd-dropdown .cd-dropdown-content.move-out > .cd-divider, 
+.cd-dropdown .cd-dropdown-content ul.move-out > li > a, 
+.cd-dropdown .cd-dropdown-content ul.move-out > li > .bx-lcd-login,
+.cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-search,
+.cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-profile,
+.cd-dropdown .cd-dropdown-content ul.move-out > .cd-divider {
+  /* push the dropdown items to the left when secondary dropdown slides in */
+  -webkit-transform: translateX(-100%);
+  -moz-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  -o-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+.dropdown-is-active .cd-dropdown-content, 
+.dropdown-is-active .cd-dropdown-content ul {
+  -webkit-overflow-scrolling: touch;
+}
+@media only screen and (min-width: 768px) {
+  .cd-dropdown .cd-dropdown-content, .cd-dropdown-content ul {
+    padding-top: 60px;
+  }
+  .cd-dropdown .cd-dropdown-content a, .cd-dropdown-content ul a {
+    font-size: 1.8rem;
+  }
+}
+@media only screen and (min-width: 1024px) {
+  .cd-dropdown .cd-dropdown-content, 
+  .cd-dropdown .cd-dropdown-content ul {
+    padding-top: 0;
+    overflow: visible;
+  }
+  .cd-dropdown .cd-dropdown-content a, 
+  .cd-dropdown .cd-dropdown-content ul a {
+    color: #111433;
+    height: 3.5rem;
+    line-height: 3.5rem;
+    font-size: 1.5rem;
+    border-color: #ebebeb;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-divider, 
+  .cd-dropdown .cd-dropdown-content ul .cd-divider {
+    background-color: transparent;
+    color: #b3b3b3;
+    border-top: 1px solid #ebebeb;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-divider + li > a, 
+  .cd-dropdown .cd-dropdown-content ul .cd-divider + li > a {
+    border-top-width: 1px;
+  }
+  .cd-dropdown .cd-dropdown-content.is-hidden > li > a, 
+    .cd-dropdown .cd-dropdown-content.is-hidden > li > .bx-lcd-login,
+  .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-search,
+  .cd-dropdown .cd-dropdown-content.is-hidden > .bx-lcd-mdd-profile,
+  .cd-dropdown .cd-dropdown-content.is-hidden > .cd-divider, 
+  .cd-dropdown .cd-dropdown-content.move-out > li > a, 
+    .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
+  .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
+  .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
+  .cd-dropdown .cd-dropdown-content.move-out > .cd-divider, 
+  .cd-dropdown .cd-dropdown-content ul.is-hidden > li > a, 
+  .cd-dropdown .cd-dropdown-content ul.is-hidden > li > .bx-lcd-login,
+  .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-search,
+  .cd-dropdown .cd-dropdown-content ul.is-hidden > .bx-lcd-mdd-profile,
+  .cd-dropdown .cd-dropdown-content ul.is-hidden > .cd-divider, 
+  .cd-dropdown .cd-dropdown-content ul.move-out > li > a, 
+  .cd-dropdown .cd-dropdown-content ul.move-out > li > .bx-lcd-login,
+  .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-search,
+  .cd-dropdown .cd-dropdown-content ul.move-out > .bx-lcd-mdd-profile,
+  .cd-dropdown .cd-dropdown-content ul.move-out > .cd-divider {
+    /* reset mobile style */
+    opacity: 1;
+  }
+}
+
+.cd-dropdown .cd-dropdown-content .see-all a {
+  /* different style for the See all links */
+  color: #3f8654;
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, 
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
+  /* items with picture (or icon) and title */
+  height: 80px;
+  line-height: 80px;
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item h3, 
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
+  /* truncate text with ellipsis if too long */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
+  padding-left: 90px;
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-gallery img {
+  position: absolute;
+  display: block;
+  height: 40px;
+  width: auto;
+  left: 20px;
+  top: 50%;
+  margin-top: -20px;
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
+  padding-left: 75px;
+  position: relative;
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
+  color: #111433;
+  font-size: 1.3rem;
+  /* hide description on small devices */
+  display: none;
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
+  /* item icon */
+  content: '';
+  display: block;
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  margin-top: -20px;
+  width: 40px;
+  height: 40px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 40px 40px;
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-1::before {
+  background-image: url("../img/nucleo-icon-1.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-2::before {
+  background-image: url("../img/nucleo-icon-2.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-3::before {
+  background-image: url("../img/nucleo-icon-3.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-4::before {
+  background-image: url("../img/nucleo-icon-4.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-5::before {
+  background-image: url("../img/nucleo-icon-5.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-6::before {
+  background-image: url("../img/nucleo-icon-6.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-7::before {
+  background-image: url("../img/nucleo-icon-7.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-8::before {
+  background-image: url("../img/nucleo-icon-8.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-9::before {
+  background-image: url("../img/nucleo-icon-9.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-10::before {
+  background-image: url("../img/nucleo-icon-10.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-11::before {
+  background-image: url("../img/nucleo-icon-11.svg");
+}
+.cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-12::before {
+  background-image: url("../img/nucleo-icon-12.svg");
+}
+@media only screen and (min-width: 1024px) {
+  .cd-dropdown .cd-dropdown-content {
+    /* reset mobile style */
+    position: static;
+    height: auto;
+    width: 280px;
+  }
+  .cd-dropdown .cd-dropdown-content > li:last-of-type a {
+    border-bottom: none;
+  }
+  .no-touchevents .cd-dropdown .cd-dropdown-content > li:not(.has-children) a:hover {
+    color: #3f8654;
+  }
+  .cd-dropdown .cd-dropdown-content.move-out > li > a, 
+  .cd-dropdown .cd-dropdown-content.move-out > li > .bx-lcd-login,
+  .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-search,
+  .cd-dropdown .cd-dropdown-content.move-out > .bx-lcd-mdd-profile,
+  .cd-dropdown .cd-dropdown-content.move-out > .cd-divider {
+    /* reset mobile style */
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+    left: 100%;
+    height: auto;
+    background-color: #ffffff;
+    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown::after, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery::after, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+  .open-to-left .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown, 
+  .open-to-left .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
+  .open-to-left .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
+    /* use the .open-to-left class if you want to open the dropdown on the left */
+    left: auto;
+    right: 100%;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.is-hidden, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.is-hidden, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.is-hidden {
+    /* reset mobile style */
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.fade-in, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.fade-in, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.fade-in {
+    /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
+    -webkit-animation: cd-fade-in 0.2s;
+    -moz-animation: cd-fade-in 0.2s;
+    animation: cd-fade-in 0.2s;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.fade-out, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery.fade-out, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons.fade-out {
+    /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
+    -webkit-animation: cd-fade-out 0.2s;
+    -moz-animation: cd-fade-out 0.2s;
+    animation: cd-fade-out 0.2s;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .go-back, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .go-back, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .go-back {
+    display: none;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all {
+    position: absolute;
+    bottom: 20px;
+    height: 45px;
+    text-align: center;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all a, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all a, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all a {
+    margin: 0;
+    height: 100%;
+    line-height: 45px;
+    background: #ebebeb;
+    pointer-events: auto;
+    -webkit-transition: color 0.2s, background-color 0.2s;
+    -moz-transition: color 0.2s, background-color 0.2s;
+    transition: color 0.2s, background-color 0.2s;
+  }
+  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > .see-all a:hover, 
+  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all a:hover, 
+  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all a:hover {
+    color: #ffffff;
+    background-color: #111433;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .cd-dropdown-item, 
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery a, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons a {
+    border: none;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
+    padding: 20px 30px 100px;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > .see-all, 
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > .see-all {
+    width: calc(100% - 60px);
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons > li, 
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li {
+    width: 50%;
+    float: left;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown {
+    overflow: hidden;
+    width: 550px;
+    padding-bottom: 65px;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown::before {
+    /* this is the separation line in the middle of the .cd-secondary-dropdown element */
+    position: absolute;
+    content: '';
+    top: 290px;
+    left: 15px;
+    height: 1px;
+    width: 520px;
+    background-color: #ebebeb;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a {
+    color: #3f8654;
+    font-size: 1.6rem;
+    margin-bottom: 10px;
+    line-height: 30px;
+    height: 30px;
+    pointer-events: none;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a::after, 
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > a::before {
+    /* hide the arrow */
+    display: none;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown.move-out > li > a {
+    /* reset mobile style */
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    -ms-transform: translateX(0);
+    -o-transform: translateX(0);
+    transform: translateX(0);
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li {
+    margin: 20px 0;
+    border-right-width: 1px;
+    border-color: #ebebeb;
+    border-style: solid;
+    padding: 0 30px;
+    height: 250px;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li:nth-of-type(2n) {
+    border-right-width: 0;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > ul {
+    /* reset mobile style */
+    -webkit-transform: translate(0);
+    -moz-transform: translate(0);
+    -ms-transform: translate(0);
+    -o-transform: translate(0);
+    transform: translate(0);
+    position: relative;
+    height: auto;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown > li > ul > .go-back {
+    display: none;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a {
+    line-height: 25px;
+    height: 25px;
+    font-size: 1.3rem;
+    padding-left: 0;
+  }
+  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown a:hover {
+    color: #3f8654;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown ul {
+    padding-bottom: 25px;
+    overflow: hidden;
+    height: auto;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a {
+    padding-left: 20px;
+    color: transparent;
+  }
+  .no-touchevents .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a:hover {
+    color: transparent;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a::before, 
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .go-back a::after {
+    left: 0;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-secondary-dropdown .see-all {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery {
+    width: 600px;
+    padding-bottom: 100px;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li {
+    width: 48%;
+    float: left;
+    margin-right: 4%;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:nth-of-type(2n) {
+    margin-right: 0;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
+    padding: 0;
+    height: auto;
+    line-height: normal;
+    color: #3f8654;
+    margin-bottom: 2em;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:nth-last-of-type(2) a,
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery > li:last-of-type a {
+    margin-bottom: 0;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-gallery img {
+    position: static;
+    height: auto;
+    width: 100%;
+    margin: 0 0 0.6em;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons {
+    width: 600px;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
+    height: 80px;
+    line-height: 1.2;
+    padding: 24px 0 0 85px;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item:hover {
+    background: #ebebeb;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
+    color: #3f8654;
+    font-weight: bold;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
+    display: block;
+    font-size: 1.2rem;
+  }
+  .cd-dropdown .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
+    left: 25px;
+  }
+  .cd-dropdown .cd-dropdown-content > .has-children > ul {
+    visibility: hidden;
+  }
+  .cd-dropdown .cd-dropdown-content > .has-children > ul.is-active {
+    /* when hover over .cd-dropdown-content items - show subnavigation */
+    visibility: visible;
+  }
+  .cd-dropdown .cd-dropdown-content > .has-children > .cd-secondary-dropdown.is-active > li > ul {
+    /* if .cd-secondary-dropdown is visible - show also subnavigation */
+    visibility: visible;
+  }
+  .cd-dropdown .cd-dropdown-content > .has-children > a.is-active {
+    /* hover effect for .cd-dropdown-content items with subnavigation */
+    box-shadow: inset 2px 0 0 #3f8654;
+    color: #3f8654;
+  }
+  .cd-dropdown .cd-dropdown-content > .has-children > a.is-active::before, 
+  .cd-dropdown .cd-dropdown-content > .has-children > a.is-active::after {
+    background: #3f8654;
+  }
+  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a.is-active {
+    box-shadow: inset -2px 0 0 #3f8654;
+  }
+}
+
+@-webkit-keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+@-moz-keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+@keyframes cd-fade-in {
+  0% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+@-webkit-keyframes cd-fade-out {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: visible;
+  }
+}
+@-moz-keyframes cd-fade-out {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: visible;
+  }
+}
+@keyframes cd-fade-out {
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: visible;
+  }
+}
+
+.bx-lcd-mdd-search .bx-page-block-container {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.bx-lcd-mdd-search .bx-page-block-container input[type="text"] {
+  width: 100%;
+  height: 3.5rem;
+  padding: 0 20px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  background-color: rgba(0, 0, 0, 0.1);
+  border: none;
+  border-radius: 0;
+}
+
+.has-children > a, .go-back a {
+  position: relative;
+}
+.go-back a::before, 
+.go-back a::after,
+.has-children > a::before, 
+.has-children > a::after {
+  /* arrow icon in CSS - for element with nested unordered lists */
+  content: '';
+  position: absolute;
+  top: 50%;
+  margin-top: -1px;
+  display: inline-block;
+  height: 2px;
+  width: 10px;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.has-children > a::before, .go-back a::before {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.has-children > a::after, .go-back a::after {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+@media only screen and (min-width: 1024px) {
+  .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
+    background: #b3b3b3;
+  }
+}
+
+.has-children > a {
+  padding-right: 40px;
+}
+.has-children > a::before, 
+.has-children > a::after {
+  /* arrow goes on the right side - children navigation */
+  right: 20px;
+  -webkit-transform-origin: 9px 50%;
+  -moz-transform-origin: 9px 50%;
+  -ms-transform-origin: 9px 50%;
+  -o-transform-origin: 9px 50%;
+  transform-origin: 9px 50%;
+}
+
+@media only screen and (min-width: 1024px) {
+  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a {
+    padding-left: 40px;
+    padding-right: 20px;
+  }
+  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a::before, 
+  .open-to-left .cd-dropdown .cd-dropdown-content > .has-children > a::after {
+    right: auto;
+    left: 20px;
+    -webkit-transform-origin: 1px 50%;
+    -moz-transform-origin: 1px 50%;
+    -ms-transform-origin: 1px 50%;
+    -o-transform-origin: 1px 50%;
+    transform-origin: 1px 50%;
+  }
+}
+.cd-dropdown .cd-dropdown-content .go-back a {
+  padding-left: 40px;
+}
+.cd-dropdown .cd-dropdown-content .go-back a::before, 
+.cd-dropdown .cd-dropdown-content .go-back a::after {
+  /* arrow goes on the left side - go back button */
+  left: 20px;
+  -webkit-transform-origin: 1px 50%;
+  -moz-transform-origin: 1px 50%;
+  -ms-transform-origin: 1px 50%;
+  -o-transform-origin: 1px 50%;
+  transform-origin: 1px 50%;
+}
+
+.no-js .cd-dropdown-wrapper:hover .cd-dropdown {
+  visibility: visible;
+  opacity: 1;
+  -webkit-transform: translateY(0);
+  -moz-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+
+.no-js .cd-dropdown-wrapper .cd-close {
+  display: none;
+}
+
+
+/*--- Member Toolbar ---*/
+.cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar {
+    position: relative;
+    padding: 0;
+    text-align: center;
+}
+.cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li {
+	display: inline-block;
+	float: none;
+	vertical-align: middle;
+}
+.cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li a {
+	height: auto;
+    margin: 0;
+    padding: 1rem;
+    border-width: 0px;
+    line-height: normal;
+}
+.cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li a,
+.cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li a .sys-icon {
+	color: #ffffff;
+}
+.cd-dropdown .cd-dropdown-content ul.bx-menu-toolbar li a .bx-menu-item-addon {
+	top: 0;
+	right: 0;
+	box-sizing: content-box;
+}

modules/boonex/artificer/data/template/system/css/menu.css

@@ -24,21 +24,6 @@ li.bx-menu-inter-hidden {
     display: none;
 }
 
-/*--- Sliding Menu ---*/
-.bx-sliding-menu, 
-.bx-sliding-menu-main {
-    left: auto !important;
-    right: 0 !important;
-    max-width: 31.25rem;
-}
-.bx-sliding-menu-close,
-.bx-sliding-menu-close:hover {
-    position:absolute;
-    top:0;
-    right:0;
-    text-decoration:none;
-}
-
 /*--- Page Submenu ---*/
 .bx-menu-main-submenu {
     -webkit-justify-content: center;
@@ -57,22 +42,18 @@ li.bx-menu-inter-hidden {
 }
 
 /*--- Account Popup ---*/
-@media (min-width:720px) {
-    #bx-sliding-menu-account.bx-sliding-menu-main {
-        left: auto !important;
-        right: 0px !important;
-        width: auto !important;
-    }
-}
-#bx-sliding-menu-account.bx-sliding-menu-main.bx-sliding-menu-fullheight {
-    height: calc(100% - 3.75rem);
-}
-#bx-sliding-menu-account.bx-sliding-menu-main .bx-menu-item-addon.bx-def-unit-alert {
+#bx-sliding-menu-account .bx-menu-account-popup .bx-menu-item-addon.bx-def-unit-alert {
     position: relative;
 }
+#bx-sliding-menu-account .bx-menu-account-popup-profile-switcher-link {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
 
 /*--- Add Popup ---*/
-div.bx-sliding-menu-main.sys-add-content ul {
+div.bx-popup-menu-main.sys-add-content ul {
     flex-direction: column;
 }
 

modules/boonex/artificer/data/template/system/menu_account_popup.html

@@ -1,7 +1,5 @@
-<div id="bx-sliding-menu-account" class="bx-sliding-menu-main bx-sliding-menu-fullheight bx-def-z-index-nav border-l border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 shadow-sm rounded-bl" style="display:none; opacity:1;">
-    <div class="bx-sliding-menu-main-cnt">
-        <a class="bx-sliding-menu-close mt-2 mr-4 text-3xl" href="javascript:void(0);" onclick="bx_menu_slide_inline('#bx-sliding-menu-account')"><i class="sys-icon times"></i></a>
-
+<div id="bx-sliding-menu-account" class="bx-def-z-index-nav bx-popup bx-popup-trans relative rounded ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 overflow-hidden" style="display:none; opacity:1;">
+    <div class="bx-popup-content">
         <div class="bx-menu-account-popup bx-menu-object-__object__ pt-4 px-4">
             <div class="bx-menu-account-popup-profile bx-clearfix">__active_profile__</div>
             <div class="bx-menu-account-popup-menu my-2">__menu_notifications__</div>

modules/boonex/artificer/data/template/system/menu_dropdown.html

@@ -0,0 +1,10 @@
+<div class="bx-lcd-menu-dropdown bx-def-z-index-modal cd-dropdown bg-white dark:bg-gray-800">
+    <div class="cd-dropdown-title relative flex items-center justify-between h-14 px-4 bg-white dark:bg-gray-800">
+    	__main_logo__
+        <a href="javascript:void(0)" class="cd-close w-8 h-8 leading-8 text-center text-gray-700 dark:text-gray-300"><i class="sys-icon times"></i></a>
+    </div>
+    <ul class="cd-dropdown-content pt-14">
+        <li class="bx-lcd-mdd-search bx-def-font-inputs">__search_form__</li>
+        <bx_menu:bx_lucid_dropdown_site />
+    </ul>
+</div>

modules/boonex/artificer/data/template/system/menu_dropdown_site.html

@@ -0,0 +1,17 @@
+<bx_repeat:menu_items>
+    <li class="bx-menu-item-cd bx-menu-item-cd-__name__ __class_add__">
+        <a href="__link__" onclick="__onclick__"__attrs__>
+            <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
+            <bx_if:image><img style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" /></bx_if:image>
+            <span>__title__</span>
+        </a>
+        <bx_if:show_submenu>
+            <ul class="cd-secondary-dropdown is-hidden pt-14">
+                <li class="go-back"><a href="javascript:void(0)">Menu</a></li>
+                <bx_repeat:submenu_items>
+                    <li><a href="__link__" onclick="__onclick__"__attrs__>__title__</a></li>
+                </bx_repeat:submenu_items>
+            </ul>
+        </bx_if:show_submenu>
+    </li>
+</bx_repeat:menu_items>

modules/boonex/artificer/data/template/system/menu_footer.html

@@ -1,4 +1,4 @@
-<ul id="bx-menu-footer" class="bx-menu-hor bx-menu-object-__object__ flex items-center justify-center space-x-4">
+<ul id="bx-menu-footer" class="bx-menu-hor bx-menu-object-__object__ flex flex-wrap items-center justify-center space-x-4">
     <bx_repeat:menu_items>
         <li class="__class_add__">
             <a href="__link__" onclick="__onclick__" title="__title_attr__"__attrs__>

modules/boonex/artificer/data/template/system/menu_item_more_popup.html

@@ -0,0 +1,3 @@
+<div class="bx-menu-item-more-popup w-56 p-4 box-border">
+    <ul class="bx-menu-custom bx-menu-custom-ver bx-menu-submenu-more-auto bx-clearfix">__content__</ul>
+</div>

modules/boonex/artificer/data/template/system/menu_toolbar.html

@@ -1,7 +1,7 @@
 <ul class="bx-menu-toolbar bx-menu-object-__object__ flex items-center pr-0 md:pr-2">
     <bx_repeat:menu_items>
         <li id="bx-menu-toolbar-item-__name__" class="bx-menu-toolbar-item bx-menu-item-__name__ group relative inline-flex items-center ml-3 first:ml-0 p-1.5 text-gray-500 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 border border-transparent rounded-full  bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 __class_add__">
-            <a href="__link__" onclick="__onclick__" class=""__attrs__><bx_if:icon><span class="relative block h-5 w-5 flex items-center justify-center"><i class="sys-icon __icon__"></i></bx_if:icon><bx_if:icon-a><i class="sys-icon-a" data-rotate="down" data-icon="__icon-a__" data-color="#fff"></i></bx_if:icon-a><bx_if:image><img class="" src="__icon_url__" /></bx_if:image><bx_if:unit><div class="bx-menu-toolbar-item-unit">__unit__</div></bx_if:unit><bx_if:addon>__addonf__</bx_if:addon><bx_if:title><span class="bx-menu-toolbar-item-title sr-only">__title__</span></bx_if:title></a>
+            <a href="__link__" onclick="__onclick__" class="__class_add_a__"__attrs__><bx_if:icon><span class="relative block h-5 w-5 flex items-center justify-center"><i class="sys-icon __icon__"></i></bx_if:icon><bx_if:icon-a><i class="sys-icon-a" data-rotate="down" data-icon="__icon-a__" data-color="#fff"></i></bx_if:icon-a><bx_if:image><img class="" src="__icon_url__" /></bx_if:image><bx_if:unit><div class="bx-menu-toolbar-item-unit">__unit__</div></bx_if:unit><bx_if:addon>__addonf__</bx_if:addon><bx_if:title><span class="bx-menu-toolbar-item-title sr-only">__title__</span></bx_if:title></a>
         </li>
     </bx_repeat:menu_items>
 </ul>

modules/boonex/artificer/data/template/system/scripts/BxTemplConfig.php

@@ -9,8 +9,14 @@
 
 class BxTemplConfig extends BxBaseConfig
 {
+    protected $_bModule;
+    protected $_sModule;
+
     function __construct()
     {
+        $this->_sModule = 'bx_artificer';
+        $this->_bModule = BxDolModuleQuery::getInstance()->isModuleByName($this->_sModule);
+
         parent::__construct();
 
         $this->_aConfig['aLessConfig'] = array_merge($this->_aConfig['aLessConfig'], array(
@@ -26,8 +32,24 @@ class BxTemplConfig extends BxBaseConfig
 
             'bx-border-color' => '#00a0ce',
         ));
+        
+        if($this->_bModule) {
+            $this->setPageWidth('bx_artificer_page_width');
+
+            $oModule = BxDolModule::getInstance($this->_sModule);
+            if($oModule)
+                $oModule->_oTemplate->addJs(array(
+                    'jquery.menu-aim.js',
+                ));
+        }
+
+        BxDolTemplate::getInstance()->addJs(array(
+            'modernizr.min.js'
+        ));
 
-        $this->setPageWidth('bx_artificer_page_width');
+        BxDolTemplate::getInstance()->addCss(array(
+            'menu-dropdown.css'
+        ));
     }
 }
 

modules/boonex/artificer/data/template/system/scripts/BxTemplFunctions.php

@@ -116,6 +116,37 @@ class BxTemplFunctions extends BxBaseFunctions
 
         return $sContent;
     }
+
+    protected function getInjFooterMenuDropdown() 
+    {
+        $oSearch = new BxTemplSearch();
+        $oSearch->setLiveSearch(true);
+        $sSearch = $oSearch->getForm(BX_DB_CONTENT_ONLY);
+
+        $sLogoUrl = $this->getMainLogoUrl();
+        $bLogoUrl = !empty($sLogoUrl);
+
+        $sLogoText = BxDolDesigns::getInstance()->getSiteLogoAlt();
+        if(empty($sLogoText))
+            $sLogoText = getParam('site_title');
+
+        return $this->_oTemplate->parsePageByName('menu_dropdown.html', array(
+            'bx_if:show_logo_image' => array(
+                'condition' => $bLogoUrl,
+                'content' => array(
+                    'logo_url' => $sLogoUrl,
+                    'logo_text' => $sLogoText
+                )
+            ),
+            'bx_if:show_logo_text' => array(
+                'condition' => !$bLogoUrl,
+                'content' => array(
+                    'logo_text' => $sLogoText
+                )
+            ),
+            'search_form' => $sSearch,
+        ));;
+    }
 }
 
 /** @} */

modules/boonex/artificer/data/template/system/scripts/BxTemplMenuDropdownSite.php

@@ -0,0 +1,54 @@
+<?php defined('BX_DOL') or die('hack attempt');
+/**
+ * Copyright (c) UNA, Inc - https://una.io
+ * MIT License - https://opensource.org/licenses/MIT
+ *
+ * @defgroup    UnaTemplate UNA Template Classes
+ * @{
+ */
+
+/**
+ * @see BxDolMenu
+ */
+class BxTemplMenuDropdownSite extends BxTemplMenu
+{
+    public function __construct ($aObject, $oTemplate = false)
+    {
+        parent::__construct ($aObject, $oTemplate);
+    }
+
+    protected function _getMenuItem ($a)
+    {
+        $aResult = parent::_getMenuItem($a);
+        if(empty($aResult) || !is_array($aResult))
+            return $aResult;
+
+        $aTmplVarsSubmenu = array();
+        $bTmplVarsSubmenu = !empty($aResult['submenu_object']);
+        if($bTmplVarsSubmenu) {
+            $aResult['onclick'] = '';
+            $aResult['class_add'] .= ' has-children';
+
+            $aTmplVarsSubmenu['bx_repeat:submenu_items'] = BxDolMenu::getObjectInstance($aResult['submenu_object'])->getMenuItems(); 
+        }
+
+        $aResult['bx_if:show_arrow'] = array (
+            'condition' => false && $bTmplVarsSubmenu,
+            'content' => array(),
+        );
+
+        $aResult['bx_if:show_line'] = array (
+            'condition' => true,
+            'content' => array(),
+        );
+
+        $aResult['bx_if:show_submenu'] = array (
+            'condition' => $bTmplVarsSubmenu,
+            'content' => $aTmplVarsSubmenu,
+        );
+
+        return $aResult;
+    }
+}
+
+/** @} */

modules/boonex/artificer/data/template/system/scripts/BxTemplMenuSite.php

@@ -31,8 +31,8 @@ class BxTemplMenuSite extends BxTemplMenuMoreAuto
 
     public function getCode ()
     {
-        $sTemplate = 'menu_main_sliding.html';
-        $sClass = 'bx-sliding-menu-main';
+        $sTemplate = 'menu_main_popup.html';
+        $sClass = 'bx-popup-menu-main';
         $sStyle = 'display:none';
         if($this->_bSiteMenu) {
             $sTemplate = 'menu_main_inline.html';

modules/boonex/artificer/data/template/system/scripts/BxTemplMenuToolbar.php

@@ -43,13 +43,22 @@ class BxTemplMenuToolbar extends BxBaseMenuToolbar
 
         $a['class_add_a'] = '';
         switch ($a['name']) {
-            /*
             case 'main-menu':
                 $a['class_add_a'] = ' cd-dropdown-trigger';
                 $a['link'] = 'javascript:void(0)';
                 $a['onclick'] = '';
                 break;
-             */
+
+            case 'account':
+            case 'add-content':
+                if(isset($a['onclick']))
+                    $a['onclick'] = str_replace('bx_menu_slide_inline', 'bx_menu_popup_inline', $a['onclick']);
+                break;
+
+            case 'notifications-preview':
+                if(isset($a['onclick']))
+                    $a['onclick'] = str_replace(["bx_menu_slide", "'site', "], ['bx_menu_popup'], $a['onclick']);
+                break;
         }
 
         return $a;

modules/boonex/artificer/install/langs/en.xml

@@ -19,6 +19,9 @@
     <!-- Menus -->
     <string name="_bx_artificer_lmi_cpt_styles"><![CDATA[Styles]]></string>
 
+    <string name="_bx_artificer_menu_template_title_dropdown_site"><![CDATA[Site Dropdown Navigation]]></string>
+    <string name="_bx_artificer_menu_title_dropdown_site"><![CDATA[Site Dropdown Navigation]]></string>
+
     <!-- Other -->
     <string name="_bx_artificer_txt_splash_welcome_l1"><![CDATA[Welcome to]]></string>
     <string name="_bx_artificer_txt_splash_welcome_l2"><![CDATA[the community]]></string>

modules/boonex/artificer/install/sql/disable.sql

@@ -5,6 +5,11 @@ SET @sName = 'bx_artificer';
 DELETE FROM `sys_objects_page` WHERE `module` = @sName;
 DELETE FROM `sys_pages_blocks` WHERE `module` = @sName; -- OR `object` IN ();
 
+-- MENUS: dropdown menu
+DELETE FROM `sys_menu_templates` WHERE `template`='menu_dropdown_site.html' AND `title`='_bx_artificer_menu_template_title_dropdown_site';
+
+DELETE FROM `sys_objects_menu` WHERE `object`='bx_artificer_dropdown_site';
+
 
 -- alerts
 SET @iHandler := (SELECT `id` FROM `sys_alerts_handlers` WHERE `name` = @sName LIMIT 1);

modules/boonex/artificer/js/jquery.menu-aim.js

@@ -0,0 +1,324 @@
+/**
+ * menu-aim is a jQuery plugin for dropdown menus that can differentiate
+ * between a user trying hover over a dropdown item vs trying to navigate into
+ * a submenu's contents.
+ *
+ * menu-aim assumes that you have are using a menu with submenus that expand
+ * to the menu's right. It will fire events when the user's mouse enters a new
+ * dropdown item *and* when that item is being intentionally hovered over.
+ *
+ * __________________________
+ * | Monkeys  >|   Gorilla  |
+ * | Gorillas >|   Content  |
+ * | Chimps   >|   Here     |
+ * |___________|____________|
+ *
+ * In the above example, "Gorillas" is selected and its submenu content is
+ * being shown on the right. Imagine that the user's cursor is hovering over
+ * "Gorillas." When they move their mouse into the "Gorilla Content" area, they
+ * may briefly hover over "Chimps." This shouldn't close the "Gorilla Content"
+ * area.
+ *
+ * This problem is normally solved using timeouts and delays. menu-aim tries to
+ * solve this by detecting the direction of the user's mouse movement. This can
+ * make for quicker transitions when navigating up and down the menu. The
+ * experience is hopefully similar to amazon.com/'s "Shop by Department"
+ * dropdown.
+ *
+ * Use like so:
+ *
+ *      $("#menu").menuAim({
+ *          activate: $.noop,  // fired on row activation
+ *          deactivate: $.noop  // fired on row deactivation
+ *      });
+ *
+ *  ...to receive events when a menu's row has been purposefully (de)activated.
+ *
+ * The following options can be passed to menuAim. All functions execute with
+ * the relevant row's HTML element as the execution context ('this'):
+ *
+ *      .menuAim({
+ *          // Function to call when a row is purposefully activated. Use this
+ *          // to show a submenu's content for the activated row.
+ *          activate: function() {},
+ *
+ *          // Function to call when a row is deactivated.
+ *          deactivate: function() {},
+ *
+ *          // Function to call when mouse enters a menu row. Entering a row
+ *          // does not mean the row has been activated, as the user may be
+ *          // mousing over to a submenu.
+ *          enter: function() {},
+ *
+ *          // Function to call when mouse exits a menu row.
+ *          exit: function() {},
+ *
+ *          // Selector for identifying which elements in the menu are rows
+ *          // that can trigger the above events. Defaults to "> li".
+ *          rowSelector: "> li",
+ *
+ *          // You may have some menu rows that aren't submenus and therefore
+ *          // shouldn't ever need to "activate." If so, filter submenu rows w/
+ *          // this selector. Defaults to "*" (all elements).
+ *          submenuSelector: "*",
+ *
+ *          // Direction the submenu opens relative to the main menu. Can be
+ *          // left, right, above, or below. Defaults to "right".
+ *          submenuDirection: "right"
+ *      });
+ *
+ * https://github.com/kamens/jQuery-menu-aim
+ * MIT License
+*/
+(function($) {
+
+    $.fn.menuAim = function(opts) {
+        // Initialize menu-aim for all elements in jQuery collection
+        this.each(function() {
+            init.call(this, opts);
+        });
+
+        return this;
+    };
+
+    function init(opts) {
+        var $menu = $(this),
+            activeRow = null,
+            mouseLocs = [],
+            lastDelayLoc = null,
+            timeoutId = null,
+            options = $.extend({
+                rowSelector: "> li",
+                submenuSelector: "*",
+                submenuDirection: "right",
+                tolerance: 75,  // bigger = more forgivey when entering submenu
+                enter: $.noop,
+                exit: $.noop,
+                activate: $.noop,
+                deactivate: $.noop,
+                exitMenu: $.noop
+            }, opts);
+
+        var MOUSE_LOCS_TRACKED = 3,  // number of past mouse locations to track
+            DELAY = 300;  // ms delay when user appears to be entering submenu
+
+        /**
+         * Keep track of the last few locations of the mouse.
+         */
+        var mousemoveDocument = function(e) {
+                mouseLocs.push({x: e.pageX, y: e.pageY});
+
+                if (mouseLocs.length > MOUSE_LOCS_TRACKED) {
+                    mouseLocs.shift();
+                }
+            };
+
+        /**
+         * Cancel possible row activations when leaving the menu entirely
+         */
+        var mouseleaveMenu = function() {
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+
+                // If exitMenu is supplied and returns true, deactivate the
+                // currently active row on menu exit.
+                if (options.exitMenu(this)) {
+                    if (activeRow) {
+                        options.deactivate(activeRow);
+                    }
+
+                    activeRow = null;
+                }
+            };
+
+        /**
+         * Trigger a possible row activation whenever entering a new row.
+         */
+        var mouseenterRow = function() {
+                if (timeoutId) {
+                    // Cancel any previous activation delays
+                    clearTimeout(timeoutId);
+                }
+
+                options.enter(this);
+                possiblyActivate(this);
+            },
+            mouseleaveRow = function() {
+                options.exit(this);
+            };
+
+        /*
+         * Immediately activate a row if the user clicks on it.
+         */
+        var clickRow = function() {
+                activate(this);
+            };
+
+        /**
+         * Activate a menu row.
+         */
+        var activate = function(row) {
+                if (row == activeRow) {
+                    return;
+                }
+
+                if (activeRow) {
+                    options.deactivate(activeRow);
+                }
+
+                options.activate(row);
+                activeRow = row;
+            };
+
+        /**
+         * Possibly activate a menu row. If mouse movement indicates that we
+         * shouldn't activate yet because user may be trying to enter
+         * a submenu's content, then delay and check again later.
+         */
+        var possiblyActivate = function(row) {
+                var delay = activationDelay();
+
+                if (delay) {
+                    timeoutId = setTimeout(function() {
+                        possiblyActivate(row);
+                    }, delay);
+                } else {
+                    activate(row);
+                }
+            };
+
+        /**
+         * Return the amount of time that should be used as a delay before the
+         * currently hovered row is activated.
+         *
+         * Returns 0 if the activation should happen immediately. Otherwise,
+         * returns the number of milliseconds that should be delayed before
+         * checking again to see if the row should be activated.
+         */
+        var activationDelay = function() {
+                if (!activeRow || !$(activeRow).is(options.submenuSelector)) {
+                    // If there is no other submenu row already active, then
+                    // go ahead and activate immediately.
+                    return 0;
+                }
+
+                var offset = $menu.offset(),
+                    upperLeft = {
+                        x: offset.left,
+                        y: offset.top - options.tolerance
+                    },
+                    upperRight = {
+                        x: offset.left + $menu.outerWidth(),
+                        y: upperLeft.y
+                    },
+                    lowerLeft = {
+                        x: offset.left,
+                        y: offset.top + $menu.outerHeight() + options.tolerance
+                    },
+                    lowerRight = {
+                        x: offset.left + $menu.outerWidth(),
+                        y: lowerLeft.y
+                    },
+                    loc = mouseLocs[mouseLocs.length - 1],
+                    prevLoc = mouseLocs[0];
+
+                if (!loc) {
+                    return 0;
+                }
+
+                if (!prevLoc) {
+                    prevLoc = loc;
+                }
+
+                if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x ||
+                    prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {
+                    // If the previous mouse location was outside of the entire
+                    // menu's bounds, immediately activate.
+                    return 0;
+                }
+
+                if (lastDelayLoc &&
+                        loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {
+                    // If the mouse hasn't moved since the last time we checked
+                    // for activation status, immediately activate.
+                    return 0;
+                }
+
+                // Detect if the user is moving towards the currently activated
+                // submenu.
+                //
+                // If the mouse is heading relatively clearly towards
+                // the submenu's content, we should wait and give the user more
+                // time before activating a new row. If the mouse is heading
+                // elsewhere, we can immediately activate a new row.
+                //
+                // We detect this by calculating the slope formed between the
+                // current mouse location and the upper/lower right points of
+                // the menu. We do the same for the previous mouse location.
+                // If the current mouse location's slopes are
+                // increasing/decreasing appropriately compared to the
+                // previous's, we know the user is moving toward the submenu.
+                //
+                // Note that since the y-axis increases as the cursor moves
+                // down the screen, we are looking for the slope between the
+                // cursor and the upper right corner to decrease over time, not
+                // increase (somewhat counterintuitively).
+                function slope(a, b) {
+                    return (b.y - a.y) / (b.x - a.x);
+                };
+
+                var decreasingCorner = upperRight,
+                    increasingCorner = lowerRight;
+
+                // Our expectations for decreasing or increasing slope values
+                // depends on which direction the submenu opens relative to the
+                // main menu. By default, if the menu opens on the right, we
+                // expect the slope between the cursor and the upper right
+                // corner to decrease over time, as explained above. If the
+                // submenu opens in a different direction, we change our slope
+                // expectations.
+                if (options.submenuDirection == "left") {
+                    decreasingCorner = lowerLeft;
+                    increasingCorner = upperLeft;
+                } else if (options.submenuDirection == "below") {
+                    decreasingCorner = lowerRight;
+                    increasingCorner = lowerLeft;
+                } else if (options.submenuDirection == "above") {
+                    decreasingCorner = upperLeft;
+                    increasingCorner = upperRight;
+                }
+
+                var decreasingSlope = slope(loc, decreasingCorner),
+                    increasingSlope = slope(loc, increasingCorner),
+                    prevDecreasingSlope = slope(prevLoc, decreasingCorner),
+                    prevIncreasingSlope = slope(prevLoc, increasingCorner);
+
+                if (decreasingSlope < prevDecreasingSlope &&
+                        increasingSlope > prevIncreasingSlope) {
+                    // Mouse is moving from previous location towards the
+                    // currently activated submenu. Delay before activating a
+                    // new menu row, because user may be moving into submenu.
+                    lastDelayLoc = loc;
+                    return DELAY;
+                }
+
+                lastDelayLoc = null;
+                return 0;
+            };
+
+        /**
+         * Hook up initial menu events
+         */
+        $menu
+            .mouseleave(mouseleaveMenu)
+            .find(options.rowSelector)
+                .mouseenter(mouseenterRow)
+                .mouseleave(mouseleaveRow)
+                .click(clickRow);
+
+        $(document).mousemove(mousemoveDocument);
+
+    };
+})(jQuery);
+

modules/boonex/artificer/template/css/tailwind.css

@@ -101,6 +101,14 @@
         @apply group bg-white ring-1 ring-gray-200 dark:ring-gray-700 dark:bg-gray-900 shadow-sm text-gray-900 dark:text-white rounded;
     }
 
+    /* Main menu: Mobile */
+    .bx-media-phone .go-back a::before, 
+    .bx-media-phone .go-back a::after,
+    .bx-media-phone .has-children > a::before, 
+    .bx-media-phone .has-children > a::after {
+        @apply bg-gray-700 dark:bg-gray-300;
+    }
+
     /* Page Submenu */
     .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active {
         @apply border-blue-500 text-gray-900 dark:text-gray-100;