Hiden menu

core/views/_cms.head.php

@@ -57,7 +57,7 @@
                     require_once DIR_PHP_VIEWS."_cms.menu.php";
                 ?>
 
-                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+                <main class="col-md-9 ms-sm-auto col-lg-12 px-md-4" id="main-content">
     <?php   
         user::printIsSecur();
     ?>

core/views/_cms.menu.php

@@ -1,7 +1,6 @@
-<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+<nav id="sidebarMenu" class="col-md-3 col-lg-2 bg-light sidebar collapse">
     <div class="position-sticky pt-2">
         <ul class="nav flex-column" id="accordion">
-
             <?php
             $temp_accordion = array("rh-liste-salaries", "rh-historique-excel", "rh-upload-excel", "rh-import-to-temp", "stats");
             (in_array(core::getGet("p"), $temp_accordion) or get::isDefautMenu($temp_accordion)) ? $_show = "show" : $_show = NULL;
@@ -94,4 +93,35 @@
     <div style="position: absolute; bottom: 0; margin: 0 0 5px 10px; color: gray;">
         <small>Chargement le <?php echo core::printDateTxt(); ?></small>
     </div>
-</nav>
+</nav>
+
+<script>
+$(document).ready(function() {
+    var isSidebarVisible = false;
+
+    $("#closebtn").click(function() {
+        if (isSidebarVisible) {
+            $("#sidebarMenu").animate({
+                left: "-=280px"
+            }, 500, function() {
+                $(this).fadeOut(100, function() { 
+                    $(this).removeClass("d-md-block");
+                });
+                $("#ic-bt-nav-left").hide();
+                $("#ic-bt-nav-right").show();
+            });
+        } else {
+            $("#sidebarMenu").fadeIn(100, function() { 
+                $(this).animate({
+                    left: "+=280px"
+                }, 500, function() { 
+                    $(this).addClass("d-md-block");
+                    $("#ic-bt-nav-left").show();
+                    $("#ic-bt-nav-right").hide();
+                });
+            });
+        }
+        isSidebarVisible = !isSidebarVisible; 
+    });
+});
+</script>

core/views/_cms.nav.php

@@ -15,6 +15,9 @@
 ?>
 <header class="navbar sticky-top navbar-expand-sm navbar-dark flex-md-nowrap p-0 shadow" style="background-color:<?php echo $navInfos["color"] ?>;">
     <div class="container-fluid">
+    <button class="btn btn-light" id="closebtn" type="button"  style="margin-right:10px; padding:3px 5px 2px 5px; font-size:17px;">
+    <i id="ic-bt-nav-left" class="bi bi-arrow-bar-left" style="display:none;"></i> MENU <i id="ic-bt-nav-right" class="bi bi-arrow-bar-right"></i>
+    </button>
         <?php core::menu($navInfos) ?>
     </div>
 </header>    

public-cms/css/dashboard.css

@@ -20,15 +20,12 @@ body {
 .sidebar {
     position: fixed;
     top: 0;
-    /* rtl:raw:
-    right: 0;
-    */
     bottom: 0;
-    /* rtl:remove */
-    left: 0;
-    z-index: 100; /* Behind the navbar */
-    padding: 48px 0 0; /* Height of navbar */
+    left: -280px;
+    z-index: 100;
+    padding: 48px 0 0;
     box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+    width: 280px;
 }
 
 @media (max-width: 767.98px) {