diff --git a/assets/controllers/common/hide_sidebar_controller.js b/assets/controllers/common/hide_sidebar_controller.js
new file mode 100644
index 00000000..dbeb8073
--- /dev/null
+++ b/assets/controllers/common/hide_sidebar_controller.js
@@ -0,0 +1,73 @@
+import {Controller} from "@hotwired/stimulus";
+
+const STORAGE_KEY = 'hide_sidebar';
+
+export default class extends Controller {
+    /**
+     * The element representing the sidebar which can be hidden.
+     * @type {HTMLElement}
+     * @private
+     */
+    _sidebar;
+
+    /**
+     * The element of the container which is expanded to the full width.
+     * @type {HTMLElement}
+     * @private
+     */
+    _container;
+
+    /**
+     * The button which toggles the sidebar.
+     * @private
+     */
+    _toggle_button;
+
+    _hidden = false;
+
+    connect() {
+        this._sidebar = document.getElementById('fixed-sidebar');
+        this._container = document.getElementById('main');
+        this._toggle_button = this.element;
+
+        //Make the state persistent over reloads
+        if(localStorage.getItem(STORAGE_KEY) === 'true') {
+            sidebarHide();
+        }
+    }
+
+    hideSidebar() {
+        this._sidebar.classList.add('d-none');
+
+        this._container.classList.remove(...['col-md-9', 'col-lg-10', 'offset-md-3', 'offset-lg-2']);
+        this._container.classList.add('col-12');
+
+        //Change button icon
+        this._toggle_button.innerHTML = '<i class="fas fa-angle-right"></i>';
+
+        localStorage.setItem(STORAGE_KEY, 'true');
+        this._hidden = true;
+    }
+
+    showSidebar() {
+        this._sidebar.classList.remove('d-none');
+
+        this._container.classList.remove('col-12');
+        this._container.classList.add(...['col-md-9', 'col-lg-10', 'offset-md-3', 'offset-lg-2']);
+
+
+        //Change button icon
+        this._toggle_button.innerHTML = '<i class="fas fa-angle-left"></i>';
+
+        localStorage.setItem(STORAGE_KEY, 'false');
+        this._hidden = false;
+    }
+
+    toggleSidebar() {
+        if(this._hidden) {
+            this.showSidebar();
+        } else {
+            this.hideSidebar();
+        }
+    }
+}
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
index 3dc91240..283cde23 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -40,7 +40,6 @@ import '@fortawesome/fontawesome-free/css/all.css'
 
 require('bootstrap');
 
-import "./sidebar"
 import "./datatables";
 import "./error_handler";
 import "./tab_remember";
diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js
deleted file mode 100644
index 606bdc6b..00000000
--- a/assets/js/sidebar.js
+++ /dev/null
@@ -1,60 +0,0 @@
-'use strict';
-
-import "patternfly-bootstrap-treeview/src/css/bootstrap-treeview.css"
-import "patternfly-bootstrap-treeview";
-
-class SidebarHelper {
-    constructor() {
-        this.BASE = $("body").data("base-url");
-        //If path doesn't end with slash, add it.
-        if(this.BASE[this.BASE.length - 1] !== '/') {
-            this.BASE = this.BASE + '/';
-        }
-        console.info("Base path is " + this.BASE);
-
-        this.registerSidebarHideButton();
-        //this.fillTrees();
-    }
-
-    registerSidebarHideButton()
-    {
-        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();
-            }
-        });
-    }
-}
-
-export default new SidebarHelper();
\ No newline at end of file
diff --git a/templates/_sidebar.html.twig b/templates/_sidebar.html.twig
index 5aeb1a3c..b95ef13f 100644
--- a/templates/_sidebar.html.twig
+++ b/templates/_sidebar.html.twig
@@ -6,49 +6,4 @@
     {{ tree.treeview_sidebar('sidebar-panel-1', 'categories') }}
     {{ tree.treeview_sidebar('sidebar-panel-2', 'devices') }}
     {{ tree.treeview_sidebar('sidebar-panel-3', 'tools') }}
-
-    {# <li id="treeBox-categories">
-        <div class="input-group input-group-sm mb-2 mt-1">
-            <button class="btn btn-light dropdown-toggle" type="button"
-                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-            ><span class="sidebar-title" id="tree-categories-title">{% trans %}category.labelp{% endtrans %}</span></button>
-            <ul class="dropdown-menu" aria-labelledby="dropdownCat">
-                {{ _self.sidebar_dropdown('tree-categories') }}
-            </ul>
-            <input type="search" class="form-control bg-light border-0" id="tree-category-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
-        </div>
-
-        <div id="tree-categories" data-tree-search="#tree-category-search"></div>
-    </li>
-    <li id="treeBox-devices" class="d-sm-none d-md-block">
-        <div class="input-group input-group-sm mb-2 mt-2">
-            <button class="btn btn-light dropdown-toggle" type="button"
-                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-            ><span class="sidebar-title" id="tree-devices-title">{% trans %}device.labelp{% endtrans %}</span></button>
-
-            <ul class="dropdown-menu" aria-labelledby="dropdownDev">
-                {{ _self.sidebar_dropdown('tree-devices') }}
-            </ul>
-            <input type="search" class="form-control bg-light border-0" id="tree-devices-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
-        </div>
-
-        <div id="tree-devices" data-tree-search="#tree-devices-search"></div>
-    </li>
-
-    <li id="treeBox-tools">
-        <div class="input-group input-group-sm mb-2 mt-2">
-            <button class="btn btn-light dropdown-toggle" type="button"
-                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-            ><span class="sidebar-title" id="tree-tools-title">{% trans %}tools.label{% endtrans %}</span></button>
-
-            <ul class="dropdown-menu" aria-labelledby="dropdownTools">
-                {{ _self.sidebar_dropdown('tree-tools') }}
-            </ul>
-
-            <input type="search" class="form-control bg-light border-0" id="tree-tools-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
-
-        </div>
-
-        <div id="tree-tools" data-tree-search="#tree-tools-search"></div>
-    </li> #}
 </div>
\ No newline at end of file
diff --git a/templates/base.html.twig b/templates/base.html.twig
index a7ec1300..07638c9d 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -82,9 +82,6 @@
                 </div>
 
                 <div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 ps-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 me-0 pe-0" id="content-container">
                         <turbo-frame id="content" data-turbo-action="advance">
                             {# Here will be the real content be injected#}
@@ -112,6 +109,12 @@
         <i class="fas fa-angle-up fa-fw"></i>
     </button>
 
+    {# Must be outside of the sidebar or it will be hidden too #}
+    <button class="btn btn-outline-dark btn-sm p-0" type="button" id="sidebar-toggle-button" title="{% trans %}sidebar.big.toggle{% endtrans %}"
+            {{ stimulus_controller('common/hide_sidebar') }} {{ stimulus_action('common/hide_sidebar', 'toggleSidebar') }}>
+        <i class="fas fa-angle-left"></i>
+    </button>
+
 {% endblock %}
 
 </body>