Updated hamburger menu

diff --git a/frontend/css/layout.css b/frontend/css/layout.css
index cd67a28f36c026fc268bee7207fb4a3ed8959e4b..83403ba33f07ec0729c8bfa2259d46e4c285a122 100644 (file)
--- a/frontend/css/layout.css
+++ b/frontend/css/layout.css
@@ -364,7 +364,7 @@ i.bi {
     position: relative;
     margin: 20px;
     width: calc(100% - 40px);
-    max-height: calc(100vh - 185px);
+    max-height: calc(100vh - 174px);
     overflow-x: auto;
     overflow-y: auto;
     border-radius: 10px;

diff --git a/frontend/devices.html b/frontend/devices.html
index 00093579e8b9397889bd4f4ff77874a553527913..2826b2c83e2eaa2d966382113b381696b641960a 100644 (file)
--- a/frontend/devices.html
+++ b/frontend/devices.html
@@ -36,26 +36,51 @@
                 <span>Network Manager</span>
             </a>
 
-            <!-- Spacer -->
-            <div class="col d-none d-md-block"></div>
-
-            <nav class="navbar navbar-expand-md px-3">
-                <!-- Bottone hamburger -->
-                <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav">
-                    <span class="navbar-toggler-icon"></span>
+            <nav class="navbar">
+                <!-- Hamburger -->
+                <button
+                    class="btn btn-primary d-md-none"
+                    type="button"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#mobileMenu">
+                    <i class="bi bi-list fs-4"></i>
                 </button>
-                <!-- Menu -->
-                <div class="collapse navbar-collapse" id="menuNav">
-                    <div class="navbar-nav ms-auto gap-2">
-                        <a href="/hosts"   id="hostsBtn"     class="btn btn-primary"        aria-current="page">Hostname</a>
-                        <a href="/aliases" id="aliasesBtn"   class="btn btn-primary"        aria-current="page">Alias</a>
-                        <a href="/leases"  id="leasesBtn"    class="btn btn-primary"        aria-current="page">DHCP Leases</a>
-                        <a href="/devices" id="devicesBtn"   class="btn btn-primary active" aria-current="page">Devices</a>
-                        <a href="/settings" id="settingsBtn" class="btn btn-primary"        aria-current="page">Settings</a>
-                        <button id="logoutBtn" class="btn btn-primary">Logout</button>
-                    </div>
+
+                <!-- Desktop nav -->
+                <div class="d-none d-md-flex gap-2 ms-auto">
+                        <a href="/hosts"    class="btn btn-primary">       Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary">       Alias</a>
+                        <a href="/leases"   class="btn btn-primary">       DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary active">Devices</a>
+                        <a href="/settings" class="btn btn-primary">       Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
                 </div>
             </nav>
+
+            <!-- Mobile offcanvas -->
+            <div class="offcanvas offcanvas-end d-md-none" tabindex="-1" id="mobileMenu">
+
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title">Network Manager</h5>
+
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="offcanvas">
+                    </button>
+                </div>
+
+                <div class="offcanvas-body">
+                    <div class="d-grid gap-2">
+                        <a href="/hosts"    class="btn btn-primary">       Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary">       Alias</a>
+                        <a href="/leases"   class="btn btn-primary">       DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary active">Devices</a>
+                        <a href="/settings" class="btn btn-primary">       Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
+                    </div>
+                </div>
+            </div>
         </div>
     </header>
 
@@ -104,7 +129,7 @@
                     </div>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Add host -->
                     <button
@@ -113,11 +138,11 @@
                             aria-label="Add Host"
                             data-bs-toggle="modal" data-bs-target="#addHostModal">
                         <i class="bi bi-plus-lg"></i>
-                        <span class="label"> Add Host</span>
+                        <span class="label d-none d-md-block"> Add Host</span>
                     </button>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Reload DNS -->
                     <button
@@ -126,7 +151,7 @@
                             aria-label="Reload DNS"
                             data-action="reloadDns">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label"> Reload DNS</span>
+                        <span class="label d-none d-md-block"> Reload DNS</span>
                     </button>
 
                     <!-- Reload DNS -->
@@ -135,7 +160,7 @@
                             aria-label="Reload DHCP"
                             data-action="reloadDhcp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label"> Reload DHCP</span>
+                        <span class="label d-none d-md-block"> Reload DHCP</span>
                     </button>
                 </div>
             </div>

diff --git a/frontend/hosts.html b/frontend/hosts.html
index 15a287582402545042f1ed73fb71d2cf384517c1..d637dd4a48208ae88ceb7a0012bc7578649d6c48 100644 (file)
--- a/frontend/hosts.html
+++ b/frontend/hosts.html
@@ -36,26 +36,51 @@
                 <span>Network Manager</span>
             </a>
 
-            <!-- Spacer -->
-            <div class="col d-none d-md-block"></div>
-
-            <nav class="navbar navbar-expand-md px-3">
-                <!-- Bottone hamburger -->
-                <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav">
-                    <span class="navbar-toggler-icon"></span>
+            <nav class="navbar">
+                <!-- Hamburger -->
+                <button
+                    class="btn btn-primary d-md-none"
+                    type="button"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#mobileMenu">
+                    <i class="bi bi-list fs-4"></i>
                 </button>
-                <!-- Menu -->
-                <div class="collapse navbar-collapse" id="menuNav">
-                    <div class="navbar-nav ms-auto gap-2">
-                        <a href="/hosts"   id="hostsBtn"     class="btn btn-primary active" aria-current="page">Hostname</a>
-                        <a href="/aliases" id="aliasesBtn"   class="btn btn-primary"        aria-current="page">Alias</a>
-                        <a href="/leases"  id="leasesBtn"    class="btn btn-primary"        aria-current="page">DHCP Leases</a>
-                        <a href="/devices" id="devicesBtn"   class="btn btn-primary"        aria-current="page">Devices</a>
-                        <a href="/settings" id="settingsBtn" class="btn btn-primary"        aria-current="page">Settings</a>
-                        <button id="logoutBtn" class="btn btn-primary">Logout</button>
-                    </div>
+
+                <!-- Desktop nav -->
+                <div class="d-none d-md-flex gap-2 ms-auto">
+                        <a href="/hosts"    class="btn btn-primary active">Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary">       Alias</a>
+                        <a href="/leases"   class="btn btn-primary">       DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary">       Devices</a>
+                        <a href="/settings" class="btn btn-primary">       Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
                 </div>
             </nav>
+
+            <!-- Mobile offcanvas -->
+            <div class="offcanvas offcanvas-end d-md-none" tabindex="-1" id="mobileMenu">
+
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title">Network Manager</h5>
+
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="offcanvas">
+                    </button>
+                </div>
+
+                <div class="offcanvas-body">
+                    <div class="d-grid gap-2">
+                        <a href="/hosts"    class="btn btn-primary active">Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary">       Alias</a>
+                        <a href="/leases"   class="btn btn-primary">       DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary">       Devices</a>
+                        <a href="/settings" class="btn btn-primary">       Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
+                    </div>
+                </div>
+            </div>
         </div>
     </header>
 
@@ -104,7 +129,7 @@
                     </div>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Add host -->
                     <button
@@ -113,11 +138,11 @@
                             aria-label="Add Host"
                             data-bs-toggle="modal" data-bs-target="#addHostModal">
                         <i class="bi bi-plus-lg"></i>
-                        <span class="label"> Add Host</span>
+                        <span class="label d-none d-md-block"> Add Host</span>
                     </button>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Reload DNS -->
                     <button
@@ -126,7 +151,7 @@
                             aria-label="Reload DNS"
                             data-action="reloadDns">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label"> Reload DNS</span>
+                        <span class="label d-none d-md-block"> Reload DNS</span>
                     </button>
 
                     <!-- Reload DNS -->
@@ -135,7 +160,7 @@
                             aria-label="Reload DHCP"
                             data-action="reloadDhcp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label"> Reload DHCP</span>
+                        <span class="label d-none d-md-block"> Reload DHCP</span>
                     </button>
                 </div>
             </div>
@@ -178,7 +203,7 @@
                     </th>
 
                     <th data-type="string" data-sortable="false" class="text-center text-nowrap">
-                        Actions <span class="sort-arrow invisible" aria-hidden="true"></span>
+                        Actions
                     </th>
                 </tr>
             </thead>

diff --git a/frontend/index.html b/frontend/index.html
index 6c71f9921355b3d8d54ac37c930f32bcc9f2cd6c..7616bcba21432c6e0d1a50f796dc100ee51e1f5b 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -36,22 +36,43 @@
                 <span>Network Manager</span>
             </a>
 
-            <!-- Spacer -->
-            <div class="col d-none d-md-block"></div>
-
-            <nav class="navbar navbar-expand-md px-3">
-                <!-- Bottone hamburger -->
-                <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav">
-                    <span class="navbar-toggler-icon"></span>
+            <nav class="navbar">
+                <!-- Hamburger -->
+                <button
+                    class="btn btn-primary d-md-none"
+                    type="button"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#mobileMenu">
+                    <i class="bi bi-list fs-4"></i>
                 </button>
-                <!-- Menu -->
-                <div class="collapse navbar-collapse" id="menuNav">
-                    <div class="navbar-nav ms-auto gap-2">
-                        <button id="api-pill" class="btn btn-outline-primary" title="API Status" aria-label="API Status" data-action="apiCheck">API Status</button>
-                        <button id="logoutBtn" class="btn btn-primary">Logout</button>
-                    </div>
+
+                <!-- Desktop nav -->
+                <div class="d-none d-md-flex gap-2 ms-auto">
+                        <button class="btn btn-outline-primary btn-api" title="API Status" aria-label="API Status" data-action="apiCheck">API Status</button>
+                        <button class="btn btn-primary btn-logout">Logout</button>
                 </div>
             </nav>
+
+            <!-- Mobile offcanvas -->
+            <div class="offcanvas offcanvas-end d-md-none" tabindex="-1" id="mobileMenu">
+
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title">Network Manager</h5>
+
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="offcanvas">
+                    </button>
+                </div>
+
+                <div class="offcanvas-body">
+                    <div class="d-grid gap-2">
+                        <button class="btn btn-outline-primary btn-api" title="API Status" aria-label="API Status" data-action="apiCheck">API Status</button>
+                        <button class="btn btn-primary btn-logout">Logout</button>
+                    </div>
+                </div>
+            </div>
         </div>
     </header>
 
@@ -62,6 +83,7 @@
     <section class="page-frame">
         <div class="container-fluid p-0">
             <div class="row g-2 align-items-center">
+
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">

diff --git a/frontend/js/aliases.js b/frontend/js/aliases.js
index 042d0b1159f32ab3e5e61323091d0e094c41cbd1..f3eb2e182f183bf61cb786c5664777096468fc68 100644 (file)
--- a/frontend/js/aliases.js
+++ b/frontend/js/aliases.js
@@ -35,9 +35,11 @@ async function fetchAliases () {
         allAliases = [];
         viewAliases = [];
         // hide loader and show table
-        loader.style.display = "none";
         tableWrapper.classList.remove("d-none");
     }
+    finally {
+        loader.style.display = "none";
+    }
 }
 
 // -----------------------------
