Added an button to hide the sidebar.

Feature wished by Mr.AtiX. That way you can view tables in full screen.

assets/css/app.css

@@ -139,6 +139,23 @@ body {
     filter: blur(2px);
 }
 
+/*
+The sidebar toggle button floats on the left side and is hidden when the viewport is to small for
+showing the sidebar (on devices with md or higher)
+ */
+#sidebar-toggle-button {
+    position: fixed;
+    left: 3px;
+    bottom: 50%;
+}
+
+@media (max-width: 576px) {
+    #sidebar-toggle-button {
+       display: none;
+    }
+}
+
+
 /********************************
 * Toasts
  ********************************/
@@ -656,6 +673,8 @@ table.dataTable {
     margin-top: 0 !important;
 }
 
+
+
 /*********************************
     Workarounds
  *********************************/

assets/ts_src/event_listeners.ts

@@ -304,6 +304,49 @@ $(document).on("ajaxUI:reload ajaxUI:start", function () {
     });
 });
 
+/*
+ * Register the button which is used to 
+ */
+$(document).on("ajaxUI:start", function() {
+    let $sidebar = $("#fixed-sidebar");
+    let $container = $("#main");
+    let $toggler = $('#sidebar-toggle-button');
+
+    function sidebarHide() {
+        $sidebar.hide();
+        $container.removeClass('col-md-9 col-lg-10 offset-md-3 offset-lg-2');
+        $container.addClass('col-12');
+        $toggler.html('<i class="fas fa-angle-right"></i>');
+        $toggler.data('hidden', true);
+        localStorage.setItem('sidebarHidden', 'true');
+    }
+    function sidebarShow() {
+        let $sidebar = $("#fixed-sidebar");
+        $sidebar.show();
+        let $container = $("#main");
+        $container.removeClass('col-12');
+        $container.addClass('col-md-9 col-lg-10 offset-md-3 offset-lg-2');
+        $toggler.html('<i class="fas fa-angle-left"></i>');
+        $toggler.data('hidden', false);
+        localStorage.setItem('sidebarHidden', 'false');
+    }
+
+    //Make the state persistent over reloads
+    if(localStorage.getItem('sidebarHidden') === 'true') {
+        sidebarHide();
+    }
+
+    //Register handler
+    $toggler.click(function() {
+        if($(this).data('hidden')) {
+            sidebarShow();
+        } else {
+            sidebarHide();
+        }
+    });
+
+});
+
 
 //Need for proper body padding, with every navbar height
 $(window).resize(function () {

templates/base.html.twig

@@ -40,6 +40,9 @@
                 </div>
 
                 <div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 pl-0" id="main">
+                    <button class="btn btn-outline-dark btn-sm p-0" type="button" id="sidebar-toggle-button" title="{% trans %}sidebar.big.toggle{% endtrans %}">
+                        <i class="fas fa-angle-left"></i>
+                    </button>
                     <div class="container-fluid mr-0 pr-0" id="content">
                         <div id="content-data">
                             {# Here will be the real content be injected#}