Don't use Bootstrap switches in layers menu

css/app.css

@@ -1,3 +1,20 @@
+:root {
+    --toggle-background-color-on: #6da0ff;
+    --toggle-background-color-off: darkgray;
+    --toggle-width: 32px;
+    --toggle-height: 15px;
+    --toggle-gutter: 2px;
+    --toggle-radius: 50%;
+    --toggle-control-size: 40px;
+    --toggle-control-color: white;
+    --toggle-control-speed: .15s;
+    --toggle-control-ease: ease-in;
+
+    /** Don't change calculated values! **/
+    --toggle-radius: calc(var(--toggle-height) / 2);
+    --toggle-control-size: calc(var(--toggle-height) - (var(--toggle-gutter) * 2));
+}
+
 body {
     height: 100vh;
 }
@@ -116,3 +133,56 @@ span:focus {
         width: 10em; 
   }
 }
+/**
+* Toggle switch styles
+* From: https://codepen.io/AriTheElk/pen/YmxYZr
+*/
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: var(--toggle-width);
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 18px;
+  user-select: none;
+  color: #fff;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: var(--toggle-background-color-on);
+    
+    &:after {
+      left: calc(var(--toggle-width) - var(--toggle-control-size) - var(--toggle-gutter));
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: 25%;
+    left: 0;
+    height: var(--toggle-height);
+    width: var(--toggle-width);
+    border-radius: var(--toggle-radius);
+    background-color: var(--toggle-background-color-off);
+    transition: background-color var(--toggle-control-speed) var(--toggle-control-ease);
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: var(--toggle-gutter);
+      top: var(--toggle-gutter);
+      width: var(--toggle-control-size);
+      height: var(--toggle-control-size);
+      border-radius: var(--toggle-radius);
+      background: var(--toggle-control-color);
+      transition: left var(--toggle-control-speed) var(--toggle-control-ease);
+    }
+  }
+}

js/controllers/menu_controller.js

@@ -97,6 +97,12 @@ export default class extends Controller {
      * @param {HTMLElement} tab Tab content element
      */
     #buildLayersMenu(tree, tab) {
+        const heading = document.createElement('h1');
+        heading.classList.add('fs-5', 'fw-bold', 'ms-0');
+        heading.textContent = 'Teatro'; // Hard-coded!!
+
+        tab.appendChild(heading);
+
         for (const node of tree) {
             tab.appendChild(
                 node.children.length > 0
@@ -110,17 +116,17 @@ export default class extends Controller {
      * @returns {HTMLDivElement}
      */
     #createLayerToggle(node) {
-        const checkbox = html`
+        const toggle = html`
-            <div class="form-check form-switch ms-${node.depth} ps-${node.depth} mt-2">
+            <label class="toggle-control ms-${node.depth} ps-${node.depth} mt-1 mb-1">
-                <input class="form-check-input" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
+                <input id="${node.id}" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
-                    title="Mostra / nascondi layer"
                     data-menu-node-param="${node.id}"
                     data-action="change->menu#toggleNode">
-                <label class="form-check-label">${node.id}</label>
+                <span class="control"></span>
-            </div>
+                <span class="ms-4 ps-1 fs-6" title="Mostra / nascondi layer">${node.id}</span>
+            </label>
         `;
 
-        return domParser.parseFromString(checkbox, 'text/html').querySelector('div');
+        return domParser.parseFromString(toggle, 'text/html').querySelector('label');
     }
     /**
      * @param {import("../state.js").NormalizedSceneNode} node 

scenes/ssgp/index.html

@@ -146,8 +146,8 @@
             </li>
         </ul>
         <!-- Tab panes -->
-        <div class="tab-content ps-4 ms-3 overflow-y-auto">
+        <div class="tab-content ps-2 ms-2 overflow-y-auto">
-            <div class="tab-pane active p-3 ms-2" data-menu-target="layers" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
+            <div class="tab-pane active ps-3 pt-0 mt-4 ms-0 border-start" data-menu-target="layers" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
             <div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0">
                 <!-- Temporary -->
                 <ul class="list-group me-4 ms-0">