@@ -61,7 +63,7 @@ function updateTable () {
     if (!viewAliases.length) {
         const trEmpty = document.createElement("tr");
         const tdEmpty = document.createElement("td");
-        tdEmpty.colSpan = 7;
+        tdEmpty.colSpan = 5;
         tdEmpty.textContent = "No alias available.";
         tdEmpty.style.textAlign = "center";
         trEmpty.appendChild(tdEmpty);
@@ -234,7 +236,7 @@ function updateTable () {
     const term =
         document.getElementById('searchInput')?.value ||
         document.getElementById('searchInputMobile')?.value;
-    if (term) {
+    if (term?.trim()) {
         handleSearch(term);
     }
 }
@@ -533,7 +535,7 @@ function initModalLifecycle() {
                 showToast(err?.message || "Error loading alias", false);
                 // Close modal
                 modalEl.addEventListener('shown.bs.modal', () => {
-                    closeAddAliasModal(lastTriggerEl);
+                    closeAddAliasModal();
                 }, { once: true });
             }
         } else {

diff --git a/frontend/js/devices.js b/frontend/js/devices.js
index d8273e3c3a200774d8cc564acc43be9f2825afc5..97485987cc75d19ec98fa9ccaff9bda7f00cc594 100644 (file)
--- a/frontend/js/devices.js
+++ b/frontend/js/devices.js
@@ -35,9 +35,11 @@ async function fetchDevices () {
         allDevices = [];
         viewDevices = [];
         // hide loader and show table
-        loader.style.display = "none";
         tableWrapper.classList.remove("d-none");
     }
+    finally {
+        loader.style.display = "none";
+    }
 }
 
 // -----------------------------
@@ -295,7 +297,7 @@ function updateTable () {
     const term =
         document.getElementById('searchInput')?.value ||
         document.getElementById('searchInputMobile')?.value;
-    if (term) {
+    if (term?.trim()) {
         handleSearch(term, filterTable);
     }
 }
@@ -662,7 +664,7 @@ function initModalLifecycle() {
                 showToast(err?.message || "Error loading host", false);
                 // Close modal
                 modalEl.addEventListener('shown.bs.modal', () => {
-                    closeAddHostModal(lastTriggerEl);
+                    closeAddHostModal();
                 }, { once: true });
             }
         } else {

diff --git a/frontend/js/hosts.js b/frontend/js/hosts.js
index daf4569187f1fd9fa61525f98fd39777bb22f163..788350aeb2452ac42d8e6348dfce28b3df4d8714 100644 (file)
--- a/frontend/js/hosts.js
+++ b/frontend/js/hosts.js
@@ -35,9 +35,11 @@ async function fetchHosts () {
         allHosts = [];
         viewHosts = [];
         // hide loader and show table
-        loader.style.display = "none";
         tableWrapper.classList.remove("d-none");
     }
+    finally {
+        loader.style.display = "none";
+    }
 }
 
 // -----------------------------
@@ -61,7 +63,7 @@ function updateTable () {
     if (!viewHosts.length) {
         const trEmpty = document.createElement("tr");
         const tdEmpty = document.createElement("td");
-        tdEmpty.colSpan = 7;
+        tdEmpty.colSpan = 6;
         tdEmpty.textContent = "No hosts available.";
         tdEmpty.style.textAlign = "center";
         trEmpty.appendChild(tdEmpty);
@@ -244,7 +246,7 @@ function updateTable () {
     const term =
         document.getElementById('searchInput')?.value ||
         document.getElementById('searchInputMobile')?.value;
-    if (term) {
+    if (term?.trim()) {
         handleSearch(term, filterTable);
     }
 }
@@ -558,7 +560,7 @@ function initModalLifecycle() {
                 showToast(err?.message || "Error loading host", false);
                 // Close modal
                 modalEl.addEventListener('shown.bs.modal', () => {
-                    closeAddHostModal(lastTriggerEl);
+                    closeAddHostModal();
                 }, { once: true });
             }
         } else {

diff --git a/frontend/js/index.js b/frontend/js/index.js
index f8bed2a1a551082508ba7610ca0398604cf1d354..99037807a23ff87dd90f06cf8d639afa8a9b21b5 100644 (file)
--- a/frontend/js/index.js
+++ b/frontend/js/index.js
@@ -42,18 +42,23 @@ function closeBackupModal() {
 // Manage Backup List Rendering (usa fetchData() con apiMap.backups)
 // -------------------------------------------------------
 export async function serviceCheckAbout() {
-    const pill = document.getElementById('api-pill');
-    if (!pill) return;
+    const pills = document.querySelectorAll('.btn-api');
+
+    if (!pills.length) return;
 
     const ok = await serviceIsAlive();
 
-    if (ok) {
-        pill.textContent = 'API OK';
-        pill.classList.remove('btn-outline-primary');
-        pill.classList.add('btn-primary');
-    } else {
-        pill.textContent = 'API OFFLINE';
-    }
+    pills.forEach(pill => {
+
+        if (ok) {
+            pill.textContent = 'API OK';
+            pill.classList.remove('btn-outline-primary');
+            pill.classList.add('btn-primary');
+
+        } else {
+            pill.textContent = 'API OFFLINE';
+        }
+    });
 
     return ok;
 }

diff --git a/frontend/js/leases.js b/frontend/js/leases.js
index 77504e15ec48ec39235154a7ec05269362da698c..3e139e6f27387b0b208922304c0b6d74647cdec7 100644 (file)
--- a/frontend/js/leases.js
+++ b/frontend/js/leases.js
@@ -34,9 +34,11 @@ async function fetchLeases () {
         allLeases = [];
         viewLeases = [];
         // hide loader and show table
-        loader.style.display = "none";
         tableWrapper.classList.remove("d-none");
     }
+    finally {
+        loader.style.display = "none";
+    }
 }
 
 // -----------------------------
@@ -259,7 +261,7 @@ function updateTable () {
     const term =
         document.getElementById('searchInput')?.value ||
         document.getElementById('searchInputMobile')?.value;
-    if (term) {
+    if (term?.trim()) {
         handleSearch(term, filterTable);
     }
 }
@@ -557,7 +559,7 @@ function initModalLifecycle() {
                 showToast(err?.message || "Error loading host", false);
                 // Close modal
                 modalEl.addEventListener('shown.bs.modal', () => {
-                    closeAddHostModal(lastTriggerEl);
+                    closeAddHostModal();
                 }, { once: true });
             }
         }

diff --git a/frontend/js/session.js b/frontend/js/session.js
index e85e7767256a543cb604b850537288b7e097d2cc..7d552173dbc4db33f87398ada90a966f2381ecfe 100644 (file)
--- a/frontend/js/session.js
+++ b/frontend/js/session.js
@@ -14,8 +14,7 @@ async function handleLogout() {
 // DOMContentLoaded: initialize everything
 // -----------------------------
 document.addEventListener("DOMContentLoaded", () => {
-    const logoutBtn = document.getElementById("logoutBtn");
-    if (logoutBtn) {
-        logoutBtn.addEventListener("click", handleLogout);
-    }
+    document.querySelectorAll(".btn-logout").forEach(btn => {
+        btn.addEventListener("click", handleLogout);
+    });
 });

diff --git a/frontend/js/settings.js b/frontend/js/settings.js
index 59d2def0a28128af1a52ad9caecc0a69eaae91b0..d0b734530f52b0eb319237d34d3dbf7c599e0ac8 100644 (file)
--- a/frontend/js/settings.js
+++ b/frontend/js/settings.js
@@ -76,9 +76,11 @@ async function fetchConfigs () {
         allConfigs = [];
         viewConfigs = [];
         // hide loader and show table
-        loader.style.display = "none";
         tableWrapper.classList.remove("d-none");
     }
+    finally {
+        loader.style.display = "none";
+    }
 }
 
 // -----------------------------
@@ -245,7 +247,7 @@ function updateTable (filter = null) {
     if (!viewConfigs.length) {
         const trEmpty = document.createElement("tr");
         const tdEmpty = document.createElement("td");
-        tdEmpty.colSpan = 7;
+        tdEmpty.colSpan = 4;
         tdEmpty.textContent = "No configs available.";
         tdEmpty.style.textAlign = "center";
         trEmpty.appendChild(tdEmpty);
@@ -786,7 +788,7 @@ function initModalLifecycle() {
                 showToast(err?.message || "Error loading config", false);
                 // Close modal
                 modalEl.addEventListener('shown.bs.modal', () => {
-                    closeEditConfigModal(lastTriggerEl);
+                    closeEditConfigModal();
                 }, { once: true });
             }
         } else {

diff --git a/frontend/leases.html b/frontend/leases.html
index 31afc21a376e6598816d57d2a2f8d807a712504c..5a809f40da6ff38ddd97f49207a4b26b0bc1c980 100644 (file)
--- a/frontend/leases.html
+++ b/frontend/leases.html
@@ -36,26 +36,51 @@
                 <span>Network Manager</span>
             </a>
 
-            <!-- Spacer -->
-            <div class="col d-none d-md-block"></div>
-
-            <nav class="navbar navbar-expand-md px-3">
-                <!-- Bottone hamburger -->
-                <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav">
-                    <span class="navbar-toggler-icon"></span>
+            <nav class="navbar">
+                <!-- Hamburger -->
+                <button
+                    class="btn btn-primary d-md-none"
+                    type="button"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#mobileMenu">
+                    <i class="bi bi-list fs-4"></i>
                 </button>
-                <!-- Menu -->
-                <div class="collapse navbar-collapse" id="menuNav">
-                    <div class="navbar-nav ms-auto gap-2">
-                        <a href="/hosts"   id="hostsBtn"     class="btn btn-primary"        aria-current="page">Hostname</a>
-                        <a href="/aliases" id="aliasesBtn"   class="btn btn-primary"        aria-current="page">Alias</a>
-                        <a href="/leases"  id="leasesBtn"    class="btn btn-primary active" aria-current="page">DHCP Leases</a>
-                        <a href="/devices" id="devicesBtn"   class="btn btn-primary"        aria-current="page">Devices</a>
-                        <a href="/settings" id="settingsBtn" class="btn btn-primary"        aria-current="page">Settings</a>
-                        <button id="logoutBtn" class="btn btn-primary">Logout</button>
-                    </div>
+
+                <!-- Desktop nav -->
+                <div class="d-none d-md-flex gap-2 ms-auto">
+                        <a href="/hosts"    class="btn btn-primary">       Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary">       Alias</a>
+                        <a href="/leases"   class="btn btn-primary active">DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary">       Devices</a>
+                        <a href="/settings" class="btn btn-primary">       Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
                 </div>
             </nav>
+
+            <!-- Mobile offcanvas -->
+            <div class="offcanvas offcanvas-end d-md-none" tabindex="-1" id="mobileMenu">
+
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title">Network Manager</h5>
+
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="offcanvas">
+                    </button>
+                </div>
+
+                <div class="offcanvas-body">
+                    <div class="d-grid gap-2">
+                        <a href="/hosts"    class="btn btn-primary">       Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary">       Alias</a>
+                        <a href="/leases"   class="btn btn-primary active">DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary">       Devices</a>
+                        <a href="/settings" class="btn btn-primary">       Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
+                    </div>
+                </div>
+            </div>
         </div>
     </header>
 
@@ -104,7 +129,7 @@
                     </div>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Add host -->
                     <button
@@ -113,11 +138,11 @@
                             aria-label="Add Host"
                             data-bs-toggle="modal" data-bs-target="#addHostModal">
                         <i class="bi bi-plus-lg"></i>
-                        <span class="label"> Add Host</span>
+                        <span class="label d-none d-md-block"> Add Host</span>
                     </button>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Reload DNS -->
                     <button
@@ -126,7 +151,7 @@
                             aria-label="Reload DNS"
                             data-action="reloadDns">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label"> Reload DNS</span>
+                        <span class="label d-none d-md-block"> Reload DNS</span>
                     </button>
 
                     <!-- Reload DNS -->
@@ -135,7 +160,7 @@
                             aria-label="Reload DHCP"
                             data-action="reloadDhcp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label"> Reload DHCP</span>
+                        <span class="label d-none d-md-block"> Reload DHCP</span>
                     </button>
                 </div>
             </div>

diff --git a/frontend/settings.html b/frontend/settings.html
index 98df7d2124485e6ab24a542f09c359b7e3483e51..b34c911da8292b2730231048ee4284613009e3ea 100644 (file)
--- a/frontend/settings.html
+++ b/frontend/settings.html
@@ -36,26 +36,51 @@
                 <span>Network Manager</span>
             </a>
 
-            <!-- Spacer -->
-            <div class="col d-none d-md-block"></div>
-
-            <nav class="navbar navbar-expand-md px-3">
-                <!-- Bottone hamburger -->
-                <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#menuNav">
-                    <span class="navbar-toggler-icon"></span>
+            <nav class="navbar">
+                <!-- Hamburger -->
+                <button
+                    class="btn btn-primary d-md-none"
+                    type="button"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#mobileMenu">
+                    <i class="bi bi-list fs-4"></i>
                 </button>
-                <!-- Menu -->
-                <div class="collapse navbar-collapse" id="menuNav">
-                    <div class="navbar-nav ms-auto gap-2">
-                        <a href="/hosts"   id="hostsBtn"     class="btn btn-primary"        aria-current="page">Hostname</a>
-                        <a href="/aliases" id="aliasesBtn"   class="btn btn-primary"        aria-current="page">Alias</a>
-                        <a href="/leases"  id="leasesBtn"    class="btn btn-primary"        aria-current="page">DHCP Leases</a>
-                        <a href="/devices" id="devicesBtn"   class="btn btn-primary"        aria-current="page">Devices</a>
-                        <a href="/settings" id="settingsBtn" class="btn btn-primary active" aria-current="page">Settings</a>
-                        <button id="logoutBtn" class="btn btn-primary">Logout</button>
-                    </div>
+
+                <!-- Desktop nav -->
+                <div class="d-none d-md-flex gap-2 ms-auto">
+                        <a href="/hosts"    class="btn btn-primary">       Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary">       Alias</a>
+                        <a href="/leases"   class="btn btn-primary">       DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary">       Devices</a>
+                        <a href="/settings" class="btn btn-primary active">Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
                 </div>
             </nav>
+
+            <!-- Mobile offcanvas -->
+            <div class="offcanvas offcanvas-end d-md-none" tabindex="-1" id="mobileMenu">
+
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title">Network Manager</h5>
+
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="offcanvas">
+                    </button>
+                </div>
+
+                <div class="offcanvas-body">
+                    <div class="d-grid gap-2">
+                        <a href="/hosts"    class="btn btn-primary">       Hosts</a>
+                        <a href="/aliases"  class="btn btn-primary">       Alias</a>
+                        <a href="/leases"   class="btn btn-primary">       DHCP Leases</a>
+                        <a href="/devices"  class="btn btn-primary">       Devices</a>
+                        <a href="/settings" class="btn btn-primary active">Settings</a>
+                        <button class="btn btn-primary btn-logout">Logout</button>
+                    </div>
+                </div>
+            </div>
         </div>
     </header>
 
@@ -104,7 +129,7 @@
                     </div>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Expand -->
                     <button id="expandAllBtn"
@@ -112,7 +137,7 @@
                             title="Expand all groups"
                             aria-label="Expand all groups">
                         <i class="bi bi-arrows-expand"></i>
-                        <span class="label">Expand</span>
+                        <span class="label d-none d-md-block">Expand</span>
                     </button>
 
                     <!-- Collapse -->
@@ -121,11 +146,11 @@
                             title="Collapse all groups"
                             aria-label="Collapse all groups">
                         <i class="bi bi-arrows-collapse"></i>
-                        <span class="label">Collapse</span>
+                        <span class="label d-none d-md-block">Collapse</span>
                     </button>
 
                     <!-- Separator -->
-                    <div class="vr mx-2"></div>
+                    <div class="vr mx-2 d-none d-md-block"></div>
 
                     <!-- Restart -->
                     <button class="btn btn-danger d-flex align-items-center gap-2 px-3"
@@ -133,7 +158,7 @@
                             aria-label="Restart system"
                             data-action="restartApp">
                         <i class="bi bi-arrow-repeat"></i>
-                        <span class="label">Restart</span>
+                        <span class="label d-none d-md-block">Restart</span>
                     </button>
                 </div>
             </div>