RFC 50: Interaction tweaks (take two) (#13576)

* feat: add the collapse style css + a script for the intercepting the bootstrap event

* chore: remove old code

* Add some guards for missing elements and simplify show/hide collapse interaction

* Update app/assets/stylesheets/admin.scss

Co-authored-by: rhymes <rhymes@hey.com>

Co-authored-by: rhymes <rhymes@hey.com>

app/assets/stylesheets/admin.scss

@@ -235,4 +235,10 @@ label {
     list-style: none;
     padding: 0;
   }
+  // override the Bootstrap collapse animation
+  .collapsing {
+    -webkit-transition: none;
+    transition: none;
+    display: none;
+  }
 }

app/javascript/admin/__tests__/controllers/sidebar_controller.test.js

@@ -23,7 +23,7 @@ describe('SidebarController', () => {
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="dropdown-icon crayons-icon" role="img"><path d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z"></path></svg>
               Advanced
             </button>
-            <ul id="advanced" data-sidebar-target="submenu" class="collapse hide">
+            <ul id="advanced" data-sidebar-target="submenu" class="collapse">
               <li>
                 <a class="crayons-link crayons-link--block ml-7 " href="/admin/advanced/broadcasts">
                   Broadcasts
@@ -104,18 +104,11 @@ describe('SidebarController', () => {
       window.location = location;
     });
 
-    it('redirects to the first child navigation item', () => {
-      const button = document.getElementById('advanced_button');
-      button.click();
-
-      expect(window.location.href).toEqual('/admin/advanced/broadcasts');
-    });
-
     it('closes other menu items', () => {
       const button = document.getElementById('advanced_button');
       button.click();
 
-      expect(document.getElementById('apps').classList).toContain('hide');
+      expect(document.getElementById('apps').classList).not.toContain('show');
     });
   });
 });

app/javascript/admin/controllers/sidebar_controller.js

@@ -5,30 +5,26 @@ export default class SidebarController extends Controller {
   static targets = ['submenu'];
 
   disableCurrentNavItem() {
-    const activeMenuId = this.submenuTargets.filter((item) =>
-      item.classList.contains('show'),
-    )[0].id;
-    const activeButton = document.getElementById(`${activeMenuId}_button`);
-    activeButton.setAttribute('disabled', true);
+    if (this.submenuTargets.length > 0) {
+      const activeMenuId = this.submenuTargets.filter((item) =>
+        item.classList.contains('show'),
+      )[0]?.id;
+
+      if (activeMenuId) {
+        const activeButton = document.getElementById(`${activeMenuId}_button`);
+        activeButton.setAttribute('disabled', true);
+      }
+    }
   }
 
-  expandDropdown(event) {
-    this.redirectToFirstChildNavItem(event);
+  expandDropdown() {
     this.closeOtherMenus();
   }
 
-  redirectToFirstChildNavItem(event) {
-    window.location.href = event.target.getAttribute('data-target-href');
-  }
-
   closeOtherMenus() {
-    const expandedList = ['expand', 'show'];
-    const collapsedList = ['collapse', 'hide'];
-
     this.submenuTargets.map((item) => {
       if (item.classList.contains('show')) {
-        item.classList.remove(...expandedList);
-        item.classList.add(...collapsedList);
+        item.classList.remove('show');
       }
     });
   }

app/views/admin/shared/_nested_sidebar.html.erb

@@ -15,7 +15,6 @@
         id="<%= group_name %>_button"
         data-toggle="collapse"
         data-target="#<%= group_name %>"
-        data-target-href="/admin/<%= group_name %>/<%= group[:children][0][:controller] %>"
         aria-expanded="<%= (deduced_scope(request) == group_name.to_s).to_s %>"
         aria-controls="<%= group_name %>"
         data-action="click->sidebar#expandDropdown">
@@ -24,7 +23,8 @@
       </button>
       <ul id="<%= group_name %>"
           data-sidebar-target="submenu"
-          class="<%= deduced_scope(request) == group_name.to_s ? "expand show" : "collapse hide" %>">
+          class="js-menu-activator <%= deduced_scope(request) == group_name.to_s ? "collapse show" : "collapse" %>"
+          data-target-href="/admin/<%= group_name %>/<%= group[:children][0][:controller] %>">
         <% group[:children].each do |item| %>
           <% if item[:visible] %>
             <li>
@@ -40,3 +40,15 @@
     <% end %>
   </li>
 <% end %>
+
+<script>
+  $('.js-menu-activator').on('show.bs.collapse', function (event) {
+    const destinationPath = event.target.getAttribute('data-target-href');
+    const subMenu = document.querySelector(`a[href='${destinationPath}']`);
+
+    if (destinationPath && subMenu) {
+      window.location.href = destinationPath;
+      subMenu.classList.add('fw-bold');
+    }
+  })
+</script>