Improvements to collapsable menu. Switching machines

IGS · Nov 29, 2023 · 8fa686e · 8fa686e
1 parent 0295d36
commit 8fa686e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/www/css/common.v2.css b/www/css/common.v2.css
@@ -28,24 +28,6 @@ html, body {
 /* -------------------- */
 /* -= Left navbar section =- */
 
-/* CSS class for the hide animation */
-.hidden-sidenavbar {
-    opacity: 0;
-    max-height: 0;
-    overflow: hidden;
-    transition: opacity 0.3s ease, max-height 0.3s ease;
-}
-
-/* CSS class for the show animation */
-.shown-sidenavbar {
-    opacity: 1;
-    max-height: 1000px; /* Adjust the maximum height as needed */
-    transition: opacity 0.3s ease, max-height 0.3s ease;
-}
-
-/* ------------------ */
-/* -= Other styles =- */
-
 #citation_c {
     max-width: 200px;
 }
@@ -58,13 +40,39 @@ html, body {
     font-size: 90%;
 }
 
+/* CSS class for the hide animation */
+.hidden-sidenavbar {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transition: opacity 0.3s ease, max-height 0.3s ease;
+}
+
 .menu-list a {
     border-radius: 10px;
     padding: 0.25rem 0.5rem;
     margin: 0.25rem 0 0.25rem 0;
     font-size: 90%;
 }
 
+.menu-list li {
+    /*border: 1px solid black; */
+    min-height: 2.5rem;
+}
+
+p.menu-label {
+    min-height: 1.5rem;
+}
+
+/* CSS class for the show animation */
+.shown-sidenavbar {
+    opacity: 1;
+    max-height: 1000px; /* Adjust the maximum height as needed */
+    transition: opacity 0.3s ease, max-height 0.3s ease;
+}
+
+/* ------------------ */
+/* -= Other styles =- */
 .js-step-collapsable {
     display: none;
 }

diff --git a/www/include/primary_nav.html b/www/include/primary_nav.html
@@ -4,7 +4,7 @@
           </div>
           <aside class="menu mt-5 pl-3">
             <p class="menu-label mb-0 is-capitalized has-text-primary-light has-text-weight-medium">
-              Menu
+              <span class="menu-label-text">Menu</span>
               <span id="navbar-toggler" class="icon is-pulled-right"><i class="mdi mdi-18px mdi-menu-open"></i></span>
             </p>
             <ul class="menu-list">
@@ -18,24 +18,24 @@
               </li>
             </ul>
             <p class="menu-label mb-0 is-capitalized has-text-primary-light">
-              Explore
+              <span class="menu-label-text">Explore</span>
             </p>
             <ul class="menu-list">
               <li>
                 <span class="icon-text is-align-items-center is-flex">
-                  <span class="icon"><i class="mdi mdi-18px mdi-test-tube"></i></span>
+                  <span class="icon is-medium"><i class="mdi mdi-24px mdi-test-tube"></i></span>
                   <span class="icon-text-part"><a tool="search_expression">Gene Expression</a></span>
                 </span>
               </li>
               <li>
                 <span class="icon-text is-align-items-center is-flex">
-                  <span class="icon"><i class="mdi mdi-18px mdi-table-search"></i></span>
+                  <span class="icon is-medium"><i class="mdi mdi-24px mdi-table-search"></i></span>
                   <span class="icon-text-part"><a tool="search_datasets" href="./dataset_explorer.html">Datasets</a></span>
                 </span>
               </li>
             </ul>
             <p class="menu-label mb-0 is-capitalized has-text-primary-light">
-              Analyze
+              <span class="menu-label-text">Analyze</span>
             </p>
             <ul class="menu-list">
               <li>
@@ -70,7 +70,7 @@
               </li>
             </ul>
             <p class="menu-label mb-0 is-capitalized has-text-primary-light">
-              Manage
+              <span class="menu-label-text">Manage</span>
             </p>
             <ul class="menu-list">
               <li>
@@ -93,7 +93,7 @@
               </li>
             </ul>
             <p class="menu-label mb-0 is-capitalized has-text-primary-light">
-              Support
+              <span class="menu-label-text">Support</span>
             </p>
             <ul class="menu-list">
               <li>

diff --git a/www/js/common.v2.js b/www/js/common.v2.js
@@ -39,6 +39,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Function to hide elements with animation
     function hideNavbarElementsWithAnimation() {
+        // Hide all the menu labels
+        document.querySelectorAll('span.menu-label-text').forEach(function (element) {
+            element.classList.add('is-hidden');
+        });
+
         navbarElementsToAnimate.forEach(function (element) {
             // Add the CSS class to trigger the hide animation
             element.classList.add('hidden-sidenavbar');
@@ -52,6 +57,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Function to show elements with animation
     function showNavbarElementsWithAnimation() {
+        // Show all the menu labels
+        document.querySelectorAll('span.menu-label-text').forEach(function (element) {
+            element.classList.remove('is-hidden');
+        });
+
         navbarElementsToAnimate.forEach(function (element) {
             // Add the CSS class to trigger the show animation
             element.classList.add('shown-sidenavbar');
@@ -63,7 +73,6 @@ document.addEventListener('DOMContentLoaded', () => {
         document.querySelector("#citation_c").classList.remove("is-hidden")
     }
 
-
     const navbar_toggler = document.querySelector('#navbar-toggler');
 
     navbar_toggler.addEventListener('click', (event) => {