WIP: hide program menu and facilities menu after click of a link (#119)

fahari/static/sass/navs/_sidebar.scss

@@ -50,15 +50,15 @@
         .collapse,
         .collapsing {
             .collapse-inner {
-                padding: .5rem 0;
+                padding: 0.5rem 0;
                 min-width: 10rem;
                 font-size: $dropdown-font-size;
                 margin: 0 0 1rem 0;
 
                 .collapse-header {
                     margin: 0;
                     white-space: nowrap;
-                    padding: .5rem 1.5rem;
+                    padding: 0.5rem 1.5rem;
                     text-transform: uppercase;
                     font-weight: 800;
                     font-size: 0.65rem;
@@ -100,8 +100,8 @@
 
         &::after {
             font-weight: 900;
-            content: '\f104';
-            font-family: 'Font Awesome 5 Free';
+            content: "\f104";
+            font-family: "Font Awesome 5 Free";
             margin-right: 0.1rem;
         }
 
@@ -119,8 +119,8 @@
         overflow: hidden;
 
         #sidebarToggle::after {
-            content: '\f105';
-            font-family: 'Font Awesome 5 Free';
+            content: "\f105";
+            font-family: "Font Awesome 5 Free";
             margin-left: 0.25rem;
         }
 
@@ -192,7 +192,6 @@
         width: $sidebar-base-width !important;
 
         .nav-item {
-
             // Accordion
             .collapse {
                 position: relative;
@@ -243,12 +242,12 @@
                         vertical-align: 0;
                         border: 0;
                         font-weight: 900;
-                        content: '\f107';
-                        font-family: 'Font Awesome 5 Free';
+                        content: "\f107";
+                        font-family: "Font Awesome 5 Free";
                     }
 
                     &.collapsed::after {
-                        content: '\f105';
+                        content: "\f105";
                     }
                 }
             }
@@ -273,7 +272,6 @@
             width: $sidebar-collapsed-width !important;
 
             .nav-item {
-
                 // Accordion
                 .collapse {
                     position: absolute;
@@ -283,7 +281,8 @@
                     // Grow In Animation for Toggled State
                     animation-name: growIn;
                     animation-duration: 200ms;
-                    animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1);
+                    animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1),
+                        opacity cubic-bezier(0, 1, 0.4, 1);
 
                     .collapse-inner {
                         box-shadow: $box-shadow;

fahari/templates/base.html

@@ -10,6 +10,7 @@
             {% block sidebar %}
                 {% include "fragments/sidebar.html" %}
             {% endblock sidebar %}
+
             <div id="content-wrapper" class="d-flex flex-column">
                 <div id="content">
                     {% block topbar %}
@@ -25,6 +26,7 @@
                     {% include "fragments/footer.html" %}
                 {% endblock footer %}
             </div>
+
         </div>
         <a class="scroll-to-top rounded" href="#page-top">
             <i class="fas fa-angle-up"></i>

fahari/templates/fragments/atoms/facilities_menu.html

@@ -1,14 +1,14 @@
 {% load static i18n compress%}
 
 <li class="nav-item {% if active == "facilities-nav" %}active{% endif %}" id="facilities-nav">
-    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#facilities-menu" aria-expanded="true" aria-controls="facilities-menu">
+    <a class="nav-link collapsed" id="facilities-nav-link" href="#" data-toggle="collapse" data-target="#facilities-menu" aria-expanded="true" aria-controls="facilities-menu">
         <i class="fas fa-fw fa-hospital"></i>
         <span>Facilities</span>
     </a>
     <div id="facilities-menu" class="collapse {% if active == "facilities-nav" %}show{% endif %}"  data-parent="#accordionSidebar">
         <div class="bg-white py-2 collapse-inner rounded">
             {% if perms.common.view_facility %}
-                <a class="collapse-item {% if selected == "facilities" %}active {% endif %}" id="facilities" href="{% url 'common:facilities' %}">
+                <a class="collapse-item  {% if selected == "facilities" %}active {% endif %}" id="facilities" href="{% url 'common:facilities' %}">
                     Facilities
                 </a>
             {% endif %}
@@ -39,3 +39,24 @@
         </div>
     </div>
 </li>
+
+<script>
+
+function collapseMenu(){
+const facilities_nav_link = document.getElementById("facilities-nav-link");
+facilities_nav_link.className = "nav-link collapsed";
+const facilities_menu = document.getElementById("facilities-menu");
+facilities_menu.className = "collapse";
+}
+
+const items = document.querySelectorAll('.collapse-item');
+items.forEach(input => input.addEventListener('click', collapseMenu()));
+
+
+document.addEventListener("DOMContentLoaded", () => {
+collapseMenu()
+});
+
+
+
+</script>

fahari/templates/fragments/atoms/program_menu.html

@@ -1,7 +1,7 @@
 {% load static i18n compress%}
 
 <li class="nav-item {% if active == "program-nav" %}active {% endif %}" id="program-nav">
-    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#program-menu" aria-expanded="true" aria-controls="program-menu">
+    <a class="nav-link collapsed" href="#" data-toggle="collapse" id="program-menu-link" data-target="#program-menu" aria-expanded="true" aria-controls="program-menu">
         <i class="fas fa-fw fa-tasks"></i>
         <span>Program Reports</span>
     </a>
@@ -51,3 +51,27 @@
         </div>
     </div>
 </li>
+
+
+<script>
+
+
+
+
+function collapseMenu(){
+const program_menu_link = document.getElementById("program-menu-link");
+program_menu_link.className = "nav-link collapsed";
+const program_menu = document.getElementById("program-menu");
+program_menu.className = "collapse";
+}
+
+const program_items = document.querySelectorAll('.collapse-item');
+program_items.forEach(input => input.addEventListener('click', collapseMenu()));
+
+
+document.addEventListener("DOMContentLoaded", () => {
+collapseMenu()
+});
+
+
+</script>

fahari/templates/fragments/atoms/sidebar_toggle.html

@@ -1,5 +1,5 @@
 {% load static i18n compress%}
 
-<div class="text-center d-none d-md-inline">
+<div class="text-center d-none d-md-inline text-danger">
     <button class="rounded-circle border-0" id="sidebarToggle"></button>
 </div>

fahari/templates/fragments/sidebar.html

@@ -14,5 +14,6 @@
     <hr class="sidebar-divider">
     <div class="sidebar-heading">Monitoring and Evaluation</div>
     {% include "fragments//atoms/monitoring_and_evaluation_data_entry_menu.html" %}
+    <hr class="sidebar-divider">
     {% include "fragments//atoms/sidebar_toggle.html" %}
-</ul>
+    </ul>

fahari/templates/pages/common/facilities.html

@@ -21,7 +21,7 @@ <h1 class="h3 mb-4 text-gray-800">
         <div class="table-responsive">
             <table
                 id="facilities-list"
-                class="table table-striped table-sm"
+                class="table table-striped table-hover table-sm"
                 style="width:100%"
                 data-server-side="true"
                 data-state-save="true"