[Admin] Added collapse menu

src/Sylius/Bundle/AdminBundle/Resources/private/js/app.js

@@ -26,6 +26,8 @@ import './sylius-notification';
 import './sylius-product-images-preview';
 import './sylius-product-slug';
 import './sylius-taxon-slug';
+import './sylius-chart';
+import customCollapse from './sylius-custom-collapse';
 
 import StatisticsComponent from './sylius-statistics';
 import SyliusTaxonomyTree from './sylius-taxon-tree';
@@ -117,6 +119,8 @@ $(document).ready(() => {
   const dashboardStatistics = new StatisticsComponent(document.querySelector('.stats'));
 
   $('.sylius-admin-menu').searchable('.sylius-admin-menu-search-input');
+
+  customCollapse('#sidebar .item .header', '#sidebar .item', 'open', false);
 });
 
 window.$ = $;

src/Sylius/Bundle/AdminBundle/Resources/private/js/sylius-custom-collapse.js

@@ -0,0 +1,30 @@
+//  ------------------------------------------------------=> CUSTOM COLLAPSE
+/**
+ * @description Show and hide blocks on click
+ *
+ * @param {HTMLElement} $blockClick - Element that will be clickable to show or hide
+ * @param {HTMLElement} $blockTarget - Target element that will be hidden or displayed
+ * @param {HTMLElement} $class - Class that we will put for to hide or display
+ * @param {boolean} [collapseAll=true] - Allows to leave open or close by default when clicking on an element.
+ * - true = close everything by clicking on an element
+ * - false = always leave the elements open
+ */
+function customCollapse($blockClick, $blockTarget, $class, collapseAll = true) {
+  const blockClick = document.querySelectorAll($blockClick);
+  blockClick.forEach((item) => {
+    item.addEventListener('click', function () {
+      // Closing other collapses
+      if (collapseAll === true) {
+        if (!this.closest($blockTarget).classList.contains($class)) {
+          blockClick.forEach((itemClean) => {
+            itemClean.closest($blockTarget).classList.remove($class);
+          });
+        }
+      }
+      // Opening / Closing of the targeted collapse
+      this.closest($blockTarget).classList.toggle($class);
+    });
+  });
+}
+
+export default customCollapse;

src/Sylius/Bundle/AdminBundle/Resources/private/sass/_ui.scss

@@ -79,7 +79,6 @@ a {
     .item > .header {
         text-transform: uppercase;
         font-size: 11px;
-        margin-bottom: 16px;
     }
 
     .item > i.icon {
@@ -97,6 +96,51 @@ a {
         background: $sylius-brand-color !important;
         border-radius: 0 99px 99px 0 !important;
     }
+    .item {
+        padding-bottom: 5px;
+        .menu {
+            visibility: hidden;
+            overflow: hidden;
+            max-height: 0;
+            transition: all .5s ease-in-out;
+        }
+        .header {
+            margin-bottom: 0;
+            transition: .7s ease-in-out;
+            cursor: pointer;
+            position: relative;
+            &:before, &:after {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 50%;
+                right: 0;
+                width: 10px;
+                height: 2px;
+                margin-top: -1px;
+                background: white;
+            }
+            &:after {
+                transform: rotate(90deg);
+                transition: .3s;
+            }
+        }
+        &.open,
+        &.current_ancestor {
+            .menu{
+                max-height: 120vh;
+                overflow: visible;
+                visibility: visible;
+                border-bottom-color: #f0f0f0;
+            }
+            .header {
+                margin-bottom: 15px;
+                &:after {
+                    transform: rotate(0deg);
+                }
+            }
+        }
+    }
 }
 
 // ----------------------------------