Fix the mobile menu wrongly expanding the logo (#33877)

joomla · Jun 10, 2021 · 6ff0fc7 · 6ff0fc7
1 parent 496e6be
commit 6ff0fc7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/administrator/templates/atum/index.php b/administrator/templates/atum/index.php
@@ -155,11 +155,10 @@
 		<?php if (!$cpanel) : ?>
 			<?php // Subheader ?>
 			<?php HTMLHelper::_('bootstrap.collapse', '.toggler-toolbar'); ?>
-			<button class="navbar-toggler toggler-toolbar toggler-burger collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".subhead" aria-controls="subhead" aria-expanded="false" aria-label="<?php echo Text::_('TPL_ATUM_TOOLBAR'); ?>">
+			<button class="navbar-toggler toggler-toolbar toggler-burger collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#subhead-container" aria-controls="subhead-container" aria-expanded="false" aria-label="<?php echo Text::_('TPL_ATUM_TOOLBAR'); ?>">
 				<span class="toggler-toolbar-icon"></span>
 			</button>
-			<div id="subhead" class="subhead mb-3">
-				<div id="container-collapse" class="container-collapse"></div>
+			<div id="subhead-container" class="subhead mb-3">
 				<div class="row">
 					<div class="col-md-12">
 						<jdoc:include type="modules" name="toolbar" style="none" />

diff --git a/build/media_source/mod_menu/js/admin-menu.es6.js b/build/media_source/mod_menu/js/admin-menu.es6.js
@@ -50,19 +50,11 @@ if (sidebar && !sidebar.getAttribute('data-hidden')) {
       elem.classList.remove('child-open');
     }
 
-    if (wrapper.classList.contains('closed')) {
-      window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
-        detail: 'closed',
-        bubbles: true,
-        cancelable: true,
-      }));
-    } else {
-      window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
-        detail: 'open',
-        bubbles: true,
-        cancelable: true,
-      }));
-    }
+    window.dispatchEvent(new CustomEvent('joomla:menu-toggle', {
+      detail: wrapper.classList.contains('closed') ? 'closed' : 'open',
+      bubbles: true,
+      cancelable: true,
+    }));
   });
 
   // Sidebar Nav

diff --git a/build/media_source/templates/administrator/atum/js/template.es6.js b/build/media_source/templates/administrator/atum/js/template.es6.js
@@ -16,8 +16,8 @@ const mobile = window.matchMedia('(max-width: 992px)');
 const small = window.matchMedia('(max-width: 575.98px)');
 const tablet = window.matchMedia('(min-width: 576px) and (max-width:991.98px)');
 const menu = document.querySelector('.sidebar-menu');
-const sidebarNav = document.querySelector('.sidebar-nav');
-const subhead = document.querySelector('.subhead');
+const sidebarNav = [].slice.call(document.querySelectorAll('.sidebar-nav'));
+const subhead = document.querySelector('#subhead-container');
 const wrapper = document.querySelector('.wrapper');
 const sidebarWrapper = document.querySelector('.sidebar-wrapper');
 const logo = document.querySelector('.logo');
@@ -52,6 +52,11 @@ function changeLogo(change) {
     return;
   }
 
+  if (small.matches) {
+    logo.classList.add('small');
+    return;
+  }
+
   const state = change || getCookie();
 
   if (state === 'closed') {
@@ -149,11 +154,11 @@ function setMobile() {
   }
 
   if (small.matches) {
-    if (sidebarNav) sidebarNav.classList.add('collapse');
+    sidebarNav.map((el) => el.classList.add('collapse'));
     if (subhead) subhead.classList.add('collapse');
     if (sidebarWrapper) sidebarWrapper.classList.add('collapse');
   } else {
-    if (sidebarNav) sidebarNav.classList.remove('collapse');
+    sidebarNav.map((el) => el.classList.remove('collapse'));
     if (subhead) subhead.classList.remove('collapse');
     if (sidebarWrapper) sidebarWrapper.classList.remove('collapse');
   }
@@ -173,7 +178,7 @@ function setDesktop() {
     sidebarWrapper.classList.remove('collapse');
   }
 
-  if (sidebarNav) sidebarNav.classList.remove('collapse');
+  sidebarNav.map((el) => el.classList.remove('collapse'));
   if (subhead) subhead.classList.remove('collapse');
 
   toggleArrowIcon('top');
@@ -217,11 +222,23 @@ function subheadScrolling() {
 headerItemsInDropdown();
 reactToResize();
 subheadScrolling();
+if (mobile.matches) {
+  changeLogo('closed');
+  if (subhead) {
+    subhead.classList.remove('show');
+    subhead.classList.add('collapse');
+  }
+}
 if (!navigator.cookieEnabled) {
   Joomla.renderMessages({ error: [Joomla.Text._('JGLOBAL_WARNCOOKIES')] }, undefined, false, 6000);
 }
 window.addEventListener('joomla:menu-toggle', (event) => {
   headerItemsInDropdown();
   document.cookie = `atumSidebarState=${event.detail};`;
-  changeLogo(event.detail);
+
+  if (mobile.matches) {
+    changeLogo('closed');
+  } else {
+    changeLogo(event.detail);
+  }
 });