sidebar - added collapsable menu links

Author: crikfilippo

src/css/bundle.css

@@ -372,6 +372,21 @@ svg {
 .inline-block { display: inline-block; }
 .inline { display: inline; }
 
+/*REMOVE HIGHLIGHT BACKGROUND*/
+.no-selection::selection {
+  background: transparent;
+  color: inherit; 
+}
+
+.no-selection::-moz-selection {
+  background: transparent;
+  color: inherit;
+}
+
+.no-selection {
+  user-select: none;
+}
+
 
 /* --- flexbox.css --- */
 .flex { display: flex; gap: var(--space-4); }
@@ -4550,6 +4565,35 @@ html:has(.kroma-navbar) .kroma-sidebar{
     background: #ffffff0f;
 }
 
+.kroma-sidebar li{
+
+  cursor:pointer;
+
+}
+
+.kroma-sidebar li[data-idparent] {
+  padding-left: 10px;
+  max-height: 100px;
+  transition: 100ms;
+}
+
+.kroma-sidebar:not(.collapsed) li.parent a span:before {
+  content: "\f054";
+  margin-right: 10px;
+  font-family: 'FontAwesome';
+  display: inline-block;
+}
+
+.kroma-sidebar li[data-idparent].collapsed {
+  max-height: 0;
+  overflow: hidden;
+}
+
+.kroma-sidebar li.parent:not(.collapsed) a span:before {
+  transform: rotate(90deg);
+  transform-origin: center;
+}
+
 /* --- skeleton.css --- */
 /* Base Skeleton Container */
 .kroma-skeleton {

src/css/components/sidebar.css

@@ -248,4 +248,33 @@ html:has(.kroma-navbar) .kroma-sidebar{
 
 .dark-mode .kroma-sidebar .sdb-menu ul li a:hover:before {
     background: #ffffff0f;
+}
+
+.kroma-sidebar li{
+
+    cursor:pointer;
+  
+  }
+
+.kroma-sidebar li[data-idparent] {
+    padding-left: 10px;
+    max-height: 100px;
+    transition: 100ms;
+}
+
+.kroma-sidebar:not(.collapsed) li.parent a span:before {
+    content: "\f054";
+    margin-right: 10px;
+    font-family: 'FontAwesome';
+    display: inline-block;
+}
+
+.kroma-sidebar li[data-idparent].collapsed {
+    max-height: 0;
+    overflow: hidden;
+}
+
+.kroma-sidebar li.parent:not(.collapsed) a span:before {
+    transform: rotate(90deg);
+    transform-origin: center;
 }

src/js/bundle.js

@@ -1592,6 +1592,7 @@ export class KromaSidebar {
         for(var i = 0; i < this.pages.length; i++){
 
             var li = document.createElement('li');
+            li.classList.add('no-selection');
 
             //parent page
             if(!this.pages[i].isChild){
@@ -1633,6 +1634,36 @@ export class KromaSidebar {
         menu.appendChild(ul);
         this.sdb.appendChild(menu);
 
+        //remove parent class from childless links
+        document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li.parent').forEach((li)=>{
+            var liChildren = document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li[data-idparent="'+li.dataset.myid+'"]');
+            if(liChildren.length < 1){li.classList.remove('parent');}
+            else{
+                li.classList.add('collapsed');
+                li.querySelector('a').removeAttribute('href');  //remove href from collapsable parent
+                li.addEventListener('click',function(){
+
+                    var sdbId = this.closest('.kroma-sidebar').id;
+                    var liChildren = document.querySelectorAll('#'+sdbId+' .sdb-menu ul li[data-idparent="'+this.dataset.myid+'"]');
+
+                    if(this.classList.contains('collapsed')){
+                        this.classList.remove('collapsed');
+                        liChildren.forEach(function(liChild){ liChild.classList.remove('collapsed'); });
+                    }
+                    else{
+                        this.classList.add('collapsed');
+                        liChildren.forEach(function(liChild){ liChild.classList.add('collapsed'); });
+                    }
+
+                });
+            
+            }
+        });
+
+        //collapse all children links
+        document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li[data-idparent]').forEach((li)=>{
+            li.classList.add('collapsed');
+        });
 
     }
 

src/js/components/sidebar.js

@@ -138,6 +138,8 @@ export class KromaSidebar {
         for(var i = 0; i < this.pages.length; i++){
 
             var li = document.createElement('li');
+            li.querySelector('a').removeAttribute('href'); //remove href from collapsable parent
+            li.classList.add('no-selection');
 
             //parent page
             if(!this.pages[i].isChild){
@@ -179,6 +181,36 @@ export class KromaSidebar {
         menu.appendChild(ul);
         this.sdb.appendChild(menu);
 
+        //remove parent class from childless links
+        document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li.parent').forEach((li)=>{
+            var liChildren = document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li[data-idparent="'+li.dataset.myid+'"]');
+            if(liChildren.length < 1){li.classList.remove('parent');}
+            else{
+                li.classList.add('collapsed');
+                li.addEventListener('click',function(){
+
+                    var sdbId = this.closest('.kroma-sidebar').id;
+                    var liChildren = document.querySelectorAll('#'+sdbId+' .sdb-menu ul li[data-idparent="'+this.dataset.myid+'"]');
+
+                    if(this.classList.contains('collapsed')){
+                        this.classList.remove('collapsed');
+                        liChildren.forEach(function(liChild){ liChild.classList.remove('collapsed'); });
+                    }
+                    else{
+                        this.classList.add('collapsed');
+                        liChildren.forEach(function(liChild){ liChild.classList.add('collapsed'); });
+                    }
+
+                });
+            
+            }
+        });
+
+        //collapse all children links
+        document.querySelectorAll('#'+this.sdb.id+' .sdb-menu ul li[data-idparent]').forEach((li)=>{
+            li.classList.add('collapsed');
+        });
+
 
     }