From 6e6bb7287c81fce247f4eb42b0ecb79957ce3588 Mon Sep 17 00:00:00 2001
From: GabrieleDeri <33870399+DGabri@users.noreply.github.com>
Date: Mon, 22 Jun 2026 18:19:15 +0200
Subject: [PATCH] Ported menu, footer and topbar to vuejs (#10480)

* Ported menu, footer and topbar to vuejs

* Update dist
---
 assets/third-party-npm.js                     |    3 +-
 attic/scripts/lua/inc/footer.lua              |  874 ++++++++
 attic/scripts/lua/inc/menu.lua                | 1431 ++++++++++++
 http_src/components/sidebar/sidebar.scss      |    2 +-
 http_src/extensions/extensions.js             |    2 +-
 .../views/private/clients/white-mode.scss     |    2 +-
 http_src/vue/app-footer.vue                   |  316 +++
 http_src/vue/app-shell.vue                    | 1967 +++++++++++++++++
 http_src/vue/components/search-box.vue        |   86 +-
 http_src/vue/ntop_vue.js                      |   12 +-
 httpdocs/dist                                 |    2 +-
 httpdocs/misc/menu_definition.json            |  774 +++++++
 package.json                                  |    5 +-
 scripts/locales/en.lua                        |   23 +
 scripts/lua/flow_details.lua                  |    2 +-
 scripts/lua/inc/footer.lua                    |  906 +-------
 scripts/lua/inc/menu.lua                      | 1307 +----------
 .../lua/modules/ntopng_menu_visibility.lua    |  284 +++
 scripts/lua/modules/page_utils.lua            |  300 +--
 scripts/lua/rest/v2/get/timeseries/batch.lua  |    4 +
 20 files changed, 5859 insertions(+), 2443 deletions(-)
 create mode 100644 attic/scripts/lua/inc/footer.lua
 create mode 100644 attic/scripts/lua/inc/menu.lua
 create mode 100644 http_src/vue/app-footer.vue
 create mode 100644 http_src/vue/app-shell.vue
 create mode 100644 httpdocs/misc/menu_definition.json
 create mode 100644 scripts/lua/modules/ntopng_menu_visibility.lua

diff --git a/assets/third-party-npm.js b/assets/third-party-npm.js
index f7a9898516..4f9242a9e9 100644
--- a/assets/third-party-npm.js
+++ b/assets/third-party-npm.js
@@ -70,5 +70,4 @@ import * as d3v7 from "d3v7";
 
 window.d3v7 = {
   ...d3v7
-};
-
+};
\ No newline at end of file
diff --git a/attic/scripts/lua/inc/footer.lua b/attic/scripts/lua/inc/footer.lua
new file mode 100644
index 0000000000..4c4363db09
--- /dev/null
+++ b/attic/scripts/lua/inc/footer.lua
@@ -0,0 +1,874 @@
+--
+-- (C) 2013-26 - ntop.org
+--
+require "os"
+require "lua_utils"
+
+local ts_utils = require("ts_utils_core")
+
+local template = require "template_utils"
+local stats_utils = require("stats_utils")
+local page_utils = require "page_utils"
+local have_nedge = ntop.isnEdge()
+local info = ntop.getInfo(true)
+local is_admin = isAdministrator()
+local maxSpeed
+
+local ifid = interface.getId()
+local _ifstats = interface.getStats()
+local http_prefix = ntop.getHttpPrefix()
+local random_csrf = ntop.getRandomCSRFValue()
+local is_pcap_dump_iface = interface.isPcapDumpInterface()
+
+if not is_pcap_dump_iface and not have_nedge then
+    -- if the speed in not custom we try to read the speed from the interface
+    -- and, as a final resort, we use 1Gbps
+    if tonumber(_ifstats.speed) ~= nil then
+        maxSpeed = tonumber(_ifstats.speed) * 1e6
+    else
+        maxSpeed = 1000000000 -- 1 Gbit
+    end
+end -- closes is_pcap_dump_iface == false
+
+if not info.oem then
+
+    -- print ([[
+    -- <hr>
+    -- <footer id="n-footer">
+    -- 	<div class="container-fluid">
+    -- 		<div class="row mt-2">
+    -- 			<div class="col-12 col-md-4 pl-md-0 text-center text-md-start">
+    -- 				<small>
+    -- 					<a href="https://www.ntop.org/products/traffic-analysis/ntop/" target="_blank">
+    -- 				  		]] .. getNtopngRelease(info) ..[[
+    -- 					</a>
+    -- 				</small>
+    -- 			</div>
+    -- 			<div class="col-12 col-md-4 text-center">
+    -- 				<small>]].. ntop.getInfo()["copyright"] ..[[</small>
+    -- ]])
+    -- print [[
+    -- 			</div>
+    -- 			<div class="col-12 col-md-4 text-center text-md-end pr-md-0">
+    -- 				<small>
+    -- 						<i class="fas fa-clock" title="]] print(i18n("about.server_time")) print[["></i> <div class="d-inline-block" id='network-clock'></div> ]] if(info.tzname ~= nil) then print(info.tzname) end print(" | ") print(i18n("about.uptime")) print[[: <div class="d-inline-block" id='network-uptime'></div>
+    -- 				</small>
+    -- 			</div>
+    --      	</div>
+    --    </div>
+    -- </footer>
+    -- ]]
+
+    -- else -- info.oem
+    --   print[[<div class="col-12 text-end">
+    --     <small>
+    -- 		<i class="fas fa-clock"></i> <div class="d-inline-block" id='network-clock' title="]] print(i18n("about.server_time")) print[["></div> | ]] print(i18n("about.uptime")) print[[: <div class="d-inline-block" id='network-uptime'></div>
+    --     </small>
+    -- </div>]]
+end
+
+local traffic_peity_width = "96"
+
+if ts_utils.getDriverName() == "influxdb" then
+
+    local msg = ntop.getCache("ntopng.cache.influxdb.last_error")
+    if not isEmptyString(msg) then
+        print([[
+		<script type="text/javascript">
+			$("#influxdb-error-msg-text").html("]] .. (msg:gsub('"', '\\"')) .. [[");
+			$("#influxdb-error-msg").show();
+		</script>
+	]])
+    end
+end
+
+-- Dismiss Notification Code and Toggle Dark theme
+print([[
+	<script type='text/javascript'>
+		$(document).ready(function() {
+
+			$(`.notification button.dismiss`).click(function() {
+				const $toast = $(this).parents('.notification');
+				const id = $toast.data("toastId");
+				ToastUtils.dismissToast(id, "]] .. random_csrf ..
+          [[", (data) =>{
+					if (data.success) $toast.toast('hide');
+				});
+			});
+
+			$(`.toggle-dark-theme`).click(function() {
+				const request = $.post(`]] .. http_prefix ..
+          [[/lua/update_prefs.lua`, {
+					action: 'toggle_theme', toggle_dark_theme: ]] ..
+          tostring(not page_utils.is_dark_mode_enabled()) .. [[,
+					csrf: "]] .. random_csrf .. [["
+				});
+				request.done(function(res) {
+					if (res.success) location.reload();
+				});
+			});
+		});
+	</script>
+]])
+
+-- Restart product code
+if (is_admin and ntop.isPackage() and not ntop.isWindows()) then
+
+    print(template.gen("modal_confirm_dialog.html", {
+        dialog = {
+            id = 'restart-modal',
+            action = 'restartService()',
+            title = i18n("restart.restart_product", {product = info.product}),
+            message = i18n("restart.confirm", {product = info.product}),
+            custom_alert_class = 'alert alert-danger',
+            confirm = i18n('restart.restart'),
+            confirm_button = 'btn-danger'
+        }
+    }))
+
+    print [[
+		<script type="text/javascript">
+
+		 const restartCSRF = ']]
+    print(random_csrf)
+    print [[';
+		 const restartService = function() {
+			 $.ajax({
+			   type: 'POST',
+			   url: ']]
+    print(http_prefix)
+    print [[/lua/admin/service_restart.lua',
+			   data: {
+				 csrf: restartCSRF
+			   },
+			   success: function(rsp) {
+				 alert("]]
+    print(i18n("restart.restarting", {product = info.product}))
+    print [[");
+				 $('#restart-modal').modal('hide');
+			   }
+			 });
+		 }
+
+		 $('.restart-service').click(() => {
+			$('#restart-modal').modal('show');
+		 });
+
+	   </script>
+	]]
+end
+
+-- render switchable system view
+print([[
+	<script type="text/javascript">
+
+		$(document).ready(function() {
+
+			// ignore scientific numbers input
+			$(`.ignore-scientific`).keypress(function(e) {
+				if (e.which != 8 && e.which != 0 && e.which < 48 || e.which > 57) {
+					e.preventDefault();
+				}
+			})
+
+			ToastUtils.initToasts();
+		});
+
+		const toggleSystemInterface = ($form = null) => {
+			if($form != null) {
+				$form.submit(); 				
+			}
+			else {
+				console.error("An error has occurred when switching interface!");
+			}
+		}
+	]])
+print([[
+	</script>
+]])
+
+print [[
+<script type="text/javascript">
+]]
+
+print [[
+var is_historical = false;
+let updatingChart_uploads = [
+	$("#n-navbar .network-load-chart-upload").show().peity("line", { width: ]]
+print(traffic_peity_width)
+print [[, max: null }),
+	$(".mobile-menu-stats .network-load-chart-upload").show().peity("line", { width: ]]
+print(traffic_peity_width)
+print [[, max: null }),
+];
+let updatingChart_downloads = [
+	$("#n-navbar .network-load-chart-download").show().peity("line", { width: ]]
+print(traffic_peity_width)
+print [[, max: null, fill: "lightgreen"}),
+	$(".mobile-menu-stats .network-load-chart-download").show().peity("line", { width: ]]
+print(traffic_peity_width)
+print [[, max: null, fill: "lightgreen"})
+];
+let updatingChart_totals = [
+	$("#n-navbar .network-load-chart-total").show().peity("line", { width: ]]
+print(traffic_peity_width)
+print [[, max: null}),
+	$(".mobile-menu-stats .network-load-chart-total").show().peity("line", { width: ]]
+print(traffic_peity_width)
+print [[, max: null})
+];
+
+$(`.copy-http-url`).on('click', function() {
+  let sampleTextarea = document.createElement("textarea");
+  document.body.appendChild(sampleTextarea);
+  sampleTextarea.value = $(this).attr('data-to-copy');
+  sampleTextarea.select(); //select textarea content
+  document.execCommand("copy");
+  document.body.removeChild(sampleTextarea);
+})
+
+let isFooterRefreshInProcess = false;
+const footerRefresh = function() {
+	if (isFooterRefreshInProcess == true) { return; }
+	isFooterRefreshInProcess = true;
+	$.ajax({
+		type: 'GET',
+		url: ']]
+print(http_prefix)
+print [[/lua/rest/v2/get/interface/data.lua',
+		data: { ifid: ]]
+print(tostring(ifid))
+print [[, type: 'summary' },
+		success: function(content) {
+			isFooterRefreshInProcess = false;
+			if(content["rc_str"] != "OK") {
+				return;
+			}
+
+			const rsp = content["rsp"];
+
+      try {
+ntopng_events_manager.emit_custom_event(ntopng_custom_events.GET_INTERFACE_DATA, rsp);
+        let bps_upload = rsp.throughput.upload * 8;
+        let bps_download = rsp.throughput.download * 8;
+
+        /* Upload chart */
+        let values = updatingChart_uploads[0].text().split(",")
+        values.shift();
+        values.push(bps_upload.toString());
+        updatingChart_uploads[0].text(values.join(",")).change();
+        updatingChart_uploads[1].text(values.join(",")).change();
+        $('.chart-upload-text:visible').html(NtopUtils.bitsToSize(bps_upload, 1000));
+        
+        /* Download chart */
+        values = updatingChart_downloads[0].text().split(",")
+        values.shift();
+        values.push((-bps_download).toString());
+        updatingChart_downloads[0].text(values.join(",")).change();
+        updatingChart_downloads[1].text(values.join(",")).change();
+        $('.chart-download-text:visible').html(NtopUtils.bitsToSize(bps_download, 1000));
+
+        /* Disaggregate interface chart */
+        values = updatingChart_totals[0].text().split(",")
+        values.shift();
+        values.push(rsp.throughput_bps * 8);
+        updatingChart_totals[0].text(values.join(",")).change();
+        updatingChart_totals[1].text(values.join(",")).change();
+  ]]
+
+if (is_pcap_dump_iface == false) and (not have_nedge) then
+    print [[
+        const v = Math.round(Math.min((rsp.throughput_bps * 8 *100)/]]
+    print(string.format("%u", maxSpeed))
+    print [[, 100));
+        $('.network-load').html(v+"%");
+]]
+end
+
+-- systemInterfaceEnabled is defined inside menu.lua
+print [[
+				//$('#network-clock').html(`${rsp.localtime}`);
+				//$('#network-uptime').html(`${rsp.uptime}`);
+
+				let msg = `<div class='m-2'><div class='d-flex flex-wrap navbar-main-badges'>`;
+				
+				if(rsp.out_of_maintenance) {
+					msg += "<a href='https://www.ntop.org/support/faq/how-can-i-renew-maintenance-for-commercial-products/' target='_blank'><span class='badge bg-warning'>]]
+print(i18n("about.maintenance_expired", {product = info["product"]}))
+print [[ <i class=\"fas fa-external-link-alt\"></i></span></a> ";
+				}
+
+				if(rsp.degraded_performance) {
+				   	msg += "<a href=']]
+print(http_prefix)
+print [[/lua/system_interfaces_stats.lua?page=internals&tab=periodic_activities&periodic_script_issue=any_issue'>"
+					msg += "<span class='badge bg-warning'><i class='fas fa-exclamation-triangle data-bs-toggle='tooltip' data-bs-placement='bottom' title=']]
+print(i18n("internals.degraded_performance"))
+print [['></i></span></a>";
+				}
+
+				if ((rsp.engaged_alerts > 0 || rsp.alerted_flows > 0) && ]]
+print(ternary(hasAllowedNetworksSet(), "false", "true"))
+print [[) {
+
+					var error_color = "#B94A48";
+
+					if(rsp.engaged_alerts > 0) {
+                                                let alerts_badge = "bg-info";
+
+                                                if(rsp.engaged_alerts_error > 0) alerts_badge = "bg-danger";
+                                                else if(rsp.engaged_alerts_warning > 0) alerts_badge = "bg-warning";
+
+						msg += "<a href=']]
+print(http_prefix)
+print [[/lua/alert_stats.lua?ifid=]]
+print(tostring(ifid))
+print [[&status=engaged'>"
+						msg += "<span class=\"badge " + alerts_badge + "\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']] print(i18n('graphs.engaged_alerts')) print[['><i class=\"fas fa-exclamation-triangle\"></i> "+NtopUtils.formatValue(rsp.engaged_alerts, 1)+"</span></a>";
+					}
+
+					if(rsp.alerted_flows_warning > 0 && !(systemInterfaceEnabled)) {
+						msg += "<a href=']]
+print(http_prefix)
+print [[/lua/flows_stats.lua?status=warning'>"
+						msg += "<span class=\"badge bg-warning\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']]
+print(i18n("flow_details.alerted_flows"))
+print [['>"+NtopUtils.formatValue(rsp.alerted_flows_warning, 1)+ " <i class=\"fas fa-stream\"></i> ]]
+print [[ <i class=\"fas fa-exclamation-triangle\"></i></span></a>";
+					}
+
+					if(rsp.alerted_flows_error > 0 && !(systemInterfaceEnabled)) {
+						msg += "<a href=']]
+print(http_prefix)
+print [[/lua/flows_stats.lua?status=error'>"
+						msg += "<span class=\"badge bg-danger\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']]
+print(i18n("flow_details.dangerous_flows"))
+print [['>"+NtopUtils.formatValue(rsp.alerted_flows_error, 1)+ " <i class=\"fas fa-stream\"></i> ]]
+print [[ <i class=\"fas fa-exclamation-triangle\"></i></span></a>";
+					}
+
+					if(rsp.active_discovery_active === true) {
+						msg += "<a href=']]
+print(http_prefix)
+print [[/lua/discover.lua'>"
+						msg += "<span class=\"badge bg-warning\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']]
+print(i18n("prefs.network_discovery_running"))
+print [['><i class=\"fas fa-project-diagram\"></i></span></a>";
+					}
+				}
+
+				if((rsp.engaged_alerts > 0 || rsp.alerted_flows > 0) && $("#alerts-id").is(":visible") == false) {
+					$("#alerts-id").show();
+				}
+
+				if(rsp.ts_alerts && rsp.ts_alerts.influxdb && (!systemInterfaceEnabled)) {
+					msg += "<a href=']]
+print(http_prefix)
+print [[/lua/monitor/influxdb_monitor.lua?ifid=]]
+print(tostring(ifid))
+print [[&page=alerts#tab-table-engaged-alerts'>"
+					msg += "<span class=\"badge bg-danger\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']] print(i18n('alerts_dashboard.influxdb_error')) print[['><i class=\"fas fa-database\"></i></span></a>";
+				}
+
+				var alarm_threshold_low = 60;  /* 60% */
+				var alarm_threshold_high = 90; /* 90% */
+				var alert = 0;
+
+				if(rsp.num_local_hosts > 0 && (!systemInterfaceEnabled)) {
+					msg += "<a href=']]
+print(http_prefix)
+print [[/lua/hosts_stats.lua?mode=local'>";
+					msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]]
+print(i18n("local_hosts"))
+print [[\" class=\"badge bg-success\">";
+					msg += NtopUtils.formatValue(rsp.num_local_hosts, 1);
+					if(rsp.num_local_rcvd_only_hosts > 0) msg += " ("+NtopUtils.formatValue(rsp.num_local_rcvd_only_hosts, 1)+")";
+					msg += " <i class=\"fas fa-laptop\" aria-hidden=\"true\"></i></span></a>";
+				}
+
+				const num_remote_hosts = rsp.num_hosts - rsp.num_local_hosts;
+				if(num_remote_hosts > 0 && (!systemInterfaceEnabled)) {
+					msg += "<a href=']]
+print(http_prefix)
+print [[/lua/hosts_stats.lua?mode=remote'>";
+					var remote_hosts_label = "]]
+print(i18n("remote_hosts"))
+print [[";
+
+					if (rsp.hosts_pctg < alarm_threshold_low && !systemInterfaceEnabled) {
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + remote_hosts_label +"\" class=\"badge bg-secondary\">";
+					} else if (rsp.hosts_pctg < alarm_threshold_high && !systemInterfaceEnabled) {
+						alert = 1;
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + remote_hosts_label +"\" class=\"badge bg-warning\">";
+					} else {
+						alert = 1;
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + remote_hosts_label +"\" class=\"badge bg-danger\">";
+					}
+
+					msg += NtopUtils.formatValue(num_remote_hosts, 1);
+                                        num_remote_rcvd_only_hosts = rsp.num_rcvd_only_hosts - rsp.num_local_rcvd_only_hosts;
+					if(num_remote_rcvd_only_hosts > 0) msg += " ("+NtopUtils.formatValue(num_remote_rcvd_only_hosts, 1)+")";
+					msg += " <i class=\"fas fa-laptop\" aria-hidden=\"true\"></i></span></a>";
+				}
+
+				if(rsp.num_devices > 0 && (!systemInterfaceEnabled)) {
+					var macs_label = "]]
+print(i18n("mac_stats.layer_2_source_devices", {device_type = ""}))
+print [[";
+					msg += "<a href=']]
+print(http_prefix)
+print [[/lua/macs_stats.lua?devices_mode=source_macs_only'>";
+
+					if (rsp.macs_pctg < alarm_threshold_low) {
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + macs_label +"\" class=\"badge bg-secondary\">";
+					} else if(rsp.macs_pctg < alarm_threshold_high) {
+						alert = 1;
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + macs_label +"\" class=\"badge bg-warning\">";
+					} else {
+						alert = 1;
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + macs_label +"\" class=\"badge bg-danger\">";
+					}
+
+					msg += NtopUtils.formatValue(rsp.num_devices, 1)+" <i class=\"fas fa-ethernet\"></i></span></a>";
+				}
+                    
+				if(rsp.num_flows > 0 && (!systemInterfaceEnabled)) {
+          msg += "<a href=']]
+print(http_prefix)
+print [[/lua/flows_stats.lua'>";
+          const flows_label = "]]
+print(i18n("live_flows"))
+print [["
+					if (rsp.flows_pctg < alarm_threshold_low) {
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + flows_label +"\" class=\"badge bg-secondary\">";
+					} else if(rsp.flows_pctg < alarm_threshold_high) {
+						alert = 1;
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + flows_label +"\" class=\"badge bg-warning\">";
+					} else {
+						alert = 1;
+						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + flows_label +"\" class=\"badge bg-danger\">";
+					}
+
+					msg += NtopUtils.formatValue(rsp.num_flows, 1)+" <i class=\"fas fa-stream\"></i>  </span> </a>";
+
+					if (rsp.db && rsp.db.flow_export_drops > 0) {
+						const export_pctg = rsp.db.flow_export_drops / (rsp.db.flow_export_count + rsp.db.flow_export_drops + 1);
+						if (export_pctg > ]]
+print(stats_utils.UPPER_BOUND_INFO_EXPORTS)
+print [[) {
+							const badge_class = (export_pctg <= ]]
+print(stats_utils.UPPER_BOUND_WARNING_EXPORTS)
+print [[) ? 'warning' : 'danger';
+							msg += "<a href=']]
+print(http_prefix)
+print [[/lua/if_stats.lua'><span class=\"badge bg-"+badge_class+"\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('flow_export_drops')) print[[\"><i class=\"fas fa-exclamation-triangle\" style=\"color: #FFFFFF;\"></i> "+NtopUtils.formatValue(rsp.db.flow_export_drops, 1)+" DB Export drop";
+							if(rsp.db.flow_export_drops > 1) msg += "s";
+							msg += "</span></a>";
+						}
+					}
+					if (rsp.dropped_zmq_msg > 0) {
+						msg += "<a href=']]
+print(http_prefix)
+print [[/lua/if_stats.lua'><span class=\"badge bg-warning\"><i class=\"fas fa-tint\" style=\"color: #FFFFFF;\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('dropping_zmq_msg')) print[[\"></i> "+NtopUtils.formatValue(rsp.dropped_zmq_msg, 1)+" ZMQ Drops</span></a>";
+					}
+					if (rsp.dropped_flows > 0) {
+						msg += "<a href=']]
+print(http_prefix)
+print [[/lua/if_stats.lua'><span class=\"badge bg-warning\"><i class=\"fas fa-tint\" style=\"color: #FFFFFF;\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('dropping_flows')) print[[\"></i> "+NtopUtils.formatValue(rsp.dropped_flows, 1)+" Flows Drops</span></a>";
+					}
+				}
+
+				if ((rsp.num_live_captures != undefined) && (rsp.num_live_captures > 0) && (!systemInterfaceEnabled)) {
+					msg += "<a href=']]
+print(http_prefix)
+print [[/lua/live_capture_stats.lua'>";
+					msg += "<span class=\"badge bg-primary\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('live_capture.active_live_captures')) print[[\">";
+					msg += NtopUtils.addCommas(rsp.num_live_captures)+" <i class=\"fas fa-download fa-lg\"></i></span></a>";
+				}
+
+				if (rsp.traffic_recording != undefined && (!systemInterfaceEnabled)) {
+					var status_label="primary";
+					var status_title="]]
+print(i18n("traffic_recording.recording"))
+print [[";
+
+					if (rsp.traffic_recording != "recording") {
+						status_label = "danger";
+						status_title = "]]
+print(i18n("traffic_recording.failure"))
+print [[";
+					}
+
+					msg += "<a href=']]
+print(http_prefix)
+print [[/lua/if_stats.lua?ifid=]]
+print(tostring(ifid))
+print [[&page=traffic_recording&tab=status'>";
+					msg += "<span class=\"badge bg-"+status_label+"\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\""+NtopUtils.addCommas(status_title)+"\">";
+					msg += "<i class=\"fas fa-hdd fa-lg\"></i></span></a>";
+				}
+
+				if (rsp.traffic_extraction != undefined && (!systemInterfaceEnabled)) {
+					var status_title="]]
+print(i18n("traffic_recording.traffic_extraction_jobs"))
+print [[";
+					var status_label = "secondary";
+
+					if (rsp.traffic_extraction == "ready") status_label="primary";
+
+					msg += "<a href=']]
+print(http_prefix)
+print [[/lua/if_stats.lua?ifid=]]
+print(tostring(ifid))
+print [[&page=traffic_recording&tab=jobs'>";
+					msg += "<span class=\"badge bg-"+status_label+"\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\""+NtopUtils.addCommas(status_title)+"\">";
+					msg += rsp.traffic_extraction_num_tasks+" <i class=\"fas fa-tasks fa-lg\"></i></span></a>";
+				}
+
+				if (rsp.vs_in_progress != undefined && rsp.vs_in_progress > 0 && (!systemInterfaceEnabled)) {
+					msg += "<a href=']]
+print(http_prefix)
+print [[/lua/vulnerability_scan.lua'>";
+					msg += "<span class=\"badge bg-primary\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('vulnerability_scan.vulnerability_scan_in_progress')) print[[\">";
+					msg += NtopUtils.addCommas(rsp.vs_in_progress) +" <i class=\"fas fa-satellite-dish\"></i></span></a>";
+				}
+
+                                if(rsp.is_loading == true) {
+                                       msg += "<blink><span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('loading')) print[[\" class=\"badge bg-primary\"><i class=\"fas fa-spinner\"></i> ]]
+print(i18n("loading"))
+print [[</span></blink>";
+                                }
+]]
+
+if ntop.isOffline() then
+    print [[
+				msg += "<a href=\"#\" style=\"cursor: default\"><span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]]
+    print(i18n("offline"))
+    print [[\" class=\"badge bg-secondary\"><i class=\"fas fa-plane\"></i></span></a>";
+	]]
+end
+
+print [[
+				msg += '</div></div>';
+				// append the message inside the network-load element
+				const $msg = $(msg);
+				// resize element's font size to fit better
+				if ($msg.width() > $msg.css('max-width')) {
+					$msg.find('span').css('font-size', '0.748rem');
+				}
+
+				$('.network-load').html($msg);
+                
+                NtopUtils.reloadBSTooltips();
+
+			} catch(e) {
+				console.warn(e);
+				/* alert("JSON Error (session expired?): logging out"); window.location.replace("]]
+print(http_prefix)
+print [[/lua/logout.lua");  */
+			}
+		},
+		error: function() {
+			isFooterRefreshInProcess = false;
+		}
+	});
+}
+
+$(document).ajaxError(function(err, response, ajaxSettings, thrownError) {
+	if((response.status == 403) && (response.responseText == "Login Required"))
+		window.location.href = "]]
+print(http_prefix .. "/lua/login.lua")
+print [[";
+});
+
+footerRefresh();  /* call immediately to give the UI a more responsive look */
+
+setInterval(footerRefresh, 7000); /* re-schedule every [interface-rate] seconds */
+
+//Automatically open dropdown-menu
+$(document).ready(function(){
+    $('ul.nav li.dropdown').hover(function() {
+      $(this).find('.dropdown-menu').stop(true, true).delay(150).fadeIn(100);
+    }, function() {
+      $(this).find('.dropdown-menu').stop(true, true).delay(150).fadeOut(100);
+    });
+    $('.collapse')
+      .on('shown.bs.collapse', function(){
+	$(this).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
+      })
+      .on('hidden.bs.collapse', function(){
+	$(this).parent().find(".fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");
+    });
+});
+
+]]
+
+-- This code rewrites the current page state after a POST request to avoid Document Expired errors
+if not table.empty(_POST) then
+    print [[
+    if ((typeof(history) === "object")
+      && (typeof(history).replaceState === "function")
+      && (typeof(window.location.href) === "string"))
+    history.replaceState(history.state, "", window.location.href);
+  ]]
+end
+
+print [[
+
+// hide the possibly shown alerts icon in the header
+]]
+if not _ifstats.isView then
+    print("$('#alerts-li').hide();")
+else
+    print("$('#alerts-li').show();")
+end
+
+print([[
+</script>
+]])
+
+-- ######################################
+
+if have_nedge then
+    print [[<form id="powerOffForm" method="post">
+    <input name="csrf" value="]]
+    print(random_csrf)
+    print [[" type="hidden" />
+    <input name="poweroff" value="" type="hidden" />
+  </form>
+  <form id="rebootForm" method="post">
+    <input name="csrf" value="]]
+    print(random_csrf)
+    print [[" type="hidden" />
+    <input name="reboot" value="" type="hidden" />
+  </form>]]
+
+    print(template.gen("modal_confirm_dialog.html", {
+        dialog = {
+            id = "poweroff_dialog",
+            action = "$('#powerOffForm').submit()",
+            title = i18n("nedge.power_off"),
+            message = i18n("nedge.power_off_confirm"),
+            confirm = i18n("nedge.power_off")
+        }
+    }))
+
+    print(template.gen("modal_confirm_dialog.html", {
+        dialog = {
+            id = "reboot_dialog",
+            action = "$('#rebootForm').submit()",
+            title = i18n("nedge.reboot"),
+            message = i18n("nedge.reboot_corfirm"),
+            confirm = i18n("nedge.reboot")
+        }
+    }))
+
+end
+
+print(template.gen("modal_confirm_dialog.html", {
+    dialog = {
+        id = "ext_link_dialog",
+        title = i18n("external_link"),
+        message = i18n("show_alerts.confirm_external_link"),
+        confirm = i18n("redirect")
+    }
+}))
+
+print [[
+        <script type="text/javascript">
+          $(document).ready(function(){
+            $(document).on('click','a.ntopng-external-link',function(event){
+              event.preventDefault();
+              const url=$(this)[0].href;
+              $("#url_ext_link_dialog").html(url+"<br/>]]
+print(i18n("are_you_sure"))
+print [[");
+              $("#btn-confirm-action_ext_link_dialog").attr('href',url);
+              $('#ext_link_dialog').modal('show');
+            });
+          });
+        </script>
+   ]]
+
+-- Updates submenu
+if hasSoftwareUpdatesSupport() then
+
+    -- Updates check
+    print [[
+<script type='text/javascript'>
+  $('#updates-info-li').html(']]
+    print(i18n("updates.checking"))
+    print [[');
+  $('#updates-install-li').hide();
+
+  const updates_csrf = ']]
+    print(random_csrf)
+    print [[';
+
+  /* Updates status */
+  var updatesStatus = '';
+  var updatesLastCheck = 0;
+
+  /* Install latest update */
+  var installUpdate = function() {
+    if (confirm(']]
+    print(i18n("updates.install_confirm"))
+    if info["pro.license_days_left"] ~= nil and info["pro.license_days_left"] <=
+        0 then
+        -- License is valid, however maintenance is expired: warning the user
+        print(" " .. i18n("updates.maintenance_expired"))
+    end
+    print [[')) {
+      $.ajax({
+        type: 'POST',
+        url: ']]
+    print(http_prefix)
+    print [[/lua/install_update.lua',
+        data: {
+          csrf: updates_csrf
+        },
+        success: function(rsp) {
+          $('#updates-info-li').html(']]
+    print(i18n("updates.installing"))
+    print [[')
+          $('#updates-info-li').attr('title', '');
+          $('#updates-install-li').hide();
+          $('#admin-badge').hide();
+	  updatesStatus = 'installing';
+        }
+      });
+    }
+  }
+
+  /* Check for new updates */
+  var checkForUpdates = function() {
+    $.ajax({
+      type: 'POST',
+      url: ']]
+    print(http_prefix)
+    print [[/lua/check_update.lua',
+      data: {
+        csrf: updates_csrf,
+        search: 'true'
+      },
+      success: function(rsp) {
+        $('#updates-info-li').html(']]
+    print(i18n("updates.checking"))
+    print [[');
+        $('#updates-info-li').attr('title', '');
+        $('#updates-install-li').hide();
+        $('#admin-badge').hide();
+	updatesStatus = 'checking';
+      }
+    });
+  }
+
+  /* Update the menu with the current updates status */
+  var updatesRefresh = function() {
+    const now = Date.now()/1000;
+    let check_time_sec = 10;
+
+    if (updatesStatus == 'installing' || updatesStatus == 'checking') {
+        /* Go ahead (frequent update) */
+    } else if (updatesStatus == 'update-avail' || updatesStatus == 'upgrade-failure') {
+        return; /* no need to check again */
+    } else { /* updatesStatus == 'not-avail' || updatesStatus == 'update-failure' || updatesStatus == <other errors> || updatesStatus == '' */
+        check_time_sec = 300;
+    }
+
+    if (now < updatesLastCheck + check_time_sec) return; /* check with low freq */
+    updatesLastCheck = now; 
+
+    $.ajax({
+      type: 'GET',
+        url: ']]
+    print(http_prefix)
+    print [[/lua/check_update.lua',
+        data: {},
+        success: function(rsp) {
+          if(rsp && rsp.status) {
+
+	    updatesStatus = rsp.status;
+
+            if (rsp.status == 'installing') {
+              $('#updates-info-li').html(']]
+    print(i18n("updates.installing"))
+    print [[')
+              $('#updates-info-li').attr('title', '');
+              $('#updates-install-li').hide();
+              $('#admin-badge').hide();
+
+            } else if (rsp.status == 'checking') {
+              $('#updates-info-li').html(']]
+    print(i18n("updates.checking"))
+    print [[');
+              $('#updates-info-li').attr('title', '');
+              $('#updates-install-li').hide();
+              $('#admin-badge').hide();
+
+            } else if (rsp.status == 'update-avail' || rsp.status == 'upgrade-failure') {
+
+              $('#updates-info-li').html('<span class="badge bg-pill bg-danger">]]
+    print(i18n("updates.available"))
+    print [[</span> ]]
+    print(info["product"])
+    print [[ ' + rsp.version);
+              $('#updates-info-li').attr('title', '');
+
+              var icon = '<i class="fas fa-download"></i>';
+              $('#updates-install-li').attr('title', '');
+              if (rsp.status !== 'update-avail') {
+                icon = '<i class="fas fa-exclamation-triangle text-danger"></i>';
+                $('#updates-install-li').attr('title', "]]
+    print(i18n("updates.update_failure_message"))
+    print [[: " + rsp.status);
+              }
+              $('#updates-install-li').html(icon + " ]]
+    print(i18n("updates.install"))
+    print [[");
+              $('#updates-install-li').show();
+              $('#updates-install-li').off("click");
+              $('#updates-install-li').click(installUpdate);
+
+              if (rsp.status !== 'update-avail') $('#admin-badge').html('!');
+              else $('#admin-badge').html('1');
+              $('#admin-badge').show();
+
+            } else /* (rsp.status == 'not-avail' || rsp.status == 'update-failure' || rsp.status == <other errors>) */ {
+
+              var icon = '';
+              $('#updates-info-li').attr('title', '');
+              if (rsp.status !== 'not-avail') {
+                icon = '<i class="fas fa-exclamation-triangle text-danger"></i> ';
+                $('#updates-info-li').attr('title', "]]
+    print(i18n("updates.update_failure_message"))
+    print [[: " + rsp.status);
+              }
+              $('#updates-info-li').html(icon + ']]
+    print(i18n("updates.no_updates"))
+    print [[');
+
+              $('#updates-install-li').html("<i class='fas fa-sync'></i> ]]
+    print(i18n("updates.check"))
+    print [[");
+              $('#updates-install-li').show();
+              $('#updates-install-li').off("click");
+              $('#updates-install-li').click(checkForUpdates);
+
+              $('#admin-badge').hide();
+            }
+          }
+        }
+    });
+  }
+  setInterval(updatesRefresh, 1000);
+</script>
+]]
+end
+
+-- close wrapper
+print [[
+      </main>
+    </div>
+  </body>
+</html> ]]
diff --git a/attic/scripts/lua/inc/menu.lua b/attic/scripts/lua/inc/menu.lua
new file mode 100644
index 0000000000..1afc0787dd
--- /dev/null
+++ b/attic/scripts/lua/inc/menu.lua
@@ -0,0 +1,1431 @@
+--
+-- (C) 2013-26 - ntop.org
+--
+local dirs = ntop.getDirs()
+package.path = dirs.installdir .. "/pro/scripts/lua/enterprise/modules/?.lua;" .. package.path
+package.path = dirs.installdir .. "/scripts/lua/modules/?.lua;" .. package.path
+package.path = dirs.installdir .. "/scripts/lua/modules/toasts/?.lua;" .. package.path
+package.path = dirs.installdir .. "/scripts/lua/modules/vulnerability_scan/?.lua;" .. package.path
+
+if ((dirs.scriptdir ~= nil) and (dirs.scriptdir ~= "")) then
+    package.path = dirs.scriptdir .. "/lua/modules/?.lua;" .. package.path
+end
+require "lua_utils"
+require "check_redis_prefs"
+
+local recording_utils = require "recording_utils"
+local format_utils = require "format_utils"
+local page_utils = require("page_utils")
+local toasts_manager = require("toasts_manager")
+local blog_utils = require("blog_utils")
+local template_utils = require "template_utils"
+local auth = require "auth"
+local vs_utils = require "vs_utils"
+local behavior_utils = require("behavior_utils")
+local checks = require "checks"
+
+local has_local_auth = (ntop.getPref("ntopng.prefs.local.auth_enabled") ~= '0')
+local has_help_enabled = (ntop.getPref("ntopng.prefs.menu_entries.help") ~= '0')
+local has_developer_enabled = (ntop.getPref("ntopng.prefs.menu_entries.developer") ~= '0')
+
+-- ************************************
+
+local prefs = ntop.getPrefs()
+
+local asset_inventory_enabled = assetsInventoryEnabled()
+
+local is_influxdb_enabled = ntop.getPref("ntopng.prefs.timeseries_driver") == "influxdb"
+local has_ch_support = hasClickHouseSupport()
+
+-- user data
+local is_admin = isAdministrator()
+local session_user = _SESSION['user']
+
+-- interface
+local ifid_stats = interface.getStats()
+local ifId = ifid_stats.id
+local has_vlans = interface.hasVLANs()
+local is_allowed_sys_interface = isAllowedSystemInterface()
+local system_ifid = getSystemInterfaceId()
+local interface_id = ifid_stats.id
+local random_csrf = ntop.getRandomCSRFValue()
+local is_system_interface = toboolean(page_utils.is_system_view())
+local is_pcap_dump = interface.isPcapDumpInterface()
+local is_packet_interface = interface.isPacketInterface()
+local is_db_view_interface = interface.isDatabaseViewInterface()
+local is_viewed = ifid_stats.isViewed
+local is_sub_interface = interface.isSubInterface()
+local is_zmq_interface = interface.isZMQInterface()
+local is_discoverable_interface = interface.isDiscoverableInterface()
+local is_loopback_interface = interface.isLoopback()
+local is_viewed_interface = interface.isViewed()
+
+local iface_names = interface.getIfNames()
+local current_ifid = interface.getId()
+
+-- compute number of interfaces
+num_ifaces = 0
+for k, v in pairs(iface_names) do
+    num_ifaces = num_ifaces + 1
+end
+
+-- nedge versions
+local is_nedge = ntop.isnEdge()
+-- for ntopng is always false
+local is_routing_mode = false
+if is_nedge then
+    is_routing_mode = ntop.isRoutingMode()
+end
+local is_nedge_enterprise = ntop.isnEdgeEnterprise()
+
+-- ntopng info/version
+local info = ntop.getInfo()
+local is_pro = ntop.isPro()
+local is_enterprise_M = ntop.isEnterpriseM()
+local is_enterprise = ntop.isEnterprise()
+local is_enterprise_L = ntop.isEnterpriseL()
+local is_enterprise_XL = ntop.isEnterpriseXL()
+local is_appliance = ntop.isAppliance()
+local is_windows = ntop.isWindows()
+
+-- dependencies / additional features
+local is_geoip_enabled = ntop.hasGeoIP()
+local limit_resource_usage = ntop.limitResourcesUsage()
+local is_vs_utils_available = vs_utils.is_available()
+local is_asn_mode_enabled = isASNModeEnabled()
+
+local has_dump_cache = ntop.hasDumpCache()
+local is_no_login_user = isNoLoginUser()
+local http_prefix = ntop.getHttpPrefix()
+
+-- exporters
+local flowDevices = (interface.getFlowDevices and interface.getFlowDevices()) or {}
+local sFlowDevices = interface.getSFlowDevices() or {}
+local obsPointsInfo = interface.getObsPointsInfo() or {}
+local obs_points = obsPointsInfo["ObsPoints"] or {}
+local num_obs_points = obsPointsInfo.numObsPoints or 0
+
+local checks_config = checks.getConfigset()["config"]
+local interface_config = checks_config["interface"]
+local flow_config = checks_config["flow"]
+
+-- Check if some alerts are enabled
+local devices_exclusion_enabled = false
+local acl_violation_enabled = false
+
+if (interface_config) then
+    -- Interface alerts
+    if (interface_config["device_connection_disconnection"]) and
+        (interface_config["device_connection_disconnection"]["min"]["enabled"]) then
+        devices_exclusion_enabled = true
+    end
+end
+
+-- Infrastructure
+local infrastructure_view = false
+local infrastructure_instances = {}
+infrastructure_view, infrastructure_instances = isInfrastructureView()
+
+-- ************************************
+
+local observationPointId = nil
+print([[
+   <div class='wrapper'>
+]])
+
+print [[
+<script type='text/javascript'>
+
+   const isAdministrator = ]]
+print(is_admin)
+print [[;
+   const loggedUser = "]]
+print(session_user)
+print [[";
+   const interfaceID = ]]
+print(interface_id)
+print [[;
+
+   /* Some localization strings to pass from lua to javascript */
+   const i18n_ext = {
+      "no_results_found": "]]
+print(i18n("no_results_found"))
+print [[",
+      "are_you_sure": "]]
+print(i18n("scripts_list.are_you_sure"))
+print [[",
+      "change_number_of_rows": "]]
+print(i18n("change_number_of_rows"))
+print [[",
+      "no_data_available": "]]
+print(i18n("no_data_available"))
+print [[",
+      "showing_x_to_y_rows": "]]
+print(i18n("showing_x_to_y_rows", {
+    x = "{0}",
+    y = "{1}",
+    tot = "{2}"
+}))
+print [[",
+      "actions": "]]
+print(i18n("actions"))
+print [[",
+      "query_was_aborted": "]]
+print(i18n("graphs.query_was_aborted"))
+print [[",
+      "exports": "]]
+print(i18n("system_stats.exports_label"))
+print [[",
+      "no_file": "]]
+print(i18n("config_scripts.no_file"))
+print [[",
+      "invalid_file": "]]
+print(i18n("config_scripts.invalid_file"))
+print [[",
+      "request_failed_message": "]]
+print(i18n("request_failed_message"))
+print [[",
+      "all": "]]
+print(i18n("all"))
+print [[",
+      "edit": "]]
+print(i18n("edit"))
+print [[",
+      "remove": "]]
+print(i18n("remove"))
+print [[",
+      "and": "]]
+print(i18n("and"))
+print [[",
+      "other": "]]
+print(i18n("other"))
+print [[",
+      "others": "]]
+print(i18n("others"))
+print [[",
+      "warning": "]]
+print(i18n("warning"))
+print [[",
+      "search": "]]
+print(i18n("search"))
+print [[",
+      "as": "]]
+print(i18n("as"))
+print [[",
+      "no_recipients": "]]
+print(i18n("endpoint_notifications.no_recipients"))
+print [[",
+      "score": "]]
+print(i18n("score"))
+print [[",
+      "alerted_flows": "]]
+print(i18n("flow_details.alerted_flows"))
+print [[",
+      "blacklisted_flows": "]]
+print(i18n("alerts_dashboard.blacklisted_flow"))
+print [[",
+      "flow_status": "]]
+print(i18n("graphs.flow_status"))
+print [[",
+      "traffic_rcvd": "]]
+print(i18n("graphs.traffic_rcvd"))
+print [[",
+      "traffic_sent": "]]
+print(i18n("graphs.traffic_sent"))
+print [[",
+      "flows": "]]
+print(i18n("db_explorer.total_flows"))
+print [[",
+      "nation": "]]
+print(i18n("nation"))
+print [[",
+      "and_x_more": "]]
+print(i18n("and_x_more", {
+    num = '$num'
+}))
+print [[",
+      "invalid_input": "]]
+print(i18n("validation.invalid_input"))
+print [[",
+      "missing_field": "]]
+print(i18n("validation.missing_field"))
+print [[",
+      "unreachable_host": "]]
+print(i18n("graphs.unreachable_host"))
+print [[",
+      "NAME_RESOLUTION_FAILED": "]]
+print(i18n("rest_consts.NAME_RESOLUTION_FAILED"))
+print [[",
+      "FAILED_HTTP_REQUEST": "]]
+print(i18n("validation.FAILED_HTTP_REQUEST"))
+print [[",
+      "rest_consts": {
+         "PARTIAL_IMPORT": "]]
+print(i18n("rest_consts.PARTIAL_IMPORT"))
+print [[",
+         "CONFIGURATION_FILE_MISMATCH": "]]
+print(i18n("rest_consts.CONFIGURATION_FILE_MISMATCH"))
+print [[",
+      }
+   };
+   const systemInterfaceEnabled = ]]
+print(ternary(is_system_interface, "true", "false"))
+print [[;
+
+   window.unchangable_pool_names = [
+      'Jailed Hosts'
+   ]
+
+   window.__CSRF_DATATABLE__ = `]]
+print(random_csrf)
+print [[`;
+   window.__BLOG_NOTIFICATION_CSRF__ = `]]
+print(random_csrf)
+print [[`;
+
+   if (document.cookie.indexOf("tzoffset=") < 0) {
+      // Tell the server the client timezone
+      document.cookie = "tzoffset=" + (new Date().getTimezoneOffset() * 60 * -1);
+   }
+</script>]]
+
+-- NOTE: see sidebar.js for the client logic
+page_utils.init_menubar()
+
+if is_nedge then
+    dofile(dirs.installdir .. "/pro/scripts/lua/nedge/inc/menubar.lua")
+else
+    -- ##############################################
+
+    -- Dashboard
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.dashboard,
+        hidden = is_pcap_dump or is_system_interface or is_db_view_interface,
+        entries = {{
+            entry = page_utils.menu_entries.traffic_dashboard,
+            url = '/lua/index.lua'
+        }, {
+            entry = page_utils.menu_entries.assets_dashboard,
+            hidden = (not has_ch_support) or (not asset_inventory_enabled) or (not is_enterprise_L),
+            url = "/lua/pro/assets_dashboard.lua"
+        }, {
+            entry = page_utils.menu_entries.traffic_report,
+            hidden = not (is_enterprise and has_ch_support) or infrastructure_view or is_viewed, -- disable if interface is viewed
+            url = "/lua/pro/report.lua"
+        }, {
+            entry = page_utils.menu_entries.hr_chart,
+            hidden = (not is_enterprise_M) or (not has_ch_support) or (not ifid_stats["has_hr_flows"]),
+            url = "/lua/pro/hr_chart.lua"
+        }}
+    })
+
+    -- ##############################################
+
+    -- Active Monitoring
+    -- The Monitoring entry are used to go to the System interface pages
+    -- without using the Interface dropdown. The section is hidden
+    -- in system interface.
+    -- Interface is not system
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.monitoring,
+        hidden = is_system_interface or not is_admin,
+        entries = {{
+            entry = page_utils.menu_entries.active_monitoring,
+            hidden = is_windows,
+            url = "/lua/active_monitoring.lua"
+        }, {
+            entry = page_utils.menu_entries.network_discovery,
+            hidden = not is_discoverable_interface or is_windows or is_loopback_interface or limit_resource_usage or
+                infrastructure_view,
+            url = "/lua/discover.lua"
+        }, {
+            entry = page_utils.menu_entries.infrastructure_dashboard,
+            hidden = (not is_enterprise_L and not is_nedge_enterprise) or not is_admin,
+            url = '/lua/pro/enterprise/infrastructure_config.lua'
+        }, {
+            entry = page_utils.menu_entries.snmp_monitoring,
+            hidden = (not is_enterprise_M and not is_nedge_enterprise),
+            url = "/lua/pro/enterprise/snmpdevices_stats.lua"
+        }, {
+            entry = page_utils.menu_entries.vulnerability_scan,
+            url = '/lua/vulnerability_scan.lua',
+            hidden = not is_vs_utils_available or is_zmq_interface
+        }}
+    })
+
+    -- ##############################################
+
+    -- Alerts
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.alerts,
+        hidden = not prefs.are_alerts_enabled or not auth.has_capability(auth.capabilities.alerts) or
+            is_db_view_interface or infrastructure_view,
+        entries = {{
+            entry = page_utils.menu_entries.alerts_list,
+            url = "/lua/alert_stats.lua"
+        }, {
+            entry = page_utils.menu_entries.alerts_graph,
+            url = "/lua/pro/alerts_graph.lua",
+            hidden = (not is_enterprise_L and not is_nedge_enterprise) or (not has_ch_support) or (is_pcap_dump)
+        }, {
+            entry = page_utils.menu_entries.alerts_geomap,
+            url = "/lua/pro/alerts_geomap.lua",
+            hidden = true or (not is_enterprise_XL)
+        }, {
+            entry = page_utils.menu_entries.alerts_analysis,
+            url = "/lua/pro/enterprise/alerts_analysis.lua",
+            hidden = (not is_enterprise) or is_pcap_dump
+        }, {
+            entry = page_utils.menu_entries.divider
+        }, {
+            entry = page_utils.menu_sections.notifications,
+            hidden = (not is_admin) or is_pcap_dump,
+            url = '/lua/admin/endpoint_notifications_list.lua'
+        }}
+    })
+
+    -- ##############################################
+
+    -- Flows
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.flows,
+        hidden = is_asn_mode_enabled or (is_system_interface or infrastructure_view),
+        entries = {{
+            entry = page_utils.menu_entries.active_flows,
+            url = "/lua/flows_stats.lua"
+        }, {
+            entry = page_utils.menu_entries.db_explorer,
+            hidden = (not is_enterprise and not is_nedge_enterprise) or
+                not auth.has_capability(auth.capabilities.historical_flows) or ifid_stats.isViewed or ifid_stats['type'] ==
+                'db' or not has_ch_support,
+            url = "/lua/pro/db_search.lua"
+        }, {
+            entry = page_utils.menu_entries.server_ports,
+            url = '/lua/server_ports.lua',
+            hidden = not is_enterprise_L
+        }, {
+            entry = page_utils.menu_entries.divider
+        }, {
+            entry = page_utils.menu_entries.bgp_looking_glass,
+            url = '/lua/bgp_looking_glass.lua',
+            hidden = isEmptyString(ntop.getPref("ntopng.prefs.bgp_server.ip_address")) or
+                isEmptyString(ntop.getPref('ntopng.prefs.bgp_server.port'))
+                
+        }}
+    })
+
+    -- ##############################################
+    -- chatbot, hide if viewed interface or system or not enterprise xl
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.nanalyst,
+        hidden = not page_utils.has_nanalyst(),
+        entries = {{
+            entry = page_utils.menu_entries.nanalyst,
+            url = '/lua/pro/nanalyst.lua'
+        },{
+            entry = page_utils.menu_entries.ai_policy,
+            url = '/lua/pro/ai_policy.lua'
+        }, {
+            entry = page_utils.menu_entries.analyst_pipeline,
+            url = '/lua/pro/analyst_pipeline.lua'
+        }, {
+            entry = page_utils.menu_entries.ai_usage_stats,
+            url = '/lua/pro/ai_stats.lua'
+        },{
+            entry = page_utils.menu_entries.ai_audit,
+            url = '/lua/pro/ai_audit.lua'
+        },
+        
+    }})
+
+    -- ##############################################
+    -- Views menu entry for ASN Mode
+    -- Group hosts, flows 
+
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.views,
+        hidden = not is_asn_mode_enabled or (is_system_interface or is_viewed or infrastructure_view),
+        entries = {{
+            entry = page_utils.menu_entries.hosts_asn_mode,
+            url = '/lua/hosts_stats.lua'
+        }, {
+            entry = page_utils.menu_entries.active_flows_asn_mode,
+            url = "/lua/flows_stats.lua"
+        }, {
+            entry = page_utils.menu_entries.historical_flows_asn_mode,
+            hidden = (not is_enterprise and not is_nedge_enterprise) or
+                not auth.has_capability(auth.capabilities.historical_flows) or ifid_stats.isViewed or ifid_stats['type'] ==
+                'db' or not has_ch_support,
+            url = "/lua/pro/db_search.lua"
+        }, {
+            entry = page_utils.menu_entries.server_ports_asn_mode,
+            url = '/lua/server_ports.lua',
+            hidden = not is_enterprise_L
+        }, {
+            entry = page_utils.menu_entries.divider
+        }, {
+            entry = page_utils.menu_entries.bgp_looking_glass,
+            url = '/lua/bgp_looking_glass.lua',
+            hidden = isEmptyString(ntop.getPref("ntopng.prefs.bgp_server.ip_address")) or
+                isEmptyString(ntop.getPref('ntopng.prefs.bgp_server.port'))
+                
+        }}
+    })
+    -- ##############################################
+    -- Hosts
+
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.hosts,
+        hidden = is_system_interface or is_viewed or infrastructure_view or is_asn_mode_enabled,
+        entries = {{
+            entry = page_utils.menu_entries.hosts,
+            url = '/lua/hosts_stats.lua'
+        }, {
+            entry = page_utils.menu_entries.devices,
+            hidden = (not ifid_stats.has_macs),
+            url = '/lua/macs_stats.lua'
+        }, {
+            entry = page_utils.menu_entries.divider
+        }, {
+            hidden = not (is_enterprise_M and not is_windows) or not asset_inventory_enabled,
+            entry = page_utils.menu_entries.assets,
+            url = '/lua/pro/assets.lua'
+        }}
+    })
+
+    -- ##############################################
+
+    -- Exporters
+
+    local has_exporters = (ifid_stats.type == "zmq") or (ifid_stats.type == "custom") or
+                              (is_pro and (table.len(flowDevices) > 0))
+
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.collection,
+        hidden = not has_exporters or not is_enterprise_M or is_system_interface or infrastructure_view,
+        entries = {{
+            entry = page_utils.menu_entries.sflow_exporters,
+            hidden = table.len(sFlowDevices) == 0,
+            url = '/lua/pro/enterprise/sflowdevices_stats.lua'
+        }, {
+            entry = page_utils.menu_entries.nprobe,
+            url = '/lua/pro/enterprise/nprobe.lua'
+        }, {
+            entry = page_utils.menu_entries.exporters_interfaces_stats,
+            url = '/lua/pro/exporters_interfaces_stats.lua'
+        }, {
+            entry = page_utils.menu_entries.observation_points,
+            hidden = (num_obs_points) == 0,
+            url = '/lua/pro/enterprise/observation_points.lua'
+        }}
+    })
+end
+
+-- ##############################################
+
+-- Maps
+
+local service_map_available = false
+local asset_map_available = is_enterprise_XL
+
+service_map_available, _ = behavior_utils.mapsAvailable()
+
+page_utils.add_menubar_section({
+    section = page_utils.menu_sections.maps,
+    hidden = is_system_interface or is_viewed or infrastructure_view,
+    entries = {{
+        entry = page_utils.menu_entries.analysis_map,
+        hidden = not service_map_available,
+        url = '/lua/pro/enterprise/network_maps.lua?map=service_map'
+    }, {
+        entry = page_utils.menu_entries.geo_map,
+        hidden = is_loopback_interface or not is_geoip_enabled,
+        url = '/lua/hosts_geomap.lua'
+    }, {
+        entry = page_utils.menu_entries.hosts_map,
+        hidden = not is_enterprise or is_asn_mode_enabled,
+        url = '/lua/pro/enterprise/hosts_map.lua'
+    }}
+})
+
+-- ##############################################
+
+-- Interface
+page_utils.add_menubar_section({
+    hidden = is_system_interface or infrastructure_view,
+    section = page_utils.menu_sections.if_stats,
+    entries = {{
+        entry = page_utils.menu_entries.interface,
+        url = "/lua/if_stats.lua"
+    }, {
+        entry = page_utils.menu_entries.divider
+    }, {
+        entry = page_utils.menu_entries.networks,
+        hidden = is_viewed_interface,
+        url = '/lua/network_stats.lua'
+    }, {
+        entry = page_utils.menu_entries.host_pools,
+        hidden = is_nedge,
+        url = '/lua/pool_stats.lua'
+    }, {
+        entry = page_utils.menu_entries.autonomous_systems,
+        hidden = (not is_geoip_enabled) or is_viewed_interface,
+        url = '/lua/as_stats.lua'
+    }, {
+        entry = page_utils.menu_entries.countries,
+        hidden = not is_geoip_enabled or is_viewed_interface,
+        url = '/lua/country_stats.lua'
+    }, {
+        entry = page_utils.menu_entries.vlans,
+        hidden = not has_vlans or is_viewed_interface,
+        url = '/lua/vlan_stats.lua'
+    }, {
+        entry = page_utils.menu_entries.pods,
+        hidden = not ifid_stats.has_seen_pods,
+        url = '/lua/pods_stats.lua'
+    }, {
+        entry = page_utils.menu_entries.containers,
+        hidden = not ifid_stats.has_seen_containers,
+        url = '/lua/containers_stats.lua'
+    }}
+})
+
+-- ##############################################
+
+-- System Health
+
+local health_entries = {{
+    entry = page_utils.menu_entries.system_status,
+    url = '/lua/system_stats.lua'
+}, {
+    entry = page_utils.menu_entries.interfaces_status,
+    url = '/lua/system_interfaces_stats.lua'
+}, {
+    entry = page_utils.menu_entries.influxdb_status,
+    url = '/lua/monitor/influxdb_monitor.lua',
+    hidden = not is_influxdb_enabled
+}, {
+    entry = page_utils.menu_entries.redis_status,
+    url = '/lua/monitor/redis_monitor.lua',
+    hidden = false -- TODO: add a check for redis monitoring status
+}, {
+    entry = page_utils.menu_entries.clickhouse_status,
+    url = '/lua/pro/enterprise/monitor/clickhouse_monitor.lua',
+    hidden = not has_ch_support
+}}
+
+-- Add script entries relative to system health (e.g., redis) ...
+for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
+    -- NOTE: match on the health key to only pick the right subset of entries
+    if entry.menu_entry.section == page_utils.menu_sections.health.key then
+        health_entries[#health_entries + 1] = {
+            entry = page_utils.menu_entries[entry.menu_entry.key],
+            url = entry.url
+        }
+    end
+end
+
+page_utils.add_menubar_section({
+    hidden = not is_system_interface,
+    section = page_utils.menu_sections.health,
+    entries = health_entries
+})
+
+-- ##############################################
+
+-- Pollers (e.g., SNMP, active monitoring)
+-- System interface menu
+
+local poller_entries = {{
+    entry = page_utils.menu_entries.divider
+}, {
+    hidden = not asset_inventory_enabled,
+    entry = page_utils.menu_entries.assets_snmp,
+    url = '/lua/pro/assets.lua'
+}, {
+    entry = page_utils.menu_entries.snmp,
+    hidden = not is_system_interface or (not is_enterprise_M and not is_nedge_enterprise),
+    url = "/lua/pro/enterprise/snmpdevices_stats.lua"
+}, {
+    entry = page_utils.menu_entries.active_monitoring,
+    hidden = not is_system_interface,
+    url = "/lua/active_monitoring.lua"
+}, {
+    entry = page_utils.menu_entries.infrastructure_dashboard,
+    hidden = (not is_enterprise_L and not is_nedge_enterprise) or not is_admin,
+    url = '/lua/pro/enterprise/infrastructure_config.lua'
+}}
+
+-- Add script entries relative to pollers (e.g., active monitoring) ...
+for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
+    if entry.menu_entry.section == page_utils.menu_sections.pollers.key then
+        poller_entries[#poller_entries + 1] = {
+            entry = page_utils.menu_entries[entry.menu_entry.key],
+            url = entry.url
+        }
+    end
+end
+
+page_utils.add_menubar_section({
+    hidden = not is_system_interface,
+    section = page_utils.menu_sections.pollers,
+    entries = poller_entries
+})
+
+-- ##############################################
+
+-- System
+
+local system_entries = {}
+
+-- Add script entries...
+for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
+    -- Skip pollers, they've already been set under pollers section
+    if not entry.menu_entry.section == "pollers" then
+        system_entries[#system_entries + 1] = {
+            entry = page_utils.menu_entries[entry.menu_entry.key],
+            url = entry.url
+        }
+    end
+end
+
+-- Possibly add nEdge entries
+if is_nedge or is_appliance then
+    -- Possibly add a divider if system_entries already contain elements
+    if #system_entries > 0 then
+        system_entries[#system_entries + 1] = {
+            entry = page_utils.menu_entries.divider,
+            hidden = not is_admin
+        }
+    end
+end
+
+if is_nedge then
+    for _, entry in ipairs({{
+        entry = page_utils.menu_entries.system_setup,
+        hidden = not is_admin,
+        url = '/lua/system_setup_ui/interfaces.lua'
+    }, {
+        entry = page_utils.menu_entries.dhcp_static_leases,
+        hidden = not is_admin or not is_routing_mode,
+        url = '/lua/pro/nedge/admin/dhcp_leases.lua'
+    }, {
+        entry = page_utils.menu_entries.dhcp_active_leases,
+        hidden = not is_admin or not is_routing_mode,
+        url = '/lua/pro/nedge/admin/dhcp_active_leases.lua'
+    }, {
+        entry = page_utils.menu_entries.port_forwarding,
+        hidden = not is_admin or not is_routing_mode,
+        url = '/lua/pro/nedge/admin/port_forwarding.lua'
+    }, {
+        entry = page_utils.menu_entries.rules_config,
+        hidden = not is_admin or not is_routing_mode,
+        url = '/lua/pro/nedge/admin/rules_config.lua'
+    }, {
+        entry = page_utils.menu_entries.forwarders_config,
+        hidden = not is_admin or not is_routing_mode,
+        url = '/lua/pro/nedge/admin/forwarders_config.lua'
+    }}) do
+        system_entries[#system_entries + 1] = entry
+    end
+end
+
+if is_appliance then
+    for _, entry in ipairs({{
+        entry = page_utils.menu_entries.system_setup,
+        hidden = not is_admin,
+        url = '/lua/system_setup_ui/mode.lua'
+    }}) do
+        system_entries[#system_entries + 1] = entry
+    end
+end
+
+if #system_entries > 0 then
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.system_stats,
+        hidden = not is_allowed_sys_interface or not is_system_interface,
+        entries = system_entries
+    })
+end
+
+-- ##############################################
+
+-- Pools
+
+page_utils.add_menubar_section({
+    hidden = true, -- Always add the pools menu (moved to the Hosts submenu)
+    section = page_utils.menu_sections.pools,
+    entries = {{
+        entry = page_utils.menu_entries.manage_pools,
+        hidden = not is_admin,
+        url = '/lua/admin/manage_pools.lua'
+    }, {
+        entry = page_utils.menu_entries.host_members,
+        hidden = not is_admin,
+        url = '/lua/admin/manage_host_members.lua'
+    }}
+})
+
+-- ##############################################
+
+-- Notifications
+page_utils.add_menubar_section({
+    section = page_utils.menu_sections.notifications,
+    hidden = not is_system_interface or not is_admin,
+    url = '/lua/admin/endpoint_notifications_list.lua'
+})
+
+-- ##############################################
+
+local scripts_config_url = "/lua/admin/edit_configset.lua?subdir=all"
+if tonumber(system_ifid) == tonumber(current_ifid) then
+    scripts_config_url = "/lua/admin/edit_configset.lua?subdir=system"
+end
+
+-- Rules & Policies
+page_utils.add_menubar_section({
+    section = page_utils.menu_sections.policies,
+    hidden = infrastructure_view or not is_admin,
+    entries = {{
+        entry = page_utils.menu_entries.access_control_list,
+        hidden = not is_admin or not is_enterprise_L or is_asn_mode_enabled,
+        url = '/lua/pro/admin/access_control_list.lua'
+    }, {
+        entry = page_utils.menu_entries.device_protocols,
+        hidden = not is_admin or is_asn_mode_enabled,
+        url = '/lua/admin/edit_device_protocols.lua'
+    }, {
+        entry = page_utils.menu_entries.device_exclusions,
+        section = page_utils.menu_sections.hosts,
+        hidden = not is_admin or not auth.has_capability(auth.capabilities.checks) or not is_enterprise_M or
+            not devices_exclusion_enabled,
+        url = '/lua/pro/admin/edit_device_exclusions.lua'
+    }, {
+        entry = page_utils.menu_entries.network_config,
+        section = page_utils.menu_sections.admin,
+        hidden = not is_admin or not auth.has_capability(auth.capabilities.checks),
+        url = '/lua/admin/network_configuration.lua'
+    }, {
+        entry = page_utils.menu_entries.traffic_rules,
+        url = '/lua/pro/traffic_rules.lua',
+        hidden = not is_enterprise or not is_admin
+    }, {
+        entry = page_utils.menu_entries.divider
+    }, {
+        entry = page_utils.menu_entries.scripts_config,
+        section = page_utils.menu_sections.checks,
+        hidden = not is_admin or not auth.has_capability(auth.capabilities.checks),
+        url = scripts_config_url
+    }, {
+        entry = page_utils.menu_entries.alert_exclusions,
+        section = page_utils.menu_sections.admin,
+        hidden = not is_admin or not auth.has_capability(auth.capabilities.checks) or not is_enterprise_M or
+            (tonumber(system_ifid) == tonumber(current_ifid)),
+        url = '/lua/pro/admin/edit_alert_exclusions.lua?subdir=host'
+    }, {
+        entry = page_utils.menu_entries.divider
+    }, {
+        entry = page_utils.menu_entries.profiles,
+        hidden = not is_admin or not is_pro or is_nedge or is_asn_mode_enabled,
+        url = '/lua/pro/admin/edit_profiles.lua'
+    }}
+})
+
+page_utils.add_menubar_section({
+    section = page_utils.menu_sections.admin,
+    hidden = not is_admin,
+    entries = {{
+        entry = page_utils.menu_entries.nedge_users,
+        hidden = not is_admin or not is_nedge,
+        url = '/lua/pro/nedge/admin/nf_list_users.lua'
+    }, {
+        entry = page_utils.menu_entries.manage_users,
+        -- Note: 'not _SESSION["localuser"]' indicates that this is an external
+        -- user (e.g. LDAP), in that case allow users management if fallback is enabled.
+        hidden = not is_admin or (not _SESSION["localuser"] and not has_local_auth),
+        url = '/lua/admin/users.lua'
+    }, {
+        entry = page_utils.menu_entries.preferences,
+        hidden = not is_admin,
+        url = '/lua/admin/prefs.lua'
+    }, {
+        hidden = not is_admin,
+        entry = page_utils.menu_entries.tags,
+        url = '/lua/tags.lua'
+    }, {
+        entry = page_utils.menu_entries.divider
+    }, {
+        entry = page_utils.menu_entries.category_lists,
+        hidden = not is_admin,
+        url = '/lua/admin/blacklists.lua?enabled_status=enabled'
+    }, {
+        entry = page_utils.menu_entries.manage_configurations,
+        hidden = not is_admin or not has_dump_cache,
+        url = '/lua/admin/manage_configurations.lua'
+    }, {
+        entry = page_utils.menu_entries.divider
+    }, {
+        entry = page_utils.menu_entries.categories,
+        hidden = not is_admin,
+        url = '/lua/admin/edit_categories.lua'
+    }}
+})
+
+-- ##############################################
+
+-- Developer
+
+if not info.oem and auth.has_capability(auth.capabilities.developer) then
+
+    if not is_enterprise_M or (has_developer_enabled) then
+        page_utils.add_menubar_section({
+            section = page_utils.menu_sections.dev,
+            entries = {{
+                entry = page_utils.menu_entries.rest_api,
+                url = '/lua/swagger.lua'
+            }, {
+                entry = page_utils.menu_entries.analyze_pcap,
+                url = '/lua/upload_pcap.lua'
+            }, {
+                entry = page_utils.menu_entries.manage_data,
+                hidden = not is_admin,
+                url = '/lua/manage_data.lua'
+            }, {
+                entry = page_utils.menu_entries.checks_dev,
+                url = '/lua/checks_overview.lua'
+            }, {
+                entry = page_utils.menu_entries.alert_definitions,
+                url = '/lua/defs_overview.lua'
+            }, {
+                entry = page_utils.menu_entries.ts_definitions,
+                url = '/lua/ts_overview.lua'
+            }, {
+                entry = page_utils.menu_entries.directories,
+                url = '/lua/directories.lua'
+            }, {
+                entry = page_utils.menu_entries.api,
+                url = 'https://www.ntop.org/guides/ntopng/api/'
+            }}
+        })
+    end
+end
+
+-- ##############################################
+
+-- About
+if not is_enterprise_M or has_help_enabled then
+    page_utils.add_menubar_section({
+        section = page_utils.menu_sections.about,
+        hidden = info.oem,
+        entries = {{
+            entry = page_utils.menu_entries.about,
+            url = '/lua/about.lua'
+        }, {
+            entry = page_utils.menu_entries.license,
+            hidden = info["pro.forced_community"] or (not is_admin),
+            url = '/lua/license.lua'
+        }, {
+            entry = page_utils.menu_entries.limits,
+            hidden = (not is_admin),
+            url = '/lua/limits.lua'
+        }, {
+            entry = page_utils.menu_entries.blog,
+            url = 'http://blog.ntop.org/'
+        }, {
+            entry = page_utils.menu_entries.telegram,
+            url = 'https://t.me/ntop_community'
+        }, {
+            entry = page_utils.menu_entries.manual,
+            url = 'https://www.ntop.org/guides/ntopng/'
+        }, {
+            entry = page_utils.menu_entries.divider
+        }, {
+            entry = page_utils.menu_entries.report_issue,
+            url = 'https://github.com/ntop/ntopng/issues'
+        }, {
+            entry = page_utils.menu_entries.suggest_feature,
+            url = 'https://www.ntop.org/support/need-help-2/contact-us/'
+        }}
+    })
+
+end
+
+-- ##############################################
+
+page_utils.print_menubar()
+
+-- ##############################################
+-- Interface
+
+print([[
+   <nav style="margin-top:-4.5rem;margin-right:5rem;" class="navbar navbar-expand-lg navbar-light px-2 navbar-main-top" id='n-navbar'>
+      <ul class='navbar-nav flex-row flex-wrap navbar-main-top'>
+         <li class='nav-item nav-item-mobile-button'>
+            <button class='btn btn-outline-dark border-0 btn-sidebar' data-bs-toggle='sidebar'>
+               <i class="fas fa-bars"></i>
+            </button>
+         </li>
+ ]])
+
+-- ##############################################
+-- Interfaces Selector
+
+local views = {}
+local drops = {}
+local recording = {}
+local packetinterfaces = {}
+local zmqinterfaces = {}
+local pcapdump = {}
+local ifnames = {}
+local iftype = {}
+local ifHdescr = {}
+local observationPoints = nil
+local ifCustom = {}
+local dynamic = {}
+local action_urls = {}
+
+for v, k in pairs(iface_names) do
+    interface.select(k)
+
+    local ifid_stats = interface.getStats()
+    local is_pcap_dump = interface.isPcapDumpInterface()
+    local is_sub_interface = interface.isSubInterface()
+    local is_packet_interface = interface.isPacketInterface()
+    local is_zmq_interface = interface.isZMQInterface()
+
+    ifnames[ifid_stats.id] = k
+    action_urls[ifid_stats.id] = page_utils.switch_interface_form_action_url(ifId, ifid_stats.id, ifid_stats.type)
+
+    if is_pcap_dump then
+        pcapdump[ifid_stats.id] = true
+    end
+    if (ifid_stats.isView == true) then
+        views[ifid_stats.id] = true
+    end
+    if (is_sub_interface) then
+        dynamic[ifid_stats.id] = true
+    end
+    if (recording_utils.isEnabled(ifid_stats.id)) then
+        recording[ifid_stats.id] = true
+    end
+    if (is_packet_interface) then
+        packetinterfaces[ifid_stats.id] = true
+    end
+    if (is_zmq_interface) then
+        zmqinterfaces[ifid_stats.id] = true
+    end
+
+    if (ifid_stats.stats_since_reset.drops * 100 > ifid_stats.stats_since_reset.packets) then
+        drops[ifid_stats.id] = true
+    end
+
+    ifCustom[ifid_stats.id] = ifid_stats.customIftype
+
+    local descr = getHumanReadableInterfaceName(v)
+
+    -- Note: Ensure is_windows and is_enterprise_M are defined globally 
+    -- or check them here using ntop.isWindows(), etc.
+    if ntop.isWindows() and string.contains(descr, "{") then
+        descr = ifid_stats.description
+    elseif ntop.isEnterpriseM() and is_sub_interface and ifid_stats.dynamic_interface_probe_ip then
+        -- Attempt at printing SNMP information rather than plain disaggregated IPs
+        local snmp_utils = require "snmp_utils"
+        local snmp_cached_dev = require "snmp_cached_dev"
+        local cached_device = snmp_cached_dev:create(ifid_stats.dynamic_interface_probe_ip)
+        local snmp_name, snmp_if_name
+
+        if cached_device then
+            -- See if there is a name for this probe in SNMP
+            if cached_device.system and cached_device.system.name then
+                snmp_name = cached_device.system.name
+
+                -- Now check for the existance of the interface name
+                if ifid_stats.dynamic_interface_inifidx then
+                    if cached_device.interfaces and
+                        cached_device.interfaces[tostring(ifid_stats.dynamic_interface_inifidx)] then
+                        snmp_if_name = snmp_utils.get_snmp_interface_label(
+                            cached_device.interfaces[tostring(ifid_stats.dynamic_interface_inifidx)], true)
+                    else
+                        snmp_if_name = ifid_stats.dynamic_interface_inifidx
+                    end
+                end
+            end
+        end
+        if snmp_name then
+            -- Something has been found in SNMP
+            local fmt = ""
+
+            if snmp_if_name then
+                -- There's the interface name as well
+                fmt = string.format("%s [%s]", snmp_name, snmp_if_name)
+            else
+                -- Only the device name
+                fmt = string.format("%s", snmp_name)
+            end
+
+            if descr ~= ifid_stats.description then
+                -- There's a custom alias
+                descr = string.format("%s (%s)", descr, fmt)
+            else
+                descr = fmt
+            end
+        end
+    else
+        if descr ~= ifid_stats.description and not views[k] and not pcapdump[k] then
+            if descr == shortenCollapse(ifid_stats.description) then
+                descr = ifid_stats.description
+            else
+                if prefs.is_interface_name_only == false then
+                    -- Removed description that can be long with ZMQ
+                    descr = descr -- .. " (".. ifid_stats.description ..")" -- Add description
+                end
+            end
+        end
+    end
+    --   tprint({k, dynamic[k], ifid_stats.dynamic_interface_probe_ip, ifid_stats.dynamic_interface_inifidx})
+
+    ifHdescr[ifid_stats.id] = descr
+
+    if (current_ifid == ifid_stats.id) then
+        observationPoints = interface.getObsPointsInfo()["ObsPoints"] or {}
+    end
+end
+
+-- The observationPoint menu is displayed only for the flow page
+if (table.len(observationPoints) > 0) and
+    ((page_utils.get_active_section() == "flows" and page_utils.get_active_entry() == "active_flows") or
+        ((page_utils.get_active_section() == "hosts") and (string.contains(_SERVER.QUERY_STRING, "page=flows")))) then
+    observationPointId = ntop.getUserObservationPointId()
+    if ((observationPointId == 0) and (_GET["observationPointId"] ~= 0)) then
+        observationPointId = _GET["observationPointId"]
+    end
+else
+    observationPoints = nil
+end
+
+interface.select(current_ifid)
+
+local context = {
+    ifnames = ifnames,
+    infrastructure_instances = infrastructure_instances,
+    infrastructure_view = infrastructure_view,
+    views = views,
+    dynamic = dynamic,
+    recording = recording,
+    pcapdump = pcapdump,
+    packetinterfaces = packetinterfaces,
+    zmqinterfaces = zmqinterfaces,
+    drops = drops,
+    ifHdescr = ifHdescr,
+    ifCustom = ifCustom,
+    action_urls = action_urls,
+    is_system_interface = is_system_interface,
+    currentIfaceId = current_ifid,
+    observationPoints = observationPoints,
+    observationPointId = observationPointId
+}
+
+print(template_utils.gen("pages/components/ifaces-dropdown.template", context))
+
+-- ##############################################
+-- Up/Down info
+if not is_pcap_dump and not is_system_interface and not infrastructure_view then
+
+    print([[
+      <li class='nav-item d-none d-sm-done d-md-flex d-lg-flex p-2'>
+         <div class='info-stats'>
+            ]] .. page_utils.generate_info_stats() .. [[
+         </div>
+      </li>
+   ]])
+
+end
+
+-- License Badge
+local info = ntop.getInfo(true)
+
+if (_POST["ntopng_license"] == nil) and (info["pro.systemid"] and (info["pro.systemid"] ~= "")) then
+
+    if (info["pro.release"]) then
+
+        if (info["pro.demo_ends_at"] ~= nil) then
+
+            local rest = info["pro.demo_ends_at"] - os.time()
+
+            if (rest > 0) then
+                print('<li class="nav-item nav-link"><a href="https://shop.ntop.org"><span class="badge bg-warning">')
+                print(" " .. i18n("about.licence_expires_in", {
+                    time = secondsToTime(rest)
+                }))
+                print('</span></a></li>')
+            end
+        end
+
+    else
+        if (not (info["pro.forced_community"])) then
+            print(
+                '<li class="nav-item nav-link"><a class="ntopng-external-link" href="https://shop.ntop.org" class="badge bg-warning text-decoration-none">')
+            print(i18n("about.upgrade_to_professional") .. ' <i class="fas fa-external-link-alt"></i>')
+            print('</a></li>')
+        end
+    end
+end
+
+-- ########################################
+
+if not infrastructure_view then
+
+    -- Network Load
+    print([[
+   <li class="network-load d-none d-lg-inline py-2"></li>
+]])
+
+end
+
+-- ########################################
+-- end of navbar-nav
+print('</ul>')
+
+print([[
+<ul class='navbar-nav flex-row ms-auto my-2'>
+]])
+
+-- ########################################
+-- Searchbox hosts
+-- append searchbox
+
+if not infrastructure_view then
+    local json = require "dkjson"
+    local json_context = json.encode({
+        ifid = current_ifid
+    })
+    print("<li class='nav-item'>")
+    template_utils.render("pages/vue_page.template", {
+        vue_page_name = "SearchBox",
+        page_context = json_context
+    })
+    print("</li>")
+end
+
+-- #########################################
+-- User Navbar Menu
+
+-- Render Blog Notifications
+if (not info.oem) then
+
+    local username = _SESSION["user"] or ''
+    if (is_no_login_user) then
+        username = 'no_login'
+    end
+
+    local posts, new_posts_counter = blog_utils.readPostsFromRedis(username)
+    template_utils.render("pages/components/blog-dropdown.template", {
+        posts = posts,
+        new_posts_counter = new_posts_counter,
+        username = username
+    })
+end
+
+print([[
+   <li class="nav-item dropdown">
+      <a href='#' class="nav-link dropdown-toggle dark-gray" id='manage-user-dropdown' role="button" data-bs-toggle="dropdown" aria-expanded="false">
+         <i class='fas fa-user'></i>
+      </a>
+      <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-lg-end" aria-labelledby='manage-user-dropdown'>]])
+
+if (not _SESSION["localuser"] or not is_admin) and (not is_no_login_user) then
+    print [[
+      <li>
+         <a class="dropdown-item" href='#password_dialog' data-bs-toggle='modal' onclick="reset_pwd_dialog(']]
+    print(_SESSION["user"])
+    print [[')">
+            <i class='fas fa-user'></i> ]]
+    print(i18n("manage_users.manage_user_x", {
+        user = _SESSION["user"]
+    }))
+    print [[
+         </a>
+      </li>
+   ]]
+else
+
+    if (not is_no_login_user) then
+        print([[<li><a class="dropdown-item" href=']] .. http_prefix .. [[/lua/admin/users.lua?user=]] ..
+                  session_user:gsub("%.", "\\\\\\\\.") .. [['><i class='fas fa-user'></i> ]] .. session_user ..
+                  [[</a></li>]])
+    else
+        print([[<li class='dropdown-item disabled'>]])
+        print([[<i class='fas fa-user'></i> ]] .. session_user .. [[]])
+        print([[</li>]])
+    end
+
+end
+
+-- Render nendge services
+if is_nedge and is_admin then
+    print([[
+   <li class="dropdown-divider"></li>
+   <li class="dropdown-header">]] .. i18n("nedge.product_status", {
+        product = info.product
+    }) .. [[</li>
+   <li>
+      <a class="dropdown-item" href="#poweroff_dialog" data-bs-toggle="modal">
+         <i class="fas fa-power-off"></i> ]] .. i18n("nedge.power_off") .. [[
+      </a>
+   </li>
+   <li>
+      <a class="dropdown-item" href="#reboot_dialog" data-bs-toggle="modal">
+         <i class="fas fa-redo"></i> ]] .. i18n("nedge.reboot") .. [[
+      </a>
+   </li>
+]])
+end
+
+-- Render Update Menu
+if hasSoftwareUpdatesSupport() then
+    print([[
+   <li class="dropdown-divider"></li>
+   <li class="dropdown-header" id="updates-info-li">]] .. i18n("updates.no_updates") .. [[.</li>
+   <li><a class='dropdown-item' href='#' id="updates-install-li"><i class="fas fa-sync"></i> ]] ..
+              (i18n("updates.check")) .. [[</a></li>
+]])
+end
+
+-- Rende Toggle Dark theme menu button
+
+local theme_selector = ntop.getPref("ntopng.user." .. session_user .. ".theme")
+local theme_selected = i18n("toggle_dark_theme")
+
+if (theme_selector == 'dark') then
+    theme_selected = i18n("toggle_white_theme")
+end
+
+print([[
+   <li class='dropdown-divider'></li>
+   <li>
+      <a class='dropdown-item toggle-dark-theme' href='#'><i class="fas fa-adjust"></i> ]] .. theme_selected .. [[</a>
+   </li>
+]])
+
+-- Logout
+
+if (not is_no_login_user) then
+    print [[
+
+ <li class='dropdown-divider'></li>
+ <li>
+   <a class="dropdown-item" href="]]
+    print(http_prefix)
+    print [[/lua/ntopng_logout.lua" onclick="return confirm(']]
+    print(i18n("login.logout_message"))
+    print [[')"><i class="fas fa-sign-out-alt"></i> ]]
+    print(i18n("login.logout"))
+    print [[</a></li>]]
+end
+
+-- Restart menu, the restart JS code can be found inside footer.lua
+if (is_admin and ntop.isPackage() and not is_windows) then
+    print [[
+       <li class="dropdown-divider"></li>
+       <li><a class="dropdown-item restart-service" href="#"><i class="fas fa-redo-alt"></i> ]]
+    print(i18n("restart.restart"))
+    print [[</a></li>
+   ]]
+end
+
+print([[
+      </ul>
+   </li>
+</ul>
+
+   </nav>
+]])
+
+-- begging of #n-container
+print([[<main id='n-container' class='px-md-4 px-sm-1'>]])
+
+-- ###################################################
+-- Render toasts
+toasts_manager.render_toasts("main-container", toasts_manager.load_main_toasts())
+-- ###################################################
+
+print("<div class='main-alerts'>")
+
+-- Hidden by default, will be shown by the footer if necessary
+print(
+    '<div id="influxdb-error-msg" class="alert alert-danger alert-dismissable" style="display:none" role="alert"><i class="fas fa-exclamation-triangle fa-lg" id="alerts-menu-triangle"></i> <span id="influxdb-error-msg-text"></span>')
+print [[<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>]]
+print('</div>')
+
+-- Hidden by default, will be shown by the footer if necessary
+print(
+    '<div id="major-release-alert" class="alert alert-info" style="display:none" role="alert"><i class="fas fa-cloud-download-alt" id="alerts-menu-triangle"></i> <span id="ntopng_update_available"></span>')
+print('</div>')
+
+-- See if we are starting up and display an informative message
+local secs_to_first_data = interface.getSecsToFirstData()
+
+-- Do not show messages that stay too short on screen (5 sec or more)
+if secs_to_first_data > 5 then
+    print [[
+<div class="alert alert-primary" role="alert" id='starting-up-msg'>
+  <div class="spinner-border spinner-border-sm text-primary" role="status">
+    <span class="sr-only">Loading...</span>
+  </div> ]]
+    print(i18n("restart.just_started", {
+        product = info.product,
+        when = format_utils.secondsToTime(secs_to_first_data),
+        url = "https://www.ntop.org/guides/ntopng/basic_concepts/stats.html"
+    }))
+    print [[
+</div>
+
+<script type="text/javascript">
+  const msecs_to_first_data = ]]
+    print(string.format("%u", secs_to_first_data * 1000))
+    print [[;
+  const pad2 =(n) => {
+     return (n < 10 ? '0' : '') + n;
+  };
+  const fGetDateTimeString = (dLocal) => {
+    if (dLocal.getUTCDate() > 1) {
+      return `${dLocal.getUTCDate() - 1} ${i18n('metrics.days')}, ${pad2(dLocal.getUTCHours())}:${pad2(dLocal.getUTCMinutes())}:${pad2(dLocal.getUTCSeconds())}`;
+    }
+    if (dLocal.getUTCHours() > 0) {
+      return `${pad2(dLocal.getUTCHours())}:${pad2(dLocal.getUTCMinutes())}:${pad2(dLocal.getUTCSeconds())}`;
+    }
+    return `${pad2(dLocal.getUTCMinutes())}:${pad2(dLocal.getUTCSeconds())}`;
+  };
+  const hide_starting_up_msg = function() {
+    $("#starting-up-msg").hide();
+  };
+  setTimeout(hide_starting_up_msg, msecs_to_first_data);
+  let startDateTime = new Date();
+
+  let interval = setInterval(() => {
+    let offset = new Date() - startDateTime;
+    if (offset > msecs_to_first_data) { clearInterval(interval); return; }
+    let dLocal = new Date(msecs_to_first_data - offset);
+    $("#starting-up-msg > span").text(fGetDateTimeString(dLocal));
+  }, 2000);
+  
+  //setTimeout(() => clearInterval(interval), msecs_to_first_data);
+</script>
+]]
+end
+
+if (_SESSION["INVALID_CSRF"]) then
+    print(
+        '<div class="alert alert-warning alert-dismissable" role="alert"><i class="fas fa-exclamation-triangle fa-lg" id="alerts-menu-triangle"></i> ')
+    print(i18n("expired_csrf"))
+    print [[<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>]]
+    print('</div>')
+end
+
+-- end of main alerts
+print("</div>")
+
+-- append password change modal
+if (not is_admin) then
+    dofile(dirs.installdir .. "/scripts/lua/inc/password_dialog.lua")
+end
diff --git a/http_src/components/sidebar/sidebar.scss b/http_src/components/sidebar/sidebar.scss
index 17f096633f..afb9ed3b87 100644
--- a/http_src/components/sidebar/sidebar.scss
+++ b/http_src/components/sidebar/sidebar.scss
@@ -1,6 +1,6 @@
 #n-sidebar {
   position: fixed;
-  width: var(--sidebar-width);
+  width: var(--sb-rail-w);
   top: 0;
   left: 0;
   bottom: 0;
diff --git a/http_src/extensions/extensions.js b/http_src/extensions/extensions.js
index 494daaab1f..5cfa1a5273 100644
--- a/http_src/extensions/extensions.js
+++ b/http_src/extensions/extensions.js
@@ -1 +1 @@
-import "./chart_colors";
+// chart_colors (legacy footer injector) removed — footer now handled by app-shell.vue
diff --git a/http_src/views/private/clients/white-mode.scss b/http_src/views/private/clients/white-mode.scss
index bb40150d58..122714be81 100644
--- a/http_src/views/private/clients/white-mode.scss
+++ b/http_src/views/private/clients/white-mode.scss
@@ -1,6 +1,6 @@
 :root {
   font-weight: 500;
-  --sidebar-width: 4.5rem;
+  --sidebar-width: 0px; /* AppShell Vue sidebar: overridden by --sb-rail-w */
   --footer-height: 4rem;
   --padding-md-four: 1.5rem;
   --scrollable-dropdown-height: 20rem;
diff --git a/http_src/vue/app-footer.vue b/http_src/vue/app-footer.vue
new file mode 100644
index 0000000000..5df0b9d759
--- /dev/null
+++ b/http_src/vue/app-footer.vue
@@ -0,0 +1,316 @@
+<!--
+  (C) 2013-26 - ntop.org
+  AppFooter — orchestration component.
+  Handles: software updates polling, ext_link_dialog, nEdge power/reboot modals,
+           ajaxError -> login redirect, history.replaceState on POST.
+  No visible UI of its own except modals.
+-->
+<template>
+  <!-- External link confirmation modal -->
+  <div class="modal fade" id="ext_link_dialog" tabindex="-1">
+    <div class="modal-dialog modal-sm">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{ _i18n("external_link") }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body">
+          <span id="url_ext_link_dialog"></span><br/>{{ _i18n("are_you_sure") }}
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ _i18n("cancel") }}</button>
+          <a id="btn-confirm-action_ext_link_dialog" class="btn btn-primary btn-sm"
+             href="#" target="_blank" rel="noopener" data-bs-dismiss="modal">
+            {{ _i18n("redirect") }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- nEdge poweroff/reboot modals -->
+  <template v-if="ctx.is_nedge && ctx.is_admin">
+    <form id="powerOffForm" method="post">
+      <input name="csrf" :value="ctx.csrf" type="hidden" />
+      <input name="poweroff" value="" type="hidden" />
+    </form>
+    <form id="rebootForm" method="post">
+      <input name="csrf" :value="ctx.csrf" type="hidden" />
+      <input name="reboot" value="" type="hidden" />
+    </form>
+
+    <div class="modal fade" id="poweroff_dialog" tabindex="-1">
+      <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ _i18n("nedge.power_off") }}</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+          </div>
+          <div class="modal-body">{{ _i18n("nedge.power_off_confirm") }}</div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ _i18n("cancel") }}</button>
+            <button class="btn btn-danger btn-sm" @click="submitForm('powerOffForm')">
+              {{ _i18n("nedge.power_off") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal fade" id="reboot_dialog" tabindex="-1">
+      <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ _i18n("nedge.reboot") }}</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+          </div>
+          <div class="modal-body">{{ _i18n("nedge.reboot_corfirm") }}</div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ _i18n("cancel") }}</button>
+            <button class="btn btn-primary btn-sm" @click="submitForm('rebootForm')">
+              {{ _i18n("nedge.reboot") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+</template>
+
+<script setup>
+import { computed, onMounted, onBeforeUnmount } from "vue";
+import { ntopng_utility } from "../services/context/ntopng_globals_services.js";
+
+const props = defineProps({ context: Object });
+const ctx   = computed(() => props.context || {});
+
+function _i18n(key) { return i18n(key) || key; }
+
+// Updates
+const UPDATES_POLL_SLOW  = 300; // seconds — when idle
+const UPDATES_POLL_FAST  = 10;  // seconds — when checking/installing
+
+let updatesStatus   = "";
+let updatesLastCheck = 0;
+let updatesTimer    = null;
+
+async function updatesRefresh() {
+  if (!ctx.value.has_updates_support) return;
+
+  const now = Date.now() / 1000;
+  const checkInterval = (updatesStatus === "installing" || updatesStatus === "checking")
+    ? UPDATES_POLL_FAST : UPDATES_POLL_SLOW;
+
+  if (updatesStatus === "update-avail" || updatesStatus === "upgrade-failure") return;
+  if (now < updatesLastCheck + checkInterval) return;
+  updatesLastCheck = now;
+
+  try {
+    const data = await ntopng_utility.http_request(
+      `${http_prefix}/lua/check_update.lua`
+    );
+    if (!data || !data.status) return;
+    updatesStatus = data.status;
+    applyUpdatesStatus(data);
+  } catch (_) {}
+}
+
+function applyUpdatesStatus(data) {
+  const infoEl    = document.getElementById("updates-info-li");
+  const installEl = document.getElementById("updates-install-li");
+  const badgeEl   = document.getElementById("admin-badge");
+
+  if (!infoEl) return;
+
+  if (data.status === "installing") {
+    infoEl.textContent = _i18n("updates.installing");
+    installEl?.style && (installEl.style.display = "none");
+    badgeEl?.style   && (badgeEl.style.display = "none");
+
+  } else if (data.status === "checking") {
+    infoEl.textContent = _i18n("updates.checking");
+    installEl?.style && (installEl.style.display = "none");
+    badgeEl?.style   && (badgeEl.style.display = "none");
+
+  } else if (data.status === "update-avail" || data.status === "upgrade-failure") {
+    infoEl.innerHTML = `<span class="badge bg-danger">${_i18n("updates.available")}</span> ${data.version || ""}`;
+
+    if (installEl) {
+      installEl.style.display = "";
+      const icon = data.status === "update-avail"
+        ? '<i class="fas fa-download me-1"></i>'
+        : '<i class="fas fa-exclamation-triangle text-danger me-1"></i>';
+      installEl.innerHTML = `<a class="dropdown-item" href="#">${icon}${_i18n("updates.install")}</a>`;
+      installEl.querySelector("a")?.addEventListener("click", e => {
+        e.preventDefault();
+        doInstallUpdate();
+      });
+    }
+
+    if (badgeEl) badgeEl.style.display = "";
+
+    // Show in major-release alert bar
+    const alertEl = document.getElementById("major-release-alert");
+    const textEl  = document.getElementById("ntopng_update_available");
+    if (alertEl && textEl) {
+      textEl.textContent = `${_i18n("updates.available")}: ${data.version || ""}`;
+      alertEl.style.display = "";
+    }
+
+  } else {
+    infoEl.textContent = _i18n("updates.no_updates") + ".";
+    installEl?.style && (installEl.style.display = "none");
+    badgeEl?.style   && (badgeEl.style.display = "none");
+  }
+}
+
+async function doInstallUpdate() {
+  let msg = _i18n("updates.install_confirm");
+  if (!confirm(msg)) return;
+
+  try {
+    await ntopng_utility.http_request(
+      `${http_prefix}/lua/install_update.lua`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({ csrf: ctx.value.csrf || window.__CSRF_DATATABLE__ }),
+      }
+    );
+    const infoEl    = document.getElementById("updates-info-li");
+    const installEl = document.getElementById("updates-install-li");
+    const badgeEl   = document.getElementById("admin-badge");
+    if (infoEl) infoEl.textContent = _i18n("updates.installing");
+    installEl?.style && (installEl.style.display = "none");
+    badgeEl?.style   && (badgeEl.style.display = "none");
+    updatesStatus = "installing";
+  } catch (_) {}
+}
+
+function startUpdatesCheck() {
+  const infoEl    = document.getElementById("updates-info-li");
+  const installEl = document.getElementById("updates-install-li");
+  if (infoEl) infoEl.textContent = _i18n("updates.checking");
+  if (installEl) installEl.style.display = "none";
+
+  doManualCheck();
+}
+
+async function doManualCheck() {
+  try {
+    await ntopng_utility.http_request(
+      `${http_prefix}/lua/check_update.lua`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({
+          csrf: ctx.value.csrf || window.__CSRF_DATATABLE__,
+          search: "true",
+        }),
+      }
+    );
+    updatesStatus = "checking";
+    updatesLastCheck = 0; // force a refresh on next tick
+  } catch (_) {}
+}
+
+// ext_link_dialog — intercept .ntopng-external-link clicks
+function onExternalLinkClick(e) {
+  const anchor = e.target.closest("a.ntopng-external-link");
+  if (!anchor) return;
+  e.preventDefault();
+
+  const url = anchor.href;
+  const el  = document.getElementById("url_ext_link_dialog");
+  const btn = document.getElementById("btn-confirm-action_ext_link_dialog");
+  if (el)  el.textContent = url;
+  if (btn) btn.href = url;
+
+  const modalEl = document.getElementById("ext_link_dialog");
+  if (modalEl && window.bootstrap) {
+    bootstrap.Modal.getOrCreateInstance(modalEl).show();
+  }
+}
+
+// Toast dismiss, from ToastUtils
+function onToastDismiss(e) {
+  const btn = e.target.closest(".notification button.dismiss");
+  if (!btn) return;
+  const toast = btn.closest(".notification");
+  if (!toast) return;
+  const id = toast.dataset.toastId;
+  if (typeof ToastUtils !== "undefined" && id) {
+    ToastUtils.dismissToast(id, ctx.value.csrf || window.__CSRF_DATATABLE__, data => {
+      if (data?.success) {
+        const bsToast = bootstrap.Toast.getInstance(toast);
+        bsToast?.hide();
+      }
+    });
+  }
+}
+
+// ---------------------------------------------------------------
+// 403 ajaxError -> redirect to login
+function onAjaxError(_evt, xhr) {
+  if (xhr?.status === 403 && xhr?.responseText === "Login Required") {
+    window.location.href = `${http_prefix}/lua/login.lua`;
+  }
+}
+
+// ---------------------------------------------------------------
+// nEdge form submit helper
+function submitForm(id) {
+  document.getElementById(id)?.submit();
+}
+
+// ---------------------------------------------------------------
+// history.replaceState (avoid Document Expired on POST pages)
+function fixHistoryState() {
+  if (history?.replaceState && window.location.href) {
+    history.replaceState(history.state, "", window.location.href);
+  }
+}
+
+function wireUpdatesInstallButton() {
+  const installEl = document.getElementById("updates-install-li");
+  if (installEl) {
+    installEl.addEventListener("click", e => {
+      e.preventDefault();
+      startUpdatesCheck();
+    });
+  }
+}
+
+onMounted(async () => {
+  document.addEventListener("click", onExternalLinkClick);
+  document.addEventListener("click", onToastDismiss);
+  document.addEventListener("ajaxError", onAjaxError);
+
+  // jQuery ajaxError fallback
+  if (window.$) {
+    $(document).ajaxError((err, response) => {
+      if (response?.status === 403 && response?.responseText === "Login Required") {
+        window.location.href = `${http_prefix}/lua/login.lua`;
+      }
+    });
+  }
+
+  fixHistoryState();
+  wireUpdatesInstallButton();
+
+  if (ctx.value.has_updates_support) {
+    // initial check
+    updatesLastCheck = 0;
+    await updatesRefresh();
+    // poll every 10 seconds; the function internally throttles to slow/fast intervals
+    updatesTimer = setInterval(updatesRefresh, UPDATES_POLL_FAST * 1000);
+  }
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onExternalLinkClick);
+  document.removeEventListener("click", onToastDismiss);
+  document.removeEventListener("ajaxError", onAjaxError);
+  if (updatesTimer) clearInterval(updatesTimer);
+});
+</script>
diff --git a/http_src/vue/app-shell.vue b/http_src/vue/app-shell.vue
new file mode 100644
index 0000000000..084b2367c0
--- /dev/null
+++ b/http_src/vue/app-shell.vue
@@ -0,0 +1,1967 @@
+<!--
+  (C) 2013-26 - ntop.org
+  two column sidebar. Rail + hover/click expandable panel
+  Labels hidden by default, fade in on hover. Click locks panel open.
+-->
+<template>
+
+  <!-- Icon Rail -->
+  <nav
+    id="n-sidebar"
+    class="sb-rail"
+    :class="{ 'sb-rail--expanded': railHovered }"
+    @mouseenter="onRailEnter"
+    @mouseleave="onRailLeave"
+  >
+    <!-- Logo: ntop "n" lettermark -->
+    <a :href="`${pfx}/lua/index.lua`" class="sb-rail__logo" title="ntopng">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.758333 13.758334"
+           width="26" height="26" aria-hidden="true">
+        <path fill="#ff7500"
+          d="M 2.7739989,9.5828812 V 4.216811 q 0,-0.9839173 0.3224603,-1.4552054 0.3307285,-0.4795564 1.008722,-0.4795564 0.4051424,0 0.7193345,0.2149735 Q 5.1387078,2.7037281 5.378486,3.1336751 5.808433,2.662387 6.3706715,2.4474135 6.93291,2.2324399 7.7349267,2.2324399 q 1.5792286,0 2.4143183,0.9012352 0.835089,0.9012352 0.835089,2.6210235 v 3.8281826 q 0,0.9839178 -0.330728,1.4634738 -0.330729,0.479556 -1.0087222,0.479556 -0.6779934,0 -1.0087219,-0.479556 Q 8.3054333,10.566799 8.3054333,9.5828812 V 6.5649835 q 0,-1.1162088 -0.3389967,-1.5874969 -0.3307285,-0.4795563 -1.0996723,-0.4795563 -0.7276027,0 -1.0748677,0.4960927 -0.3472649,0.4878246 -0.3472649,1.5378876 v 3.0509706 q 0,0.9839178 -0.3307285,1.4634738 -0.3307286,0.479556 -1.008722,0.479556 -0.6779935,0 -1.008722,-0.479556 Q 2.7739989,10.566799 2.7739989,9.5828812 Z"
+        />
+      </svg>
+    </a>
+
+    <!-- Up triangl: shown when user has scrolled down -->
+    <div v-show="navCanScrollUp" class="sb-rail__scroll-hint sb-rail__scroll-hint--up">
+      <i class="fas fa-chevron-up"></i>
+    </div>
+
+    <!-- Section buttons -->
+    <div class="sb-rail__nav-wrap">
+      <div class="sb-rail__nav" ref="railNav" @scroll="checkNavOverflow">
+        <div
+          v-for="section in visibleSections"
+          :key="section.key"
+          class="sb-rail__btn"
+          :class="{
+            'sb-rail__btn--current':  activeSection === section.key,
+            'sb-rail__btn--open':     lockedSection?.key === section.key,
+            'sb-rail__btn--hovering': hoveredSection?.key === section.key && lockedSection?.key !== section.key
+          }"
+          :data-section="section.key"
+          @mouseenter="onSectionHover(section)"
+          @click.stop="onSectionClick(section)"
+          :title="section.label"
+        >
+          <!-- Orange pill for active/open menu entry-->
+          <span class="sb-rail__pill"></span>
+          <i :class="section.icon" class="sb-rail__icon" aria-hidden="true"></i>
+          <span class="sb-rail__label">{{ section.label }}</span>
+        </div>
+      </div>
+      <!-- Bottom fade: outside scroll container, sticks to bottom of nav area -->
+      <div v-show="navOverflow" class="sb-rail__nav-fade" aria-hidden="true"></div>
+    </div>
+
+    <!-- Scroll-more indicator: bouncing arrow when nav items overflow -->
+    <div v-show="navOverflow" class="sb-rail__scroll-hint">
+      <i class="fas fa-chevron-down"></i>
+    </div>
+
+    <!-- Bottom: avatar -->
+    <div class="sb-rail__bottom">
+      <div
+        class="sb-rail__btn sb-rail__btn--avatar"
+        :class="{ 'sb-rail__btn--open': userPopupOpen }"
+        @mouseenter="onAvatarEnter"
+        @mouseleave="onAvatarLeave"
+        title="Profile"
+        ref="avatarBtn"
+      >
+        <span class="sb-rail__pill"></span>
+        <div class="sb-rail__avatar-cell"><div class="sb-avatar">{{ userInitials }}</div></div>
+        <span class="sb-rail__label">{{ _i18n("profile") || "Profile" }}</span>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Expandable Panel-->
+  <Teleport to="body">
+    <Transition name="sb-panel-anim">
+      <div
+        v-if="isPanelOpen && currentPanelSection && (hasEntries(currentPanelSection) || currentPanelSection.key === 'about')"
+        class="sb-panel"
+        @mouseenter="onPanelEnter"
+        @mouseleave="onPanelLeave"
+      >
+        <div class="sb-panel__header"></div>
+
+        <!-- Nav entries -->
+        <nav class="sb-panel__nav">
+          <!-- About: inline info block -->
+          <template v-if="currentPanelSection.key === 'about'">
+            <div class="sb-about-block">
+              <div class="sb-about-block__product">{{ menu.product || "ntopng" }}</div>
+              <div v-if="menu.version_full" class="sb-about-block__version" v-html="menu.version_full"></div>
+              <div v-else-if="menu.version" class="sb-about-block__version">{{ menu.version }}</div>
+              <div class="sb-about-block__divider"></div>
+              <div v-if="menu.uptime" class="sb-about-block__line">
+                <i class="fas fa-clock"></i><span>Uptime: {{ menu.uptime }}</span>
+              </div>
+              <div class="sb-about-block__line">
+                <i class="fas fa-calendar-alt"></i><span>{{ currentTime }}</span>
+              </div>
+              <div v-if="menu.license_badge" class="sb-about-block__line">
+                <i class="fas fa-id-card"></i>
+                <a :href="`${pfx}/lua/license.lua`">{{ menu.license_badge.label }}</a>
+                <button class="sb-about-copy-btn" @click.stop="copyLicenseLink"
+                        :title="copiedLicense ? 'Copied!' : 'Copy license link'">
+                  <i :class="copiedLicense ? 'fas fa-check' : 'fas fa-copy'"></i>
+                </button>
+              </div>
+              <div v-if="menu.copyright" class="sb-about-block__copy" v-html="menu.copyright"></div>
+            </div>
+            <div v-if="visibleEntries(currentPanelSection).length" class="sb-panel-divider"></div>
+          </template>
+          <template v-for="(entry, idx) in visibleEntries(currentPanelSection)" :key="entry.is_divider ? `divider-${idx}` : entry.key">
+            <template v-if="entry.is_divider">
+              <div class="sb-panel-divider"></div>
+              <div v-if="entry.label" class="sb-panel-group-label">{{ entry.label }}</div>
+            </template>
+            <a
+              v-else
+              :href="entry.url"
+              class="sb-nav-link"
+              :class="{ 'sb-nav-link--active': activeSection === currentPanelSection.key && activeEntry === entry.key }"
+              :target="entry.is_external ? '_blank' : undefined"
+              :rel="entry.is_external ? 'noopener' : undefined"
+            >
+              <i v-if="entry.icon" :class="entry.icon" class="sb-nav-link__icon" aria-hidden="true"></i>
+              <span>{{ entry.label }}</span>
+              <i v-if="entry.is_external" class="fas fa-external-link-alt sb-ext-icon" aria-hidden="true"></i>
+            </a>
+          </template>
+        </nav>
+      </div>
+    </Transition>
+
+    <!-- Profile popup: floats above avatar -->
+    <Transition name="sb-popup-anim">
+      <div v-if="userPopupOpen" class="sb-user-popup" @click.stop
+           @mouseenter="onAvatarEnter" @mouseleave="onAvatarLeave"
+           :style="popupStyle">
+
+        <!-- Card header -->
+        <div class="sb-user-card">
+          <div class="sb-avatar sb-avatar--lg">{{ userInitials }}</div>
+          <div class="sb-user-card__info">
+            <div class="sb-user-card__name">{{ menu.username || "User" }}</div>
+            <div class="sb-user-card__role">{{ menu.is_admin ? "Admin" : "User" }}</div>
+          </div>
+        </div>
+
+        <div class="sb-popup-divider"></div>
+
+        <!-- Profile link -->
+        <template v-if="menu.is_no_login_user">
+          <div class="sb-popup-item sb-popup-item--text">
+            <i class="fas fa-user sb-popup-icon"></i>
+            <span>{{ menu.username }}</span>
+          </div>
+        </template>
+        <template v-else-if="!menu.is_local_user && !menu.is_admin">
+          <a class="sb-popup-item" href="#password_dialog" data-bs-toggle="modal"
+             @click="triggerPasswordDialog(menu.username)">
+            <i class="fas fa-user sb-popup-icon"></i>
+            <span>{{ manageUserLabel }}</span>
+          </a>
+        </template>
+        <template v-else>
+          <a class="sb-popup-item"
+             :href="`${pfx}/lua/admin/users.lua?user=${encodeURIComponent(menu.username || '')}`">
+            <i class="fas fa-user sb-popup-icon"></i>
+            <span>{{ _i18n("profile") || "Profile" }}</span>
+          </a>
+        </template>
+
+        <!-- Dark mode toggle — THE only place -->
+        <button class="sb-popup-item" @click.stop="toggleTheme">
+          <i :class="isDark ? 'fas fa-sun' : 'fas fa-moon'" class="sb-popup-icon"></i>
+          <span>{{ isDark ? (_i18n("toggle_white_theme") || "Light mode") : (_i18n("toggle_dark_theme") || "Dark mode") }}</span>
+          <div class="sb-toggle-switch" :class="{ on: isDark }">
+            <div class="sb-toggle-thumb"></div>
+          </div>
+        </button>
+
+        <!-- Restart -->
+        <template v-if="menu.is_admin && menu.is_package && !menu.is_windows">
+          <div class="sb-popup-divider"></div>
+          <button class="sb-popup-item" @click="confirmRestart">
+            <i class="fas fa-redo-alt sb-popup-icon"></i>
+            <span>{{ _i18n("restart.restart") }}</span>
+          </button>
+        </template>
+
+        <div class="sb-popup-divider"></div>
+
+        <a v-if="!menu.is_no_login_user" class="sb-popup-item sb-popup-item--danger"
+           href="#" @click.prevent="confirmLogout">
+          <i class="fas fa-sign-out-alt sb-popup-icon"></i>
+          <span>{{ _i18n("login.logout") }}</span>
+        </a>
+
+      </div>
+    </Transition>
+  </Teleport>
+
+  <!-- Topbar -->
+  <nav id="n-navbar" class="sb-topbar">
+
+    <!-- Left cluster -->
+    <div class="sb-topbar__left">
+
+      <!-- Interface selector -->
+      <div v-if="hasInterfaces" class="sb-iface-selector" ref="ifaceDropRef"
+           @mouseenter="onIfaceEnter"
+           @mouseleave="onIfaceLeave">
+        <button class="sb-iface-btn" :class="{ open: ifaceOpen }"
+                @click.stop="ifaceOpen = !ifaceOpen" aria-label="Select interface">
+          <span class="sb-iface-btn__icon">
+            <i :class="currentIfaceIcon"></i>
+          </span>
+          <span class="sb-iface-btn__name">{{ currentIfaceLabel }}</span>
+          <span v-if="currentIsZmq" class="sb-iface-btn__zmq" title="ZMQ interface">ZMQ</span>
+          <span v-if="currentHasDrops" class="sb-iface-btn__warn"
+                :title="_i18n('if_stats.drops')" data-bs-toggle="tooltip" data-bs-placement="bottom">
+            <i class="fas fa-exclamation-triangle"></i>
+          </span>
+          <i class="fas fa-chevron-down sb-iface-btn__caret" :class="{ rotated: ifaceOpen }"></i>
+        </button>
+
+        <Teleport to="body">
+          <Transition name="sb-drop-anim">
+            <div v-if="ifaceOpen" class="sb-iface-menu" :style="ifaceMenuStyle" @click.stop
+                 @mouseenter="onIfaceEnter"
+                 @mouseleave="onIfaceLeave">
+
+              <!-- Regular interfaces: tree when ViewAll present, flat otherwise -->
+              <div class="sb-iface-menu__section">
+                <div class="sb-iface-menu__label">Interfaces</div>
+
+                <!-- Tree layout: ViewAll as parent, all non-system ifaces as children -->
+                <template v-if="viewAllId">
+                  <!-- System interface first -->
+                  <a v-if="menu.system_ifid && menu.ifnames?.[menu.system_ifid]"
+                     class="sb-iface-item sb-iface-item--system"
+                     :class="{ 'sb-iface-item--active': menu.system_ifid === currentIfid }"
+                     href="#" @click.prevent="selectSystemIface()">
+                    <span class="sb-iface-item__icon"><i class="fas fa-cog text-muted"></i></span>
+                    <span class="sb-iface-item__info">
+                      <span class="sb-iface-item__name">{{ menu.ifHdescr?.[menu.system_ifid] || menu.ifnames?.[menu.system_ifid] }}</span>
+                      <span class="sb-iface-item__tags">
+                        <span class="sb-iface-tag sb-iface-tag--sys">system</span>
+                      </span>
+                    </span>
+                    <i v-if="menu.system_ifid === currentIfid" class="fas fa-check sb-iface-item__check"></i>
+                  </a>
+                  <div v-if="menu.system_ifid && menu.ifnames?.[menu.system_ifid]" class="sb-iface-menu__divider"></div>
+                  <!-- ViewAll row -->
+                  <a class="sb-iface-item"
+                     :class="{ 'sb-iface-item--active': viewAllId === currentIfid }"
+                     href="#" @click.prevent="selectIface(viewAllId)">
+                    <span class="sb-iface-item__icon">
+                      <i class="fas fa-layer-group text-info"></i>
+                    </span>
+                    <span class="sb-iface-item__info">
+                      <span class="sb-iface-item__name">{{ menu.ifHdescr?.[viewAllId] || menu.ifnames?.[viewAllId] || viewAllId }}</span>
+                      <span class="sb-iface-item__tags">
+                        <span class="sb-iface-tag sb-iface-tag--view">view-all</span>
+                        <span v-if="menu.drops?.[viewAllId]" class="sb-iface-tag sb-iface-tag--drop">drops</span>
+                      </span>
+                    </span>
+                    <i v-if="viewAllId === currentIfid" class="fas fa-check sb-iface-item__check"></i>
+                  </a>
+                  <!-- Sub-interfaces indented under ViewAll -->
+                  <template v-for="id in subIfaceIds" :key="id">
+                    <a class="sb-iface-item sb-iface-item--child"
+                       :class="{ 'sb-iface-item--active': id === currentIfid }"
+                       href="#" @click.prevent="selectIface(id)">
+                      <span class="sb-iface-tree-branch" aria-hidden="true"></span>
+                      <span class="sb-iface-item__icon">
+                        <i v-if="menu.pcapdump?.[id]"       class="fas fa-file-archive text-secondary"></i>
+                        <i v-else-if="menu.recording?.[id]" class="fas fa-circle text-danger"></i>
+                        <i v-else-if="menu.zmqifs?.[id]"    class="fas fa-stream text-warning"></i>
+                        <i v-else                           class="fas fa-ethernet text-muted"></i>
+                      </span>
+                      <span class="sb-iface-item__info">
+                        <span class="sb-iface-item__name">{{ menu.ifHdescr?.[id] || menu.ifnames?.[id] || id }}</span>
+                        <span class="sb-iface-item__tags">
+                          <span v-if="menu.recording?.[id]" class="sb-iface-tag sb-iface-tag--rec">rec</span>
+                          <span v-if="menu.pcapdump?.[id]"  class="sb-iface-tag sb-iface-tag--pcap">pcap</span>
+                          <span v-if="menu.zmqifs?.[id]"    class="sb-iface-tag sb-iface-tag--zmq">zmq</span>
+                          <span v-if="menu.drops?.[id]"     class="sb-iface-tag sb-iface-tag--drop">drops</span>
+                        </span>
+                      </span>
+                      <i v-if="id === currentIfid" class="fas fa-check sb-iface-item__check"></i>
+                    </a>
+                  </template>
+                </template>
+
+                <!-- Flat layout when no ViewAll -->
+                <template v-else>
+                  <template v-for="id in sortedIfaceIds" :key="id">
+                    <a class="sb-iface-item"
+                       :class="{
+                         'sb-iface-item--active': id === currentIfid,
+                         'sb-iface-item--system': id === menu.system_ifid
+                       }"
+                       href="#" @click.prevent="selectIface(id)">
+                      <span class="sb-iface-item__icon">
+                        <i v-if="id === menu.system_ifid"              class="fas fa-cog text-muted"></i>
+                        <i v-else-if="menu.views?.[id]"                class="fas fa-layer-group text-info"></i>
+                        <i v-else-if="menu.pcapdump?.[id]"             class="fas fa-file-archive text-secondary"></i>
+                        <i v-else-if="menu.recording?.[id]"            class="fas fa-circle text-danger"></i>
+                        <i v-else-if="menu.zmqifs?.[id]"               class="fas fa-stream text-warning"></i>
+                        <i v-else                                       class="fas fa-ethernet text-muted"></i>
+                      </span>
+                      <span class="sb-iface-item__info">
+                        <span class="sb-iface-item__name">
+                          {{ menu.ifHdescr?.[id] || menu.ifnames?.[id] || id }}
+                        </span>
+                        <span class="sb-iface-item__tags">
+                          <span v-if="id === menu.system_ifid"   class="sb-iface-tag sb-iface-tag--sys">system</span>
+                          <span v-if="menu.views?.[id]"          class="sb-iface-tag sb-iface-tag--view">view</span>
+                          <span v-if="menu.recording?.[id]"      class="sb-iface-tag sb-iface-tag--rec">rec</span>
+                          <span v-if="menu.pcapdump?.[id]"       class="sb-iface-tag sb-iface-tag--pcap">pcap</span>
+                          <span v-if="menu.zmqifs?.[id]"         class="sb-iface-tag sb-iface-tag--zmq">zmq</span>
+                          <span v-if="menu.drops?.[id]"          class="sb-iface-tag sb-iface-tag--drop">drops</span>
+                        </span>
+                      </span>
+                      <i v-if="id === currentIfid" class="fas fa-check sb-iface-item__check"></i>
+                    </a>
+                  </template>
+                </template>
+              </div>
+
+              <!-- Infrastructure -->
+              <template v-if="menu.infrastructure_instances?.length">
+                <div class="sb-iface-menu__divider"></div>
+                <div class="sb-iface-menu__section">
+                  <div class="sb-iface-menu__label">{{ _i18n("infrastructure.infrastructure") }}</div>
+                  <a v-for="inst in menu.infrastructure_instances" :key="inst.id"
+                     class="sb-iface-item"
+                     :href="`${pfx}/lua/pro/enterprise/infrastructure_config.lua`">
+                    <span class="sb-iface-item__icon"><i class="fas fa-server text-muted"></i></span>
+                    <span class="sb-iface-item__info">
+                      <span class="sb-iface-item__name">{{ inst.id }}</span>
+                    </span>
+                  </a>
+                </div>
+              </template>
+
+            </div>
+          </Transition>
+        </Teleport>
+      </div>
+
+      <!-- Sparklines (d3v7, refs driven) -->
+      <div v-if="!menu.is_system_interface && !menu.infrastructure_view && !menu.is_pcap_dump"
+           class="sb-sparklines d-none d-md-flex">
+        <div class="sb-spark-combined" :title="`↑ ${sparkLabels.up}  ↓ ${sparkLabels.dn}`">
+          <svg ref="svgCombined" class="sb-spark"></svg>
+          <div class="sb-spark-labels">
+            <span class="sb-spark-val">
+              <i class="fas fa-arrow-up sb-spark-arrow"></i>{{ sparkLabels.up }}
+            </span>
+            <span class="sb-spark-val">
+              <i class="fas fa-arrow-down sb-spark-arrow"></i>{{ sparkLabels.dn }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- License badge -->
+      <a v-if="menu.license_badge" :href="menu.license_badge.url || `${pfx}/lua/license.lua`"
+         target="_blank" rel="noopener" class="sb-license-badge d-none d-md-inline-flex">
+        <span class="badge bg-warning text-dark">{{ menu.license_badge.label }}</span>
+      </a>
+
+      <div v-if="!menu.infrastructure_view" class="network-load d-none d-lg-flex"></div>
+    </div>
+
+    <!-- Right cluster -->
+    <div class="sb-topbar__right">
+
+      <SearchBox :context="searchCtx" />
+
+      <!-- Blog bell -->
+      <div v-if="!menu.is_oem && hasBlogPosts" class="sb-topbar__btn-wrap" ref="blogDropRef">
+        <button class="sb-topbar__icon-btn" :class="{ open: blogOpen }"
+                @click.stop="blogOpen = !blogOpen" aria-label="Notifications">
+          <i class="fas fa-bell"></i>
+          <span v-if="menu.new_posts_counter > 0" class="sb-topbar__badge">
+            {{ menu.new_posts_counter }}
+          </span>
+        </button>
+        <Teleport to="body">
+          <Transition name="sb-drop-anim">
+            <div v-if="blogOpen" class="sb-blog-menu" :style="blogMenuStyle" @click.stop>
+              <div class="sb-iface-menu__label px-3 pt-2 pb-1">{{ _i18n("blog.latest_posts") }}</div>
+              <a v-for="post in menu.blog_posts" :key="post.id"
+                 class="sb-blog-item" :href="post.url" target="_blank" rel="noopener"
+                 @click="markPostRead(post.id); blogOpen=false">
+                <i class="fas fa-circle fa-xs" :class="post.is_read ? 'text-muted opacity-25' : 'text-primary'"></i>
+                <span :class="{ 'fw-semibold': !post.is_read }">{{ post.title }}</span>
+              </a>
+            </div>
+          </Transition>
+        </Teleport>
+      </div>
+
+    </div>
+  </nav>
+
+  <!-- Restart modal -->
+  <div class="modal fade" id="restart-modal" tabindex="-1">
+    <div class="modal-dialog modal-sm">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{ _i18n("restart.restart") }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body">{{ _i18n("restart.confirm_restart") }}</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ _i18n("cancel") }}</button>
+          <button class="btn btn-danger btn-sm" @click="doRestart">{{ _i18n("restart.restart") }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+import { ntopng_utility } from "../services/context/ntopng_globals_services.js";
+import { default as SearchBox } from "./components/search-box.vue";
+const d3 = d3v7;
+
+const props = defineProps({ context: Object });
+const ctx   = computed(() => props.context || {});
+
+const pfx = computed(() =>
+  ctx.value.http_prefix || (typeof http_prefix !== "undefined" ? http_prefix : "")
+);
+
+const _i18n = (t) => i18n(t);
+
+// State
+const menu           = ref({});
+const hoveredSection = ref(null);  // currently hovered (transient)
+const lockedSection  = ref(null);  // clicked/locked open
+const isPanelOpen    = ref(false);
+const userPopupOpen  = ref(false);
+const railHovered    = ref(false); // rail hover -> expand all labels
+const avatarBtn      = ref(null);  // ref to avatar button element
+const ifaceDropRef   = ref(null);  // interface selector button
+const blogDropRef    = ref(null);  // blog bell button
+const railNav        = ref(null);  // ref to scrollable nav area
+const navOverflow    = ref(false); // true when items are hidden below visible area
+const navCanScrollUp = ref(false); // true when scrolled down (items hidden above)
+const ifaceOpen      = ref(false);
+const blogOpen       = ref(false);
+let ifaceLeaveTimer  = null;
+let railNavObserver  = null;
+
+function checkNavOverflow() {
+  if (!railNav.value) return;
+  const el = railNav.value;
+  navCanScrollUp.value = el.scrollTop > 4;
+  navOverflow.value    = (el.scrollHeight - el.scrollTop) > el.clientHeight + 4;
+}
+
+function onIfaceEnter() { window.clearTimeout(ifaceLeaveTimer); }
+function onIfaceLeave() { ifaceLeaveTimer = window.setTimeout(() => { ifaceOpen.value = false; }, 200); }
+
+function selectSystemIface() {
+  const sysId = String(menu.value.system_ifid || "");
+  if (sysId) selectIface(sysId);
+}
+
+
+// Popup opens above the avatar button, aligned to the left edge of the rail
+const popupStyle = computed(() => {
+  if (!avatarBtn.value) return {};
+  const rect = avatarBtn.value.getBoundingClientRect();
+  return { bottom: (window.innerHeight - rect.top + 4) + "px", left: "0" };
+});
+
+// Interface dropdown positioned below the trigger button
+const ifaceMenuStyle = computed(() => {
+  if (!ifaceDropRef.value) return {};
+  const rect = ifaceDropRef.value.getBoundingClientRect();
+  return { top: (rect.bottom + 4) + "px", left: rect.left + "px" };
+});
+
+// Blog dropdown positioned below the trigger button (right-aligned)
+const blogMenuStyle = computed(() => {
+  if (!blogDropRef.value) return {};
+  const rect = blogDropRef.value.getBoundingClientRect();
+  return { top: (rect.bottom + 4) + "px", right: (window.innerWidth - rect.right) + "px" };
+});
+
+// The panel shows: locked section if any, otherwise hovered
+const currentPanelSection = computed(() => lockedSection.value || hoveredSection.value);
+
+const activeSection = computed(() => ctx.value.active_section || "");
+const activeEntry   = computed(() => ctx.value.active_entry   || "");
+
+// Theme: initialised from DOM (set by page_utils.lua before Vue mounts),
+// then kept in sync by toggleTheme() so the toggle is instant.
+function readDomTheme() {
+  const html = document.documentElement;
+  return html.getAttribute("data-theme") === "dark"
+    || html.getAttribute("data-bs-theme") === "dark"
+    || html.classList.contains("dark-mode")
+    || document.body?.classList.contains("dark-mode")
+    || document.body?.classList.contains("dark");
+}
+const isDark = ref(readDomTheme());
+
+const userInitials = computed(() => {
+  const u = (menu.value.username || "").trim();
+  if (!u) return "U";
+  const parts = u.split(/[\s._@-]+/).filter(Boolean);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return u.slice(0, 2).toUpperCase();
+});
+
+// Menu data
+async function loadMenu() {
+  const ifid = ctx.value.ifid || (typeof interfaceID !== "undefined" ? interfaceID : 0);
+  try {
+    const data = await ntopng_utility.http_request(
+      `${pfx.value}/lua/rest/v2/get/ntopng/menu.lua?ifid=${ifid}`
+    );
+    if (data) menu.value = data;
+  } catch (_) {}
+}
+
+// Menu helpers
+const visibleSections = computed(() =>
+  (menu.value.sections || []).filter(s => !s.hidden)
+);
+
+function visibleEntries(section) {
+  const entries = (section?.entries || []).filter(e => !e.hidden);
+  // Remove leading, trailing, and consecutive dividers
+  return entries.filter((e, i, arr) => {
+    if (!e.is_divider) return true;
+    const prev = arr.slice(0, i).find(x => !x.is_divider);
+    const next = arr.slice(i + 1).find(x => !x.is_divider);
+    return !!(prev && next);
+  });
+}
+
+function hasEntries(section) {
+  return !!(section?.entries?.filter(e => !e.hidden).length);
+}
+
+// Switch interface via C++ session,C++ LuaEngine intercepts a POST with switch_interface=1 in the body and
+// ifid=X in the query string -> calls switchInterface() -> persists to Redis -> redirects to the action URL.
+function selectIface(targetIfid) {
+  if (!targetIfid) return;
+  const sysId  = String(menu.value.system_ifid || "");
+  const target = String(targetIfid);
+
+  // Build destination URL: same logic as page_utils.switch_interface_form_action_url
+  let actionUrl;
+  if (target === sysId) {
+    actionUrl = `${pfx.value}/lua/system_stats.lua?ifid=${target}`;
+  } else if (currentIfid.value === sysId) {
+    actionUrl = `${pfx.value}/lua/index.lua?ifid=${target}`;
+  } else {
+    // Preserve current page and all its params, only swap ifid
+    const u = new URL(window.location.href);
+    u.searchParams.set("ifid", target);
+    u.searchParams.delete("observationPointId");
+    actionUrl = u.toString();
+  }
+
+  // POST switch_interface=1 + csrf so C++ switchInterface() persists the session
+  const csrf = ctx.value.csrf || window.__CSRF_DATATABLE__ || "";
+  const form  = document.createElement("form");
+  form.method = "POST";
+  form.action = actionUrl;
+  const addField = (name, value) => {
+    const f = document.createElement("input");
+    f.type = "hidden"; f.name = name; f.value = value;
+    form.appendChild(f);
+  };
+  addField("switch_interface", "1");
+  if (csrf) addField("csrf", csrf);
+  document.body.appendChild(form);
+  form.submit();
+}
+
+// Interface helpers
+const hasInterfaces = computed(() =>
+  menu.value.ifnames && Object.keys(menu.value.ifnames).length > 1
+);
+
+// Sorted interface ids: system first, then alphabetically by display name
+const sortedIfaceIds = computed(() => {
+  const ifnames = menu.value.ifnames || {};
+  const sysId   = menu.value.system_ifid;
+  return Object.keys(ifnames).sort((a, b) => {
+    if (a === sysId) return -1;
+    if (b === sysId) return  1;
+    const na = menu.value.ifHdescr?.[a] || ifnames[a] || a;
+    const nb = menu.value.ifHdescr?.[b] || ifnames[b] || b;
+    return na.localeCompare(nb);
+  });
+});
+
+// Ground-truth current ifid: read from URL ifid param so it survives navigation,
+// fall back to menu response, then page boot context. Always a string.
+const currentIfid = computed(() => {
+  const urlIfid = new URL(window.location.href).searchParams.get("ifid");
+  if (urlIfid) return String(urlIfid);
+  if (menu.value.current_ifid) return String(menu.value.current_ifid);
+  return String(ctx.value.ifid || (typeof interfaceID !== "undefined" ? interfaceID : 0) || "");
+});
+
+const currentIfaceLabel = computed(() => {
+  const id = currentIfid.value;
+  if (!id) return "";
+  return (menu.value.ifHdescr && menu.value.ifHdescr[id])
+    || (menu.value.ifnames && menu.value.ifnames[id]) || "";
+});
+
+const currentHasDrops = computed(() => {
+  const id = currentIfid.value;
+  return !!(id && menu.value.drops && menu.value.drops[id]);
+});
+
+const currentIsZmq = computed(() => {
+  const id = currentIfid.value;
+  return !!(id && menu.value.zmqifs && menu.value.zmqifs[id]);
+});
+
+const currentIfaceIcon = computed(() => {
+  const id = currentIfid.value;
+  if (!id) return "fas fa-ethernet";
+  if (id === menu.value.system_ifid)       return "fas fa-cog";
+  if (menu.value.views?.[id])              return "fas fa-layer-group";
+  if (menu.value.pcapdump?.[id])           return "fas fa-file-archive";
+  if (menu.value.recording?.[id])          return "fas fa-circle text-danger";
+  if (menu.value.zmqifs?.[id])             return "fas fa-stream";
+  return "fas fa-ethernet";
+});
+
+// ViewAll tree: viewAllId is the single view interface id (if exactly one view exists)
+const viewAllId = computed(() => {
+  const views = menu.value.views;
+  if (!views) return null;
+  const ids = Object.keys(views);
+  return ids.length > 0 ? ids[0] : null;
+});
+
+// Sub-interfaces: all non-system, non-view interfaces when ViewAll is present
+const subIfaceIds = computed(() => {
+  if (!viewAllId.value || !menu.value.ifnames) return [];
+  const sysId = menu.value.system_ifid;
+  return Object.keys(menu.value.ifnames).filter(id =>
+    id !== viewAllId.value && id !== sysId
+  ).sort((a, b) => {
+    const na = menu.value.ifHdescr?.[a] || menu.value.ifnames[a] || a;
+    const nb = menu.value.ifHdescr?.[b] || menu.value.ifnames[b] || b;
+    return na.localeCompare(nb);
+  });
+});
+
+const hasBlogPosts = computed(() =>
+  Array.isArray(menu.value.blog_posts) && menu.value.blog_posts.length > 0
+);
+
+const searchCtx = computed(() => ({
+  ifid: ctx.value.ifid || (typeof interfaceID !== "undefined" ? interfaceID : 0),
+}));
+
+const manageUserLabel = computed(() => {
+  const tpl =_i18n("manage_users.manage_user_x");
+  return tpl.replace ? tpl.replace(/%\{user\}/g, menu.value.username || "") : tpl;
+});
+
+// Panel open/close logic
+// Hover opens transiently. Click locks open (toggle). Mouse leaving both
+// rail and panel closes only if NOT locked.
+let railLeaveTimer  = null;
+let panelLeaveTimer = null;
+
+function onRailEnter() {
+  clearTimeout(railLeaveTimer);
+  clearTimeout(panelLeaveTimer);
+  railHovered.value = true;
+  ifaceOpen.value = false;
+  blogOpen.value  = false;
+}
+
+function onRailLeave() {
+  if (isPanelOpen.value) return;   // keep labels visible while panel is open
+  railHovered.value = false;
+  if (lockedSection.value) return;
+  railLeaveTimer = setTimeout(() => {
+    isPanelOpen.value = false;
+    hoveredSection.value = null;
+  }, 120);
+}
+
+function onPanelEnter() {
+  clearTimeout(railLeaveTimer);
+  clearTimeout(panelLeaveTimer);
+}
+
+function onPanelLeave() {
+  if (lockedSection.value) return; // locked — never close on panel leave
+  panelLeaveTimer = setTimeout(() => {
+    isPanelOpen.value = false;
+    hoveredSection.value = null;
+    railHovered.value = false;    // collapse labels once panel fully closes
+  }, 120);
+}
+
+function sectionHasPanel(section) {
+  return hasEntries(section) || section.key === "about";
+}
+
+function onSectionHover(section) {
+  clearTimeout(railLeaveTimer);
+  clearTimeout(panelLeaveTimer);
+  userPopupOpen.value = false;
+  hoveredSection.value = section;
+  if (sectionHasPanel(section)) {
+    isPanelOpen.value = true;
+  } else {
+    if (!lockedSection.value) {
+      isPanelOpen.value = false;
+    }
+  }
+}
+
+function onSectionClick(section) {
+  userPopupOpen.value = false;
+  if (!sectionHasPanel(section)) {
+    if (section.url) window.location.href = section.url;
+    return;
+  }
+  // Toggle lock
+  if (lockedSection.value?.key === section.key) {
+    lockedSection.value = null;
+    isPanelOpen.value = false;
+    hoveredSection.value = null;
+  } else {
+    lockedSection.value = section;
+    hoveredSection.value = section;
+    isPanelOpen.value = true;
+  }
+}
+
+function closePanel() {
+  lockedSection.value = null;
+  isPanelOpen.value = false;
+  hoveredSection.value = null;
+}
+
+// User popup
+let avatarLeaveTimer = null;
+
+function onAvatarEnter() {
+  clearTimeout(avatarLeaveTimer);
+  userPopupOpen.value = true;
+  isPanelOpen.value = false;
+}
+
+function onAvatarLeave() {
+  avatarLeaveTimer = setTimeout(() => { userPopupOpen.value = false; }, 200);
+}
+
+function applyLayout() {
+  const html = document.documentElement;
+  // Override --sidebar-width so sidebar.scss calc(var(--sidebar-width)+1rem) = 1rem
+  // which our padding-left:0 below then kills completely.
+  // Inline style on html beats any stylesheet including white-mode.css.
+  html.style.setProperty("--sidebar-width", "0px");
+  html.style.setProperty("--sb-rail-w",    "4rem");
+  html.style.setProperty("--sb-rail-exp",  "14.5rem");
+  html.style.setProperty("--sb-navbar-h",  "3rem");
+
+  const ct = document.getElementById("n-container");
+  if (ct) {
+    const p = (k, v) => ct.style.setProperty(k, v, "important");
+    p("padding-left",  "0.75rem");
+    p("padding-right", "0.75rem");
+    p("padding-top",   "calc(3rem + 0.5rem)");
+    p("margin-left",   "5rem");
+    p("margin-right",  "0");
+    p("margin-top",    "0");
+    p("width",         "auto");
+    p("max-width",     "none");
+    p("display",       "block");
+    p("box-sizing",    "border-box");
+  }
+
+  // Kill .body padding-top from white-mode.scss (4.5rem)
+  document.querySelectorAll(".body").forEach(el => {
+    el.style.setProperty("padding-top", "0", "important");
+  });
+}
+
+// Click outside
+function handleOutsideClick(e) {
+  const inRail  = e.target.closest("#n-sidebar");
+  const inPanel = e.target.closest(".sb-panel");
+  const inPopup = e.target.closest(".sb-user-popup");
+
+  if (!inRail && !inPanel) {
+    lockedSection.value = null;
+    isPanelOpen.value = false;
+    hoveredSection.value = null;
+  }
+  if (!inRail && !inPopup) {
+    userPopupOpen.value = false;
+  }
+  if (!e.target.closest(".sb-iface-selector") && !e.target.closest(".sb-iface-menu")) {
+    ifaceOpen.value = false;
+  }
+  if (!e.target.closest(".sb-topbar__btn-wrap") && !e.target.closest(".sb-blog-menu")) {
+    blogOpen.value = false;
+  }
+}
+
+// Sparklines d3v7
+let pollTimer = null;
+const SPARK_W = 100;
+const SPARK_H = 30;
+const MAX_PTS = 30;
+
+const svgCombined = ref(null);
+const sparkLabels  = ref({ up: "", dn: "" });
+
+let spark  = null;
+let seeded = false;
+
+function formatBits(bps) {
+  if (bps == null || bps === 0) return "";
+  if (bps >= 1e9) return (bps / 1e9).toFixed(1) + " Gbps";
+  if (bps >= 1e6) return (bps / 1e6).toFixed(1) + " Mbps";
+  if (bps >= 1e3) return (bps / 1e3).toFixed(0) + " Kbps";
+  return bps.toFixed(0) + " bps";
+}
+
+function buildCombinedSparkline(svgEl) {
+  if (!svgEl || !window.d3v7) return null;
+  const d3 = d3v7;
+  const dataUp = [];
+  const dataDn = [];
+
+  const svg = d3.select(svgEl).attr("width", SPARK_W).attr("height", SPARK_H);
+
+  svg.append("line").attr("class", "spark-center")
+    .attr("x1", 0).attr("x2", SPARK_W)
+    .attr("y1", SPARK_H / 2).attr("y2", SPARK_H / 2)
+    .attr("stroke", "rgba(128,128,128,0.25)").attr("stroke-width", 0.5);
+
+  svg.append("path").attr("class", "spark-up-area")
+    .attr("fill", "rgba(86,204,242,0.18)").attr("stroke", "none");
+  svg.append("path").attr("class", "spark-up-line")
+    .attr("fill", "none").attr("stroke", "#56CCF2")
+    .attr("stroke-width", 1.5).attr("stroke-linejoin", "round");
+
+  svg.append("path").attr("class", "spark-dn-area")
+    .attr("fill", "rgba(111,207,151,0.22)").attr("stroke", "none");
+  svg.append("path").attr("class", "spark-dn-line")
+    .attr("fill", "none").attr("stroke", "#6FCF97")
+    .attr("stroke-width", 1.5).attr("stroke-linejoin", "round");
+
+  function redraw() {
+    const n   = Math.max(dataUp.length, dataDn.length, 2);
+    const max = Math.max(d3.max(dataUp) || 0, d3.max(dataDn) || 0, 1);
+
+    const xScale = d3.scaleLinear().domain([0, n - 1]).range([0, SPARK_W]);
+    const yUp    = d3.scaleLinear().domain([0, max]).range([SPARK_H / 2, 0]);
+    const yDn    = d3.scaleLinear().domain([0, max]).range([SPARK_H / 2, SPARK_H]);
+
+    const lineUp  = d3.line().x((_, i) => xScale(i)).y(d => yUp(d)).curve(d3.curveMonotoneX);
+    const lineDn  = d3.line().x((_, i) => xScale(i)).y(d => yDn(d)).curve(d3.curveMonotoneX);
+    const areaUp  = d3.area().x((_, i) => xScale(i)).y0(SPARK_H / 2).y1(d => yUp(d)).curve(d3.curveMonotoneX);
+    const areaDn  = d3.area().x((_, i) => xScale(i)).y0(SPARK_H / 2).y1(d => yDn(d)).curve(d3.curveMonotoneX);
+
+    svg.select(".spark-up-area").datum(dataUp).attr("d", areaUp);
+    svg.select(".spark-up-line").datum(dataUp).attr("d", lineUp);
+    svg.select(".spark-dn-area").datum(dataDn).attr("d", areaDn);
+    svg.select(".spark-dn-line").datum(dataDn).attr("d", lineDn);
+  }
+
+  return {
+    seedUp(arr) { arr.slice(-MAX_PTS).forEach(v => dataUp.push(v)); },
+    seedDn(arr) { arr.slice(-MAX_PTS).forEach(v => dataDn.push(v)); },
+    pushBoth(u, dn) {
+      dataUp.push(u);  if (dataUp.length > MAX_PTS) dataUp.shift();
+      dataDn.push(dn); if (dataDn.length > MAX_PTS) dataDn.shift();
+      redraw();
+    },
+    redraw,
+  };
+}
+
+function tryInitSpark() {
+  if (spark || !window.d3v7 || !svgCombined.value) return;
+  spark = buildCombinedSparkline(svgCombined.value);
+}
+
+async function pollIface() {
+  tryInitSpark();
+  const ifid = ctx.value.ifid || (typeof interfaceID !== "undefined" ? interfaceID : 0);
+  try {
+    const d = await ntopng_utility.http_request(
+      `${pfx.value}/lua/rest/v2/get/interface/data.lua?ifid=${ifid}`
+    );
+    if (!d) return;
+    const r = d.rsp || d;
+
+    // Seed history on first response (C++ stores KB/s -> convert to bps)
+    if (!seeded && spark) {
+      const histUp = (r.download_upload_chart?.upload   || []).map(v => v * 8000);
+      const histDn = (r.download_upload_chart?.download || []).map(v => v * 8000);
+      if (histUp.length || histDn.length) {
+        spark.seedUp(histUp);
+        spark.seedDn(histDn);
+        spark.redraw();
+      }
+      seeded = true;
+    }
+
+    const upBps = r.throughput?.upload?.bps   ?? r.bytes_upload;
+    const dnBps = r.throughput?.download?.bps ?? r.bytes_download;
+    if (upBps != null && dnBps != null) {
+      spark?.pushBoth(upBps, dnBps);
+      sparkLabels.value.up = formatBits(upBps);
+      sparkLabels.value.dn = formatBits(dnBps);
+    }
+
+    if (window.ntopng_events_manager && window.ntopng_custom_events)
+      ntopng_events_manager.emit_custom_event(ntopng_custom_events.GET_INTERFACE_DATA, r);
+
+    buildNetworkLoad(r);
+  } catch (_) {}
+}
+
+// Network load badges
+function buildNetworkLoad(r) {
+  const el = document.querySelector(".network-load");
+  if (!el) return;
+
+  const isSys    = currentIfid.value === String(menu.value.system_ifid || "");
+  const pfxVal   = pfx.value;
+  const ifidVal  = ctx.value.ifid || (typeof interfaceID !== "undefined" ? interfaceID : 0);
+  const ALARM_LO = 60;
+  const ALARM_HI = 90;
+  const fmt      = (v) => window.NtopUtils ? NtopUtils.formatValue(v, 1) : String(v);
+  const tip      = (text) => `data-bs-toggle="tooltip" data-bs-placement="bottom" title="${text}"`;
+
+  let msg = `<div class='d-flex gap-1 navbar-main-badges flex-nowrap'>`;
+
+  if (r.out_of_maintenance) {
+    msg += `<a href='https://www.ntop.org/support/faq/how-can-i-renew-maintenance-for-commercial-products/' target='_blank'>
+      <span class='badge bg-warning'>${t("about.maintenance_expired")} <i class="fas fa-external-link-alt"></i></span></a>`;
+  }
+
+  if (r.degraded_performance) {
+    msg += `<a href='${pfxVal}/lua/system_interfaces_stats.lua?page=internals&tab=periodic_activities&periodic_script_issue=any_issue'>
+      <span class='badge bg-warning' ${tooltip(_i18n("internals.degraded_performance"))}><i class='fas fa-exclamation-triangle'></i></span></a>`;
+  }
+
+  if (r.engaged_alerts > 0) {
+    let cls = "bg-info";
+    if (r.engaged_alerts_error > 0)        cls = "bg-danger";
+    else if (r.engaged_alerts_warning > 0) cls = "bg-warning";
+    msg += `<a href='${pfxVal}/lua/alert_stats.lua?ifid=${ifidVal}&status=engaged'>
+      <span class="badge ${cls}" ${tooltip(_i18n("graphs.engaged_alerts"))}><i class="fas fa-exclamation-triangle"></i> ${fmt(r.engaged_alerts)}</span></a>`;
+  }
+
+  if (!isSys) {
+    if (r.alerted_flows_warning > 0) {
+      msg += `<a href='${pfxVal}/lua/flows_stats.lua?status=warning'>
+        <span class="badge bg-warning" ${tooltip(_i18n("flow_details.alerted_flows"))}>${fmt(r.alerted_flows_warning)} <i class="fas fa-stream"></i> <i class="fas fa-exclamation-triangle"></i></span></a>`;
+    }
+    if (r.alerted_flows_error > 0) {
+      msg += `<a href='${pfxVal}/lua/flows_stats.lua?status=error'>
+        <span class="badge bg-danger" ${tooltip(_i18n("flow_details.dangerous_flows"))}>${fmt(r.alerted_flows_error)} <i class="fas fa-stream"></i> <i class="fas fa-exclamation-triangle"></i></span></a>`;
+    }
+    if (r.active_discovery_active === true) {
+      msg += `<a href='${pfxVal}/lua/discover.lua'>
+        <span class="badge bg-warning" ${tooltip(_i18n("prefs.network_discovery_running"))}><i class="fas fa-project-diagram"></i></span></a>`;
+    }
+    if (r.ts_alerts?.influxdb) {
+      msg += `<a href='${pfxVal}/lua/monitor/influxdb_monitor.lua?ifid=${ifidVal}&page=alerts#tab-table-engaged-alerts'>
+        <span class="badge bg-danger" ${tooltip(_i18n("alerts_dashboard.influxdb_error"))}><i class="fas fa-database"></i></span></a>`;
+    }
+    if (r.num_local_hosts > 0) {
+      msg += `<a href='${pfxVal}/lua/hosts_stats.lua?mode=local'>
+        <span class="badge bg-success" ${tooltip(_i18n("local_hosts"))}>${fmt(r.num_local_hosts)}`;
+      if (r.num_local_rcvd_only_hosts > 0) msg += ` (${fmt(r.num_local_rcvd_only_hosts)})`;
+      msg += ` <i class="fas fa-laptop"></i></span></a>`;
+    }
+    const numRemote = (r.num_hosts || 0) - (r.num_local_hosts || 0);
+    if (numRemote > 0) {
+      let cls = r.hosts_pctg >= ALARM_HI ? "bg-danger" : r.hosts_pctg >= ALARM_LO ? "bg-warning" : "bg-secondary";
+      msg += `<a href='${pfxVal}/lua/hosts_stats.lua?mode=remote'>
+        <span class="badge ${cls}" ${tooltip(_i18n("remote_hosts"))}>${fmt(numRemote)}`;
+      const remRcvd = (r.num_rcvd_only_hosts || 0) - (r.num_local_rcvd_only_hosts || 0);
+      if (remRcvd > 0) msg += ` (${fmt(remRcvd)})`;
+      msg += ` <i class="fas fa-laptop"></i></span></a>`;
+    }
+    if (r.num_devices > 0) {
+      let cls = r.macs_pctg >= ALARM_HI ? "bg-danger" : r.macs_pctg >= ALARM_LO ? "bg-warning" : "bg-secondary";
+      msg += `<a href='${pfxVal}/lua/macs_stats.lua?devices_mode=source_macs_only'>
+        <span class="badge ${cls}" ${tooltip(_i18n("mac_stats.layer_2_source_devices"))}>${fmt(r.num_devices)} <i class="fas fa-ethernet"></i></span></a>`;
+    }
+    if (r.num_flows > 0) {
+      let cls = r.flows_pctg >= ALARM_HI ? "bg-danger" : r.flows_pctg >= ALARM_LO ? "bg-warning" : "bg-secondary";
+      msg += `<a href='${pfxVal}/lua/flows_stats.lua'>
+        <span class="badge ${cls}" ${tooltip(_i18n("live_flows"))}>${fmt(r.num_flows)} <i class="fas fa-stream"></i></span></a>`;
+      if (r.db?.flow_export_drops > 0) {
+        const pctg = r.db.flow_export_drops / (r.db.flow_export_count + r.db.flow_export_drops + 1);
+        if (pctg > 0.05) {
+          const bc = pctg <= 0.1 ? "warning" : "danger";
+          msg += `<a href='${pfxVal}/lua/if_stats.lua'>
+            <span class="badge bg-${bc}" ${tooltip(_i18n("flow_export_drops"))}><i class="fas fa-exclamation-triangle"></i> ${fmt(r.db.flow_export_drops)} DB drop${r.db.flow_export_drops > 1 ? "s" : ""}</span></a>`;
+        }
+      }
+      if (r.dropped_zmq_msg > 0) {
+        msg += `<a href='${pfxVal}/lua/if_stats.lua'>
+          <span class="badge bg-warning" ${tooltip(_i18n("dropping_zmq_msg"))}><i class="fas fa-tint"></i> ${fmt(r.dropped_zmq_msg)} ZMQ</span></a>`;
+      }
+      if (r.dropped_flows > 0) {
+        msg += `<a href='${pfxVal}/lua/if_stats.lua'>
+          <span class="badge bg-warning" ${tooltip(_i18n("dropping_flows"))}><i class="fas fa-tint"></i> ${fmt(r.dropped_flows)} Flows Drops</span></a>`;
+      }
+    }
+    if (r.num_live_captures > 0) {
+      msg += `<a href='${pfxVal}/lua/live_capture_stats.lua'>
+        <span class="badge bg-primary" ${tooltip(_i18n("live_capture.active_live_captures"))}>${window.NtopUtils ? NtopUtils.addCommas(r.num_live_captures) : r.num_live_captures} <i class="fas fa-download fa-lg"></i></span></a>`;
+    }
+    if (r.traffic_recording !== undefined) {
+      const cls = r.traffic_recording === "recording" ? "bg-primary" : "bg-danger";
+      const lbl = r.traffic_recording === "recording" ?_i18n("traffic_recording.recording") :_i18n("traffic_recording.failure");
+      msg += `<a href='${pfxVal}/lua/if_stats.lua?ifid=${ifidVal}&page=traffic_recording&tab=status'>
+        <span class="badge ${cls}" ${tooltip(lbl)}><i class="fas fa-hdd fa-lg"></i></span></a>`;
+    }
+    if (r.traffic_extraction !== undefined) {
+      const cls = r.traffic_extraction === "ready" ? "bg-primary" : "bg-secondary";
+      msg += `<a href='${pfxVal}/lua/if_stats.lua?ifid=${ifidVal}&page=traffic_recording&tab=jobs'>
+        <span class="badge ${cls}" ${tooltip(_i18n("traffic_recording.traffic_extraction_jobs"))}>${r.traffic_extraction_num_tasks || 0} <i class="fas fa-tasks fa-lg"></i></span></a>`;
+    }
+    if (r.vs_in_progress > 0) {
+      msg += `<a href='${pfxVal}/lua/vulnerability_scan.lua'>
+        <span class="badge bg-primary" ${tooltip(_i18n("vulnerability_scan.vulnerability_scan_in_progress"))}>${window.NtopUtils ? NtopUtils.addCommas(r.vs_in_progress) : r.vs_in_progress} <i class="fas fa-satellite-dish"></i></span></a>`;
+    }
+  }
+
+  if (r.is_loading === true) {
+    msg += `<span class="badge bg-primary"><i class="fas fa-spinner fa-spin"></i> ${t("loading")}</span>`;
+  }
+
+  msg += `</div>`;
+  el.innerHTML = msg;
+
+  if (window.bootstrap) {
+    el.querySelectorAll("[data-bs-toggle='tooltip']").forEach(node => {
+      try { new bootstrap.Tooltip(node); } catch (_) {}
+    });
+  }
+}
+
+// Theme toggle
+function applyTheme(dark) {
+  const html  = document.documentElement;
+  const body  = document.body;
+  const sheet = document.getElementById("dark-mode-css");
+
+  html.setAttribute("data-theme",    dark ? "dark" : "light");
+  html.setAttribute("data-bs-theme", dark ? "dark" : "light");
+  body?.classList.toggle("dark",      dark);
+  body?.classList.toggle("dark-mode", dark);
+  if (sheet) sheet.disabled = !dark;
+}
+
+function toggleTheme() {
+  const nextDark = !isDark.value;
+  isDark.value = nextDark;
+  applyTheme(nextDark);
+
+  // Persist preference in the background — no reload needed
+  ntopng_utility.http_request(`${pfx.value}/lua/update_prefs.lua`, {
+    method: "POST",
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: new URLSearchParams({
+      action: "toggle_theme",
+      toggle_dark_theme: nextDark ? "true" : "false",
+      csrf: ctx.value.csrf || window.__CSRF_DATATABLE__ || "",
+    }),
+  }).catch(() => {});
+}
+
+// Restart
+let restartModal = null;
+
+function confirmRestart() {
+  if (!restartModal) {
+    const el = document.getElementById("restart-modal");
+    if (el && window.bootstrap) restartModal = new bootstrap.Modal(el);
+  }
+  restartModal?.show();
+}
+
+async function doRestart() {
+  restartModal?.hide();
+  try {
+    await ntopng_utility.http_request(`${pfx.value}/lua/admin/service_restart.lua`, {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({ csrf: ctx.value.csrf || window.__CSRF_DATATABLE__ || "" }),
+    });
+    setTimeout(() => window.location.reload(), 4000);
+  } catch (_) {}
+}
+
+// Logout
+function confirmLogout() {
+  const msg = (typeof i18n === "function" && i18n("login.logout_message")) || "Logout?";
+  if (confirm(msg)) window.location.href = `${pfx.value}/lua/ntopng_logout.lua`;
+}
+
+function triggerPasswordDialog(username) {
+  if (typeof window.reset_pwd_dialog === "function") window.reset_pwd_dialog(username);
+}
+
+// Info tooltip: clock + license copy
+const currentTime   = ref("");
+const copiedLicense = ref(false);
+let clockTimer      = null;
+
+function updateClock() {
+  currentTime.value = new Date().toLocaleString();
+}
+
+function copyLicenseLink() {
+  const url = window.location.origin + pfx.value + "/lua/license.lua";
+  navigator.clipboard?.writeText(url).then(() => {
+    copiedLicense.value = true;
+    setTimeout(() => { copiedLicense.value = false; }, 1500);
+  });
+}
+
+// Blog
+async function markPostRead(postId) {
+  try {
+    await ntopng_utility.http_request(
+      `${pfx.value}/lua/rest/v2/set/ntopng/blog_post_read.lua`, {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: new URLSearchParams({
+          post_id: postId,
+          csrf: window.__BLOG_NOTIFICATION_CSRF__ || ctx.value.csrf || "",
+        }),
+      }
+    );
+  } catch (_) {}
+}
+
+onMounted(async () => {
+  applyLayout();
+  document.addEventListener("click", handleOutsideClick);
+  await loadMenu();
+  // Wait for v-if DOM (sparkline SVGs) to appear after menu data loads
+  await nextTick();
+  checkNavOverflow();
+  if (railNav.value) {
+    railNavObserver = new ResizeObserver(checkNavOverflow);
+    railNavObserver.observe(railNav.value);
+  }
+  await pollIface();
+  pollTimer  = setInterval(pollIface, 7000);
+  updateClock();
+  clockTimer = setInterval(updateClock, 1000);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", handleOutsideClick);
+  clearTimeout(railLeaveTimer);
+  clearTimeout(panelLeaveTimer);
+  if (pollTimer)  clearInterval(pollTimer);
+  if (clockTimer) clearInterval(clockTimer);
+  railNavObserver?.disconnect();
+});
+
+watch(() => ctx.value.ifid, async (next, prev) => {
+  if (next && next !== prev) {
+    menu.value = {};
+    spark  = null;
+    seeded = false;
+    await loadMenu();
+    await nextTick();
+    await pollIface();
+  }
+});
+
+// Init spark as soon as the SVG ref appears in the DOM
+watch(svgCombined, (el) => { if (el) tryInitSpark(); });
+
+// Re-check nav overflow whenever sections change (menu data arrives or updates)
+watch(visibleSections, () => nextTick(checkNavOverflow));
+
+// Sync isDark from authoritative server preference once menu loads
+watch(() => menu.value.theme, (theme) => {
+  if (!theme) return;
+  const serverDark = theme === "dark";
+  if (serverDark !== isDark.value) {
+    isDark.value = serverDark;
+    applyTheme(serverDark);
+  }
+});
+</script>
+
+<style>
+:root {
+  --sb-rail-w:            5rem;
+  --sb-rail-exp:          14.5rem;
+  --sidebar-width:        5rem;
+  --sb-rail-bg:           #212529;
+  --sb-rail-border:       rgba(255,255,255,0.06);
+  --sb-btn-hover-bg:      #2c3034;
+  --sb-panel-bg:          #212529;
+  --sb-panel-border:      rgba(255,255,255,0.06);
+  --sb-link-color:        rgba(226,226,226,0.82);
+  --sb-link-hover-bg:     #2c3034;
+  --sb-link-active-color: #FF7500;
+  --sb-divider:           rgba(255,255,255,0.07);
+  --sb-muted:             rgba(226,226,226,0.45);
+  --sb-orange:            #FF7500;
+}
+
+:root {
+  --sb-navbar-h: 3rem;
+}
+
+html {
+  --sidebar-width: 0px;
+}
+
+/* Reset Bootstrap .px-md-4 and set proper inner page padding */
+body main#n-container,
+body div#n-container,
+main#n-container,
+div#n-container {
+  display: block !important;
+  width: auto !important;
+  max-width: none !important;
+  padding-left: 0.75rem !important;
+  padding-right: 0.75rem !important;
+  margin-left: var(--sb-rail-w) !important;
+  margin-right: 0 !important;
+  margin-top: 0 !important;
+  padding-top: calc(var(--sb-navbar-h) + 0.5rem) !important;
+  box-sizing: border-box !important;
+}
+
+/* Kill .body { padding-top: 4.5rem } */
+.body {
+  padding-top: 0 !important;
+}
+
+/* Navbar: fixed at top, right of the rail, full remaining width */
+#n-navbar {
+  position: fixed !important;
+  top: 0 !important;
+  left: var(--sb-rail-w) !important;
+  width: calc(100% - var(--sb-rail-w)) !important;
+  height: var(--sb-navbar-h) !important;
+  z-index: 1029 !important;
+  margin: 0 !important;
+  padding: 0 0.75rem !important;
+  box-sizing: border-box !important;
+  background: var(--sb-topbar-bg, #fff) !important;
+  border-bottom: 1px solid var(--sb-topbar-border, rgba(0,0,0,0.08)) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 0.5rem !important;
+}
+
+:root {
+  --sb-topbar-bg: #fff;
+  --sb-topbar-border: rgba(0,0,0,0.08);
+  --sb-topbar-fg: #333;
+  --sb-iface-border: rgba(0,0,0,0.2);
+  /* sidebar panel (always dark) */
+  --sb-panel-bg: #fff;
+  --sb-panel-border: rgba(0,0,0,0.12);
+  --sb-panel-fg: #333;
+  --sb-panel-item-hover: rgba(0,0,0,0.06);
+  --sb-panel-label-color: rgba(0,0,0,0.45);
+  /* interface dropdown — follows page theme */
+  --sb-dropdown-bg:     #fff;
+  --sb-dropdown-border: rgba(0,0,0,0.12);
+  --sb-dropdown-fg:     #212529;
+  --sb-dropdown-muted:  rgba(0,0,0,0.45);
+  --sb-dropdown-hover:  rgba(0,0,0,0.05);
+  --sb-dropdown-icon:   #6c757d;
+  --sb-tag-sys:         #6c757d;
+}
+[data-bs-theme="dark"],
+[data-theme="dark"],
+body.dark {
+  --sb-topbar-bg: #1a1d21;
+  --sb-topbar-border: rgba(255,255,255,0.07);
+  --sb-topbar-fg: rgba(226,226,226,0.85);
+  --sb-iface-border: rgba(255,255,255,0.18);
+  /* sidebar panel (always dark) */
+  --sb-panel-bg: #212529;
+  --sb-panel-border: rgba(255,255,255,0.10);
+  --sb-panel-fg: rgba(226,226,226,0.85);
+  --sb-panel-item-hover: rgba(255,255,255,0.07);
+  --sb-panel-label-color: rgba(255,255,255,0.35);
+  /* interface dropdown — follows page theme */
+  --sb-dropdown-bg:     #1e2226;
+  --sb-dropdown-border: rgba(255,255,255,0.10);
+  --sb-dropdown-fg:     rgba(226,226,226,0.88);
+  --sb-dropdown-muted:  rgba(255,255,255,0.35);
+  --sb-dropdown-hover:  rgba(255,255,255,0.07);
+  --sb-dropdown-icon:   rgba(180,200,220,0.65);
+  --sb-tag-sys:         #9ca3af;
+}
+
+/*
+  The expandable sb-panel always uses the same dark palette as the rail,
+  regardless of the page theme. Override panel-specific tokens inline.
+*/
+.sb-panel {
+  --sb-panel-bg:          #212529;
+  --sb-panel-border:      rgba(255,255,255,0.08);
+  --sb-panel-fg:          rgba(226,226,226,0.85);
+  --sb-panel-item-hover:  rgba(255,255,255,0.07);
+  --sb-panel-label-color: rgba(255,255,255,0.35);
+  --sb-link-color:        rgba(226,226,226,0.82);
+  --sb-link-hover-bg:     #2c3034;
+  --sb-link-active-color: #FF7500;
+  --sb-divider:           rgba(255,255,255,0.07);
+  --sb-muted:             rgba(226,226,226,0.45);
+}
+
+/* Dark mode: navbar bg follows theme */
+[data-bs-theme="dark"] #n-navbar,
+[data-theme="dark"] #n-navbar,
+body.dark #n-navbar,
+.dark-mode #n-navbar {
+  --sb-topbar-bg: #1a1d21;
+  --sb-topbar-border: rgba(255,255,255,0.07);
+  --sb-topbar-fg: rgba(226,226,226,0.85);
+  background: #1a1d21 !important;
+  color: rgba(226,226,226,0.85) !important;
+  border-bottom-color: rgba(255,255,255,0.07) !important;
+}
+
+/* Allow horizontal scroll rather than reflowing the grid */
+div.wrapper {
+  overflow-x: auto;
+}
+
+/* Sidebar: always fixed to viewport, never moved by layout changes */
+#n-sidebar {
+  position: fixed !important;
+  left: 0 !important;
+  top: 0 !important;
+  height: 100vh !important;
+  z-index: 1041 !important;
+}
+
+@media (max-width: 575.98px) {
+  #n-container .col-sm-1  { flex: 0 0 auto !important; width: 8.33333% !important; }
+  #n-container .col-sm-2  { flex: 0 0 auto !important; width: 16.66667% !important; }
+  #n-container .col-sm-3  { flex: 0 0 auto !important; width: 25% !important; }
+  #n-container .col-sm-4  { flex: 0 0 auto !important; width: 33.33333% !important; }
+  #n-container .col-sm-5  { flex: 0 0 auto !important; width: 41.66667% !important; }
+  #n-container .col-sm-6  { flex: 0 0 auto !important; width: 50% !important; }
+  #n-container .col-sm-8  { flex: 0 0 auto !important; width: 66.66667% !important; }
+  #n-container .col-sm-12 { flex: 0 0 auto !important; width: 100% !important; }
+}
+@media (max-width: 767.98px) {
+  #n-container .col-md-1  { flex: 0 0 auto !important; width: 8.33333% !important; }
+  #n-container .col-md-2  { flex: 0 0 auto !important; width: 16.66667% !important; }
+  #n-container .col-md-3  { flex: 0 0 auto !important; width: 25% !important; }
+  #n-container .col-md-4  { flex: 0 0 auto !important; width: 33.33333% !important; }
+  #n-container .col-md-5  { flex: 0 0 auto !important; width: 41.66667% !important; }
+  #n-container .col-md-6  { flex: 0 0 auto !important; width: 50% !important; }
+  #n-container .col-md-7  { flex: 0 0 auto !important; width: 58.33333% !important; }
+  #n-container .col-md-8  { flex: 0 0 auto !important; width: 66.66667% !important; }
+  #n-container .col-md-9  { flex: 0 0 auto !important; width: 75% !important; }
+  #n-container .col-md-10 { flex: 0 0 auto !important; width: 83.33333% !important; }
+  #n-container .col-md-11 { flex: 0 0 auto !important; width: 91.66667% !important; }
+  #n-container .col-md-12 { flex: 0 0 auto !important; width: 100% !important; }
+}
+@media (max-width: 991.98px) {
+  #n-container .col-lg-1  { flex: 0 0 auto !important; width: 8.33333% !important; }
+  #n-container .col-lg-2  { flex: 0 0 auto !important; width: 16.66667% !important; }
+  #n-container .col-lg-3  { flex: 0 0 auto !important; width: 25% !important; }
+  #n-container .col-lg-4  { flex: 0 0 auto !important; width: 33.33333% !important; }
+  #n-container .col-lg-6  { flex: 0 0 auto !important; width: 50% !important; }
+  #n-container .col-lg-8  { flex: 0 0 auto !important; width: 66.66667% !important; }
+  #n-container .col-lg-12 { flex: 0 0 auto !important; width: 100% !important; }
+}
+</style>
+
+<style scoped>
+.sb-rail {
+  position: fixed;
+  top: 0; left: 0;
+  height: 100vh;
+  width: var(--sb-rail-w);
+  background: var(--sb-rail-bg);
+  border-right: 1px solid var(--sb-rail-border);
+  display: flex;
+  flex-direction: column;
+  z-index: 1041;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+/* Logo */
+.sb-rail__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.75rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--sb-rail-border);
+  text-decoration: none;
+  overflow: hidden;
+  transition: background 0.13s;
+}
+.sb-rail__logo:hover { background: var(--sb-btn-hover-bg); }
+
+/* Scrollable nav area wrapper — holds scroll container + fade overlay */
+.sb-rail__nav-wrap {
+  flex: 1;
+  min-height: 0;
+  position: relative;   /* fade positions absolute inside this */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Scrollable nav area */
+.sb-rail__nav {
+  flex: 1;
+  min-height: 0;        /* flex child must have min-height:0 to shrink and scroll */
+  padding: 0.25rem 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+}
+.sb-rail__nav::-webkit-scrollbar { display: none; }
+
+/* Bottom-fade — absolute over the nav wrap, covers both icon + label */
+.sb-rail__nav-fade {
+  position: absolute;
+  bottom: 0;
+  left: 0; right: 0;
+  height: 2.5rem;
+  background: linear-gradient(to bottom, transparent, var(--sb-rail-bg, #212529));
+  pointer-events: none;
+}
+
+/* Scroll indicator arrows — appear/disappear based on scroll position */
+.sb-rail__scroll-hint {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  color: #fff;
+  font-size: 0.55rem;
+  pointer-events: none;
+}
+
+/* ── Button: fixed height, column layout — icon + label always in flow */
+.sb-rail__btn {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  width: 100%;
+  height: 3.25rem;        /* fixed — never changes */
+  padding: 0.3rem 0;
+  border: none;
+  background: transparent;
+  color: rgba(255,255,255,0.38);
+  cursor: pointer;
+  transition: background 0.15s, color 0.13s;
+  overflow: visible;
+  white-space: nowrap;
+}
+.sb-rail__btn:hover { background: var(--sb-btn-hover-bg); color: rgba(255,255,255,0.9); }
+
+/* Orange pill */
+.sb-rail__pill {
+  position: absolute;
+  left: 0; top: 20%; bottom: 20%;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
+  background: var(--sb-orange);
+  opacity: 0;
+  transform: scaleY(0.3);
+  transition: opacity 0.14s, transform 0.14s;
+  flex-shrink: 0;
+}
+.sb-rail__btn--current .sb-rail__pill,
+.sb-rail__btn--open    .sb-rail__pill { opacity: 1; transform: scaleY(1); }
+
+/* State colors */
+.sb-rail__btn--current  { color: var(--sb-orange); }
+.sb-rail__btn--open     { background: rgba(255,117,0,0.09); color: var(--sb-orange); }
+.sb-rail__btn--open:hover { background: rgba(255,117,0,0.14); }
+.sb-rail__btn--hovering { background: var(--sb-btn-hover-bg); color: rgba(255,255,255,0.85); }
+
+/* Icon: static, no transform */
+.sb-rail__icon {
+  font-size: 1rem;
+  line-height: 1;
+  flex-shrink: 0;
+  text-align: center;
+  transition: color 0.13s;
+}
+
+/* Active/open overrides keep the orange accent */
+.sb-rail__btn--current .sb-rail__icon,
+.sb-rail__btn--open    .sb-rail__icon { color: var(--sb-orange); }
+
+/* Avatar cell: static */
+.sb-rail__avatar-cell {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*
+  Label: always in flow (takes space), so button height never shifts.
+  Inherits color from .sb-rail__btn so hover/active states propagate automatically.
+*/
+.sb-rail__label {
+  font-size: 0.6rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  overflow: visible;
+  padding: 0 0.2rem;
+  text-align: center;
+  color: transparent;
+  transition: color 0.16s ease;
+  pointer-events: none;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.sb-rail--expanded .sb-rail__label { color: inherit; }
+
+/* Bottom strip */
+.sb-rail__bottom {
+  flex-shrink: 0;
+  border-top: 1px solid var(--sb-rail-border);
+  padding: 0.25rem 0;
+}
+
+.sb-topbar__left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+  position: relative;   /* anchor for ::after fade overlay */
+  overflow: visible;    /* parent does NOT scroll — only .network-load does */
+}
+
+/* Fade hint at right edge of badge scroll area */
+.sb-topbar__left::after {
+  content: '';
+  position: absolute;
+  right: 0; top: 0; height: 100%;
+  width: 2.5rem;
+  background: linear-gradient(to right, transparent, var(--sb-topbar-bg, #fff));
+  pointer-events: none;
+  z-index: 3;
+}
+
+.sb-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 4;  /* sits above the fade overlay */
+}
+
+.sb-topbar__icon-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sb-topbar-fg, #333);
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: background 0.12s, color 0.12s;
+}
+.sb-topbar__icon-btn:hover,
+.sb-topbar__icon-btn.open { background: rgba(0,0,0,0.07); }
+.sb-topbar__badge {
+  position: absolute;
+  top: 0.1rem; right: 0.1rem;
+  min-width: 0.95rem; height: 0.95rem;
+  border-radius: 999px;
+  background: #dc3545;
+  color: #fff;
+  font-size: 0.5rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.15rem;
+  pointer-events: none;
+}
+.sb-topbar__btn-wrap { position: relative; }
+
+.sb-iface-selector { position: relative; }
+.sb-iface-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  height: 2rem;
+  padding: 0 0.6rem;
+  border: 1px solid var(--sb-iface-border, rgba(0,0,0,0.2));
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sb-topbar-fg, #333);
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+  max-width: 14rem;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.sb-iface-btn:hover,
+.sb-iface-btn.open { background: rgba(0,0,0,0.07); }
+.sb-iface-btn__icon { font-size: 0.75rem; opacity: 0.7; flex-shrink: 0; }
+.sb-iface-btn__name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.sb-iface-btn__warn { color: #f6c23e; font-size: 0.7rem; flex-shrink: 0; }
+.sb-iface-btn__zmq {
+  flex-shrink: 0;
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  padding: 0.05rem 0.3rem;
+  border-radius: 3px;
+  background: rgba(255,163,0,0.15);
+  color: #ffa300;
+  border: 1px solid rgba(255,163,0,0.35);
+  line-height: 1.4;
+}
+.sb-iface-btn__caret {
+  font-size: 0.55rem; opacity: 0.5; flex-shrink: 0; transition: transform 0.15s;
+}
+.sb-iface-btn__caret.rotated { transform: rotate(180deg); }
+
+.sb-iface-menu {
+  position: fixed;
+  min-width: 16rem; max-width: 22rem; max-height: 70vh;
+  overflow-y: auto;
+  background: var(--sb-dropdown-bg);
+  border: 1px solid var(--sb-dropdown-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+  z-index: 1055;
+  padding: 0.4rem 0;
+  scrollbar-width: thin;
+  color: var(--sb-dropdown-fg);
+}
+.sb-iface-menu__section { padding: 0; }
+.sb-iface-menu__label {
+  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
+  text-transform: uppercase; color: var(--sb-dropdown-muted);
+  padding: 0.5rem 0.85rem 0.2rem;
+}
+.sb-iface-menu__divider { height: 1px; background: var(--sb-dropdown-border); margin: 0.25rem 0; }
+.sb-iface-item {
+  display: flex; align-items: center; gap: 0.6rem;
+  padding: 0.45rem 0.85rem;
+  text-decoration: none; color: var(--sb-dropdown-fg); font-size: 0.8rem;
+  transition: background 0.1s, color 0.1s; cursor: pointer;
+}
+.sb-iface-item:hover { background: var(--sb-dropdown-hover); text-decoration: none; }
+.sb-iface-item--active { color: #FF7500; background: rgba(255,117,0,0.08); }
+.sb-iface-item--active:hover { background: rgba(255,117,0,0.13); }
+.sb-iface-item--system { opacity: 0.9; }
+.sb-iface-menu .text-muted,
+.sb-iface-menu .text-secondary { color: var(--sb-dropdown-icon) !important; }
+
+.sb-iface-item__icon { width: 1rem; text-align: center; flex-shrink: 0; font-size: 0.75rem; color: var(--sb-dropdown-icon); }
+.sb-iface-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
+.sb-iface-item__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sb-iface-item__check { font-size: 0.65rem; color: #FF7500; flex-shrink: 0; }
+.sb-iface-item--child { padding-left: 0.5rem; }
+.sb-iface-tree-branch {
+  display: inline-flex; align-items: center;
+  width: 1rem; flex-shrink: 0; position: relative;
+}
+.sb-iface-tree-branch::before {
+  content: ""; position: absolute; left: 4px; top: 50%;
+  width: 8px; height: 1px; background: var(--sb-dropdown-border);
+}
+.sb-iface-tree-branch::after {
+  content: ""; position: absolute; left: 4px; bottom: 50%;
+  width: 1px; height: 14px; background: var(--sb-dropdown-border);
+}
+.sb-iface-item__tags { display: flex; gap: 0.2rem; flex-wrap: wrap; }
+.sb-iface-tag {
+  font-size: 0.5rem; font-weight: 600; letter-spacing: 0.05em;
+  text-transform: uppercase; padding: 0.05rem 0.3rem; border-radius: 3px;
+}
+.sb-iface-tag--sys  { background: rgba(108,117,125,0.15); color: var(--sb-tag-sys); }
+.sb-iface-tag--view { background: rgba(13,202,240,0.12);  color: #0a9dba; }
+.sb-iface-tag--rec  { background: rgba(220,53,69,0.15);   color: #dc3545; }
+.sb-iface-tag--pcap { background: rgba(108,117,125,0.15); color: var(--sb-tag-sys); }
+.sb-iface-tag--zmq  { background: rgba(255,163,0,0.12);   color: #e08000; }
+.sb-iface-tag--drop { background: rgba(220,53,69,0.15);   color: #dc3545; }
+
+.sb-blog-menu {
+  position: fixed; min-width: 17rem; max-width: 22rem;
+  background: #212529; border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.35);
+  z-index: 1055; overflow: hidden;
+}
+.sb-blog-item {
+  display: flex; align-items: flex-start; gap: 0.5rem;
+  padding: 0.5rem 0.85rem; font-size: 0.78rem;
+  color: rgba(226,226,226,0.8); text-decoration: none; transition: background 0.1s;
+}
+.sb-blog-item:hover { background: rgba(255,255,255,0.07); color: #fff; text-decoration: none; }
+
+.sb-about-block { padding: 0.85rem 1rem 0.7rem; user-select: text; }
+.sb-about-block__product {
+  font-size: 0.85rem; font-weight: 700; color: var(--sb-panel-fg, #fff); margin-bottom: 0.3rem;
+}
+.sb-about-block__version {
+  font-size: 0.72rem; color: var(--sb-panel-fg, #fff); margin-bottom: 0.3rem; word-break: break-all;
+}
+.sb-about-block__version a { color: var(--sb-panel-fg, #fff); }
+.sb-about-block__version a:hover { color: var(--sb-orange); }
+.sb-about-block__divider {
+  height: 1px; background: var(--sb-panel-border, rgba(255,255,255,0.07)); margin: 0.45rem 0;
+}
+.sb-about-block__line {
+  display: flex; align-items: center; gap: 0.4rem;
+  font-size: 0.7rem; color: var(--sb-panel-fg, #fff); margin-bottom: 0.2rem;
+}
+.sb-about-block__line i { font-size: 0.6rem; opacity: 0.75; flex-shrink: 0; width: 0.7rem; text-align: center; }
+.sb-about-block__line a { color: var(--sb-link-color); text-decoration: none; }
+.sb-about-block__line a:hover { color: var(--sb-orange); text-decoration: underline; }
+.sb-about-copy-btn {
+  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
+  width: 1.3rem; height: 1.3rem; border: none; border-radius: 3px;
+  background: rgba(255,255,255,0.08); color: rgba(226,226,226,0.6);
+  cursor: pointer; font-size: 0.6rem; flex-shrink: 0; transition: background 0.1s, color 0.1s;
+}
+.sb-about-copy-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
+.sb-about-block__copy {
+  font-size: 0.6rem; color: var(--sb-muted); margin-top: 0.45rem;
+  border-top: 1px solid var(--sb-panel-border, rgba(255,255,255,0.06)); padding-top: 0.35rem;
+}
+
+.sb-drop-anim-enter-active { transition: opacity 0.13s ease, transform 0.13s cubic-bezier(.4,0,.2,1); }
+.sb-drop-anim-leave-active { transition: opacity 0.09s ease, transform 0.09s ease; }
+.sb-drop-anim-enter-from   { opacity: 0; transform: translateY(-4px); }
+.sb-drop-anim-leave-to     { opacity: 0; transform: translateY(-2px); }
+
+.sb-panel {
+  --sb-panel-bg:          #212529;
+  --sb-panel-border:      rgba(255,255,255,0.08);
+  --sb-panel-fg:          rgba(226,226,226,0.85);
+  --sb-panel-item-hover:  rgba(255,255,255,0.07);
+  --sb-panel-label-color: rgba(255,255,255,0.35);
+  --sb-link-color:        rgba(226,226,226,0.82);
+  --sb-link-hover-bg:     #2c3034;
+  --sb-link-active-color: #FF7500;
+  --sb-divider:           rgba(255,255,255,0.07);
+  --sb-muted:             rgba(226,226,226,0.45);
+  position: fixed; left: var(--sb-rail-w); top: 0; height: 100vh;
+  width: max-content; min-width: 9rem;
+  max-width: min(16rem, calc(100vw - var(--sb-rail-w)));
+  background: var(--sb-panel-bg); border-right: 1px solid var(--sb-panel-border);
+  display: flex; flex-direction: column;
+  z-index: 1050; box-shadow: 2px 0 14px rgba(0,0,0,0.45); overflow: hidden;
+}
+.sb-panel__header {
+  flex-shrink: 0; height: 2.75rem; display: flex; align-items: center;
+  justify-content: space-between; padding: 0 0.625rem;
+  border-bottom: 1px solid var(--sb-divider); gap: 0.5rem;
+}
+.sb-panel__toggle {
+  width: 1.5rem; height: 1.5rem; flex-shrink: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: none; border-radius: 4px; background: transparent;
+  color: var(--sb-muted); cursor: pointer; transition: background 0.12s, color 0.12s;
+}
+.sb-panel__toggle:hover { background: var(--sb-link-hover-bg); color: #fff; }
+.sb-panel__nav {
+  flex: 1; overflow-y: auto; overflow-x: hidden;
+  padding: 0.35rem 0 1rem; scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.1) transparent;
+}
+.sb-panel__nav::-webkit-scrollbar { width: 3px; }
+.sb-panel__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+.sb-nav-link {
+  position: relative; display: flex; align-items: center; gap: 0.375rem;
+  padding: 0.44rem 1rem 0.44rem 1.25rem;
+  font-size: 0.78rem; font-weight: 400; color: var(--sb-link-color);
+  text-decoration: none; white-space: nowrap; width: 100%;
+  transition: background 0.11s, color 0.11s; list-style: none;
+}
+.sb-nav-link::before {
+  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
+  width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-orange);
+  opacity: 0; transform: scaleY(0.3); transition: opacity 0.13s, transform 0.13s;
+}
+.sb-nav-link:hover { background: var(--sb-link-hover-bg); color: #fff; text-decoration: none; }
+.sb-nav-link:hover::before { opacity: 0.35; transform: scaleY(1); }
+.sb-nav-link--active {
+  color: var(--sb-link-active-color); font-weight: 500; background: rgba(255,117,0,0.09);
+}
+.sb-nav-link--active::before { opacity: 1; transform: scaleY(1); }
+.sb-nav-link--active:hover { background: rgba(255,117,0,0.13); color: var(--sb-link-active-color); }
+.sb-panel-divider { height: 1px; background: var(--sb-divider); margin: 0.35rem 1rem 0; }
+.sb-panel-group-label {
+  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
+  text-transform: uppercase; color: var(--sb-muted);
+  padding: 0.4rem 1.25rem 0.15rem;
+}
+.sb-nav-link__icon {
+  width: 1rem; text-align: center; flex-shrink: 0;
+  font-size: 0.72rem; opacity: 0.75;
+}
+
+.sb-panel-anim-enter-active { transition: opacity 0.15s ease, transform 0.15s cubic-bezier(.4,0,.2,1); }
+.sb-panel-anim-leave-active { transition: opacity 0.1s ease, transform 0.1s ease; }
+.sb-panel-anim-enter-from   { opacity: 0; transform: translateX(-6px); }
+.sb-panel-anim-leave-to     { opacity: 0; transform: translateX(-4px); }
+
+.sb-user-popup {
+  --sb-panel-bg:      #212529;
+  --sb-panel-border:  rgba(255,255,255,0.1);
+  --sb-link-color:    rgba(226,226,226,0.85);
+  --sb-link-hover-bg: #2c3034;
+  --sb-divider:       rgba(255,255,255,0.07);
+  --sb-muted:         rgba(226,226,226,0.45);
+  position: fixed; left: 0; min-width: 15rem; width: 16rem;
+  background: var(--sb-panel-bg);
+  border: 1px solid var(--sb-panel-border); border-left: 3px solid var(--sb-orange);
+  border-radius: 0 0.5rem 0.5rem 0.5rem;
+  box-shadow: 4px -4px 24px rgba(0,0,0,0.55); z-index: 1060; overflow: hidden;
+}
+.sb-user-card {
+  display: flex; align-items: center; gap: 0.75rem; padding: 1rem;
+  background: linear-gradient(135deg, #2a2e35 0%, #1c1f25 100%);
+  border-bottom: 2px solid var(--sb-orange);
+}
+.sb-user-card__info { flex: 1; min-width: 0; }
+.sb-user-card__name {
+  font-size: 0.85rem; font-weight: 600; color: #fff;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.sb-user-card__role {
+  font-size: 0.67rem; color: var(--sb-muted); margin-top: 2px;
+  text-transform: uppercase; letter-spacing: 0.06em;
+}
+.sb-popup-divider { height: 1px; background: var(--sb-divider); }
+.sb-popup-item {
+  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem;
+  font-size: 0.8rem; color: var(--sb-link-color); text-decoration: none;
+  background: transparent; border: none; width: 100%; text-align: left;
+  cursor: pointer; transition: color 0.11s, background 0.11s;
+}
+.sb-popup-item:hover { color: #fff; background: var(--sb-link-hover-bg); text-decoration: none; }
+.sb-popup-item--text { cursor: default; }
+.sb-popup-item--text:hover { background: transparent; color: var(--sb-link-color); }
+.sb-popup-item--danger:hover { color: #ff6b6b; background: rgba(255,107,107,0.1); }
+.sb-popup-icon { width: 1rem; text-align: center; flex-shrink: 0; opacity: 0.6; }
+.sb-toggle-switch {
+  margin-left: auto; width: 2rem; height: 1rem; border-radius: 1rem;
+  background: rgba(255,255,255,0.15); position: relative; flex-shrink: 0;
+  transition: background 0.2s;
+}
+.sb-toggle-switch.on { background: #28a745; }
+.sb-toggle-thumb {
+  position: absolute; top: 0.125rem; left: 0.125rem;
+  width: 0.75rem; height: 0.75rem; border-radius: 50%;
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
+  transition: transform 0.2s cubic-bezier(.4,0,.2,1);
+}
+.sb-toggle-switch.on .sb-toggle-thumb { transform: translateX(1rem); }
+
+.sb-popup-anim-enter-active { transition: opacity 0.14s ease, transform 0.14s cubic-bezier(.4,0,.2,1); }
+.sb-popup-anim-leave-active { transition: opacity 0.09s ease, transform 0.09s ease; }
+.sb-popup-anim-enter-from   { opacity: 0; transform: translateY(6px); }
+.sb-popup-anim-leave-to     { opacity: 0; transform: translateY(4px); }
+
+.sb-avatar {
+  width: 1.75rem; height: 1.75rem; aspect-ratio: 1; border-radius: 50%;
+  background: var(--sb-orange); color: #1a1a1a;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.6rem; font-weight: 700; flex-shrink: 0; line-height: 1;
+}
+.sb-avatar--lg {
+  width: 2.5rem; height: 2.5rem; aspect-ratio: 1;
+  font-size: 0.82rem; border: 2px solid rgba(255,117,0,0.3);
+}
+.sb-ext-icon { font-size: 0.55rem; opacity: 0.4; margin-left: auto; }
+.iface-type-icon { width: 1rem; text-align: center; flex-shrink: 0; }
+
+.sb-sparklines { display: flex; align-items: center; }
+.sb-spark-combined { display: flex; align-items: center; gap: 0.4rem; }
+.sb-spark { display: block; width: 100px; height: 30px; }
+.sb-spark-labels { display: flex; flex-direction: column; gap: 0; }
+.sb-spark-val {
+  display: flex; align-items: center; gap: 0.25rem;
+  font-size: 0.72rem; white-space: nowrap; color: var(--sb-topbar-fg, #333);
+}
+.sb-spark-arrow { font-size: 0.65rem; }
+
+.sb-license-badge { text-decoration: none; }
+
+/* Network-load badge strip: fills remaining topbar, single scrollable row */
+:deep(.network-load) {
+  display: flex;
+  align-items: center;
+  overflow-x: auto;
+  scrollbar-width: none;   /* Firefox */
+  flex: 1;                 /* grow to fill remaining .sb-topbar__left width */
+  min-width: 0;
+}
+:deep(.network-load)::-webkit-scrollbar { display: none; }
+:deep(.navbar-main-badges) {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.25rem;
+  align-items: center;
+  white-space: nowrap;
+  padding-right: 2rem;   /* breathing room before the fade covers last badge */
+}
+</style>
diff --git a/http_src/vue/components/search-box.vue b/http_src/vue/components/search-box.vue
index 8b7a3caaff..8d6c36988a 100644
--- a/http_src/vue/components/search-box.vue
+++ b/http_src/vue/components/search-box.vue
@@ -3,30 +3,32 @@
 -->
 
 <template>
-    <!-- Search container (expandable input + button + spinner) -->
-    <div ref="searchContainer" :class="[
-        'ms-auto expandable-search align-items-center position-relative d-flex',
-        { expanded: expanded }
-    ]">
+    <!-- Search wrapper: position:relative so dropdown is anchored here -->
+    <div class="search-box-wrapper" @mouseenter="onSearchEnter" @mouseleave="onSearchLeave">
+      <!-- Search container (expandable input + button + spinner) -->
+      <div ref="searchContainer" :class="[
+          'expandable-search align-items-center position-relative d-flex',
+          { expanded: expanded }
+      ]">
 
-        <!-- Search input -->
-        <input name="search" type="text" ref="searchInput" class="form-control rounded-pill ps-4-5" autocomplete="off"
-            autocorrect="off" :placeholder="_i18n('search')">
+          <!-- Search input -->
+          <input name="search" type="text" ref="searchInput" class="form-control rounded-pill ps-4-5" autocomplete="off"
+              autocorrect="off" :placeholder="_i18n('search')">
 
-        <!-- Loading spinner shown during async search -->
-        <Spinner :show="loading" size="1rem" class="spinner-inside">
-        </Spinner>
+          <!-- Loading spinner shown during async search -->
+          <Spinner :show="loading" size="1rem" class="spinner-inside">
+          </Spinner>
 
-        <!-- Search icon button -->
-        <button class="btn btn-link search-btn" @click="expanded = true">
+          <!-- Search icon button -->
+          <button class="btn btn-link search-btn">
+              <i class="fa-solid fa-magnifying-glass"></i>
+          </button>
+      </div>
 
-            <i class="fa-solid fa-magnifying-glass"></i>
-        </button>
+      <!-- Autocomplete dropdown list -->
+      <ul ref="searchList" class="autocomplete-dropdown dropdown-menu dropdown-menu-right d-none" role="listbox">
+      </ul>
     </div>
-
-    <!-- Autocomplete dropdown list -->
-    <ul ref="searchList" class="autocomplete-dropdown dropdown-menu dropdown-menu-right d-none" role="listbox">
-    </ul>
 </template>
 
 <script setup>
@@ -46,6 +48,7 @@ const props = defineProps({
 
 
 const expanded = ref(false);
+let searchLeaveTimer = null;
 
 /* ======================================================
  * Reactive state & constants
@@ -336,6 +339,20 @@ const handleKeys = function (e) {
  * Lifecycle
  * ====================================================== */
 
+function onSearchEnter() {
+    clearTimeout(searchLeaveTimer);
+    expanded.value = true;
+}
+
+function onSearchLeave() {
+    searchLeaveTimer = setTimeout(() => {
+        if (!searchInput.value?.value) {
+            expanded.value = false;
+        }
+        searchList.value?.classList.add("d-none");
+    }, 250);
+}
+
 const outsideClickHandler = function (e) {
     const isOutside =
         !searchContainer.value?.contains(e.target) &&
@@ -365,6 +382,12 @@ onBeforeUnmount(() => {
 });
 </script>
 <style>
+.search-box-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
 .ps-4-5 {
     padding-left: 2rem !important;
 }
@@ -378,22 +401,29 @@ onBeforeUnmount(() => {
 
 .autocomplete-dropdown {
     position: absolute;
-    top: 100%;
+    top: calc(100% + 4px);
     right: 0;
     display: inline-block;
     width: auto;
-    min-width: 100%;
+    min-width: 240px;
+    max-width: min(400px, 40vw);
     white-space: nowrap;
-    z-index: 10;
+    z-index: 1060;
     max-height: 60vh;
     scrollbar-gutter: stable;
     overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.autocomplete-dropdown .dropdown-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .expandable-search {
-    width: 40px;
-    /* collapsed */
-    transition: width 0.3s ease;
+    width: 36px;
+    transition: width 0.25s ease;
     overflow: hidden;
 }
 
@@ -408,14 +438,14 @@ onBeforeUnmount(() => {
 
 .expandable-search .search-btn {
     position: absolute;
-    right: 8px;
+    right: 0;
     color: var(--icon-color);
     z-index: 2;
+    padding: 0.375rem 0.5rem;
 }
 
 .expandable-search.expanded {
-    width: 250px;
-    /* expanded */
+    width: 220px;
 }
 
 .expandable-search.expanded input {
diff --git a/http_src/vue/ntop_vue.js b/http_src/vue/ntop_vue.js
index 4556ce31e9..64f22ce910 100644
--- a/http_src/vue/ntop_vue.js
+++ b/http_src/vue/ntop_vue.js
@@ -195,22 +195,29 @@ import { default as MultiPieChart } from "./charts/multi-pie-chart.vue";
 import { default as PieChart } from "./charts/pie-chart.vue";
 import { default as LineChart } from "./charts/line-chart.vue";
 import { default as PeityChart } from "./charts/peity.vue";
-
 import { default as Chatbot } from "./chatbot.vue";
 import { default as PageChatbot } from "./page-chatbot.vue";
 import { default as FlowChatbotSidebar } from "./flow-chatbot-sidebar.vue";
 
+// app shell
+import { default as AppShell }   from "./app-shell.vue";
+import { default as AppFooter }  from "./app-footer.vue";
+
 let ntopVue = {
     Chatbot: Chatbot,
     PageChatbot: PageChatbot,
     FlowChatbotSidebar: FlowChatbotSidebar,
+
+    // app shell
+    AppShell:  AppShell,
+    AppFooter: AppFooter,
     
     // graphs
     MultiPieChart: MultiPieChart,
     PieChart: PieChart,
     PeityChart: PeityChart,
     LineChart: LineChart,
-    
+
     // pages
     PageAlertStats: PageAlertStats,
     PageFlowHistorical: PageFlowHistorical,
@@ -405,5 +412,6 @@ let ntopVue = {
     ModalSNMPInterfacesAutoRole: ModalSNMPInterfacesAutoRole,
 
     Vue: Vue,
+    createApp: (options) => Vue.createApp(options).use(window.vuetify),
 };
 window.ntopVue = ntopVue;
diff --git a/httpdocs/dist b/httpdocs/dist
index 97c7f17dc1..cbe5b89116 160000
--- a/httpdocs/dist
+++ b/httpdocs/dist
@@ -1 +1 @@
-Subproject commit 97c7f17dc15382297b0aacd85c7dbeaf42dad37f
+Subproject commit cbe5b89116c197109b1a797dc194e7509e32c0e4
diff --git a/httpdocs/misc/menu_definition.json b/httpdocs/misc/menu_definition.json
new file mode 100644
index 0000000000..7375aa28a4
--- /dev/null
+++ b/httpdocs/misc/menu_definition.json
@@ -0,0 +1,774 @@
+{
+  "sections": [
+    {
+      "key": "dashboard",
+      "i18n": "index_page.dashboard",
+      "icon": "fas fa-tachometer-alt",
+      "entries": [
+        {
+          "key": "traffic_dashboard",
+          "i18n": "dashboard.traffic_dashboard",
+          "icon": "fas fa-chart-area",
+          "url": "/lua/index.lua"
+        },
+        {
+          "key": "assets_dashboard",
+          "i18n": "assets",
+          "icon": "fas fa-boxes",
+          "url": "/lua/pro/assets_dashboard.lua"
+        },
+        {
+          "key": "gateways_users",
+          "i18n": "dashboard.gateways_users",
+          "icon": "fas fa-users",
+          "url": "/lua/pro/nedge/dashboard.lua"
+        },
+        {
+          "key": "traffic_report",
+          "i18n": "report.traffic_report",
+          "icon": "fas fa-file-alt",
+          "url": "/lua/pro/report.lua"
+        },
+        {
+          "key": "hr_chart",
+          "i18n": "hr_chart.title",
+          "icon": "fas fa-clock",
+          "url": "/lua/pro/hr_chart.lua"
+        }
+      ]
+    },
+    {
+      "key": "monitoring",
+      "i18n": "monitoring",
+      "icon": "fas fa-eye",
+      "entries": [
+        {
+          "key": "active_monitoring",
+          "i18n": "active_monitoring_stats.active_monitoring",
+          "icon": "fas fa-heartbeat",
+          "url": "/lua/active_monitoring.lua"
+        },
+        {
+          "key": "network_discovery",
+          "i18n": "discover.network_discovery",
+          "icon": "fas fa-search",
+          "url": "/lua/discover.lua"
+        },
+        {
+          "key": "infrastructure_dashboard",
+          "i18n": "infrastructure_dashboard.infrastructure_dashboard",
+          "icon": "fas fa-project-diagram",
+          "url": "/lua/pro/enterprise/infrastructure_config.lua"
+        },
+        {
+          "key": "snmp_monitoring",
+          "i18n": "prefs.snmp",
+          "icon": "fas fa-network-wired",
+          "url": "/lua/pro/enterprise/snmpdevices_stats.lua"
+        },
+        {
+          "key": "vulnerability_scan",
+          "i18n": "scan_hosts",
+          "icon": "fas fa-shield-alt",
+          "url": "/lua/vulnerability_scan.lua"
+        }
+      ]
+    },
+    {
+      "key": "alerts",
+      "i18n": "details.alerts",
+      "icon": "fas fa-exclamation-triangle",
+      "entries": [
+        {
+          "key": "alerts_list",
+          "i18n": "details.alerts_list",
+          "icon": "fas fa-list",
+          "url": "/lua/alert_stats.lua"
+        },
+        {
+          "key": "alerts_graph",
+          "i18n": "details.alerts_graph",
+          "icon": "fas fa-chart-bar",
+          "url": "/lua/pro/alerts_graph.lua"
+        },
+        {
+          "key": "alerts_geomap",
+          "i18n": "details.alerts_geomap",
+          "icon": "fas fa-map-marked-alt",
+          "url": "/lua/pro/alerts_geomap.lua"
+        },
+        {
+          "key": "alerts_analysis",
+          "i18n": "details.alerts_analysis",
+          "icon": "fas fa-microscope",
+          "url": "/lua/pro/enterprise/alerts_analysis.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.notifications"
+        },
+        {
+          "key": "notifications",
+          "i18n": "endpoint_notifications.notifications",
+          "icon": "fas fa-bell",
+          "url": "/lua/admin/endpoint_notifications_list.lua"
+        }
+      ]
+    },
+    {
+      "key": "flows",
+      "i18n": "flows",
+      "icon": "fas fa-stream",
+      "entries": [
+        {
+          "key": "active_flows",
+          "i18n": "active_flows",
+          "icon": "fas fa-water",
+          "url": "/lua/flows_stats.lua"
+        },
+        {
+          "key": "db_explorer",
+          "i18n": "historical_flows",
+          "icon": "fas fa-history",
+          "url": "/lua/pro/db_search.lua"
+        },
+        {
+          "key": "server_ports",
+          "i18n": "server_ports.server_ports",
+          "icon": "fas fa-plug",
+          "url": "/lua/server_ports.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.routing"
+        },
+        {
+          "key": "bgp_looking_glass",
+          "i18n": "bgp_looking_glass",
+          "icon": "fas fa-route",
+          "url": "/lua/bgp_looking_glass.lua"
+        }
+      ]
+    },
+    {
+      "key": "nanalyst",
+      "i18n": "nanalyst",
+      "icon": "fas fa-robot",
+      "entries": [
+        {
+          "key": "nanalyst",
+          "i18n": "nanalyst",
+          "icon": "fas fa-brain",
+          "url": "/lua/pro/nanalyst.lua"
+        },
+        {
+          "key": "ai_policy",
+          "i18n": "ai_policy",
+          "icon": "fas fa-file-contract",
+          "url": "/lua/pro/ai_policy.lua"
+        },
+        {
+          "key": "analyst_pipeline",
+          "i18n": "analyst_pipeline",
+          "icon": "fas fa-sitemap",
+          "url": "/lua/pro/analyst_pipeline.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.stats"
+        },
+        {
+          "key": "ai_usage_stats",
+          "i18n": "ai_usage_stats",
+          "icon": "fas fa-chart-pie",
+          "url": "/lua/pro/ai_stats.lua"
+        },
+        {
+          "key": "ai_audit",
+          "i18n": "ai_audit",
+          "icon": "fas fa-clipboard-list",
+          "url": "/lua/pro/ai_audit.lua"
+        }
+      ]
+    },
+    {
+      "key": "views",
+      "i18n": "views",
+      "icon": "fas fa-bars",
+      "entries": [
+        {
+          "key": "nedge_flows",
+          "i18n": "flows",
+          "icon": "fas fa-stream",
+          "url": "/lua/flows_stats.lua"
+        },
+        {
+          "key": "nedge_hosts",
+          "i18n": "hosts",
+          "icon": "fas fa-laptop",
+          "url": "/lua/hosts_stats.lua"
+        },
+        {
+          "key": "nedge_devices",
+          "i18n": "mac_stats.devices",
+          "icon": "fas fa-hdd",
+          "url": "/lua/macs_stats.lua?devices_mode=source_macs_only"
+        },
+        {
+          "key": "nedge_db_explorer",
+          "i18n": "historical_flows",
+          "icon": "fas fa-history",
+          "url": "/lua/pro/db_search.lua"
+        },
+        {
+          "key": "nedge_users",
+          "i18n": "users",
+          "icon": "fas fa-users",
+          "url": "/lua/pool_stats.lua"
+        },
+        {
+          "key": "nedge_vlans",
+          "i18n": "vlan_stats.vlan_list",
+          "icon": "fas fa-network-wired",
+          "url": "/lua/vlan_stats.lua"
+        },
+        {
+          "key": "nedge_geo_map",
+          "i18n": "geo_map",
+          "icon": "fas fa-map",
+          "url": "/lua/hosts_geomap.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.asn_mode"
+        },
+        {
+          "key": "hosts_asn_mode",
+          "i18n": "hosts",
+          "icon": "fas fa-laptop",
+          "url": "/lua/hosts_stats.lua"
+        },
+        {
+          "key": "active_flows_asn_mode",
+          "i18n": "active_flows",
+          "icon": "fas fa-water",
+          "url": "/lua/flows_stats.lua"
+        },
+        {
+          "key": "db_explorer_asn_mode",
+          "i18n": "historical_flows",
+          "icon": "fas fa-history",
+          "url": "/lua/pro/db_search.lua"
+        },
+        {
+          "key": "server_ports_asn_mode",
+          "i18n": "server_ports.server_ports",
+          "icon": "fas fa-plug",
+          "url": "/lua/server_ports.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.routing"
+        },
+        {
+          "key": "bgp_looking_glass_asn",
+          "i18n": "bgp_looking_glass",
+          "icon": "fas fa-route",
+          "url": "/lua/bgp_looking_glass.lua"
+        }
+      ]
+    },
+    {
+      "key": "hosts",
+      "i18n": "hosts",
+      "icon": "fas fa-laptop",
+      "entries": [
+        {
+          "key": "hosts",
+          "i18n": "hosts",
+          "icon": "fas fa-laptop",
+          "url": "/lua/hosts_stats.lua"
+        },
+        {
+          "key": "devices",
+          "i18n": "layer_2",
+          "icon": "fas fa-hdd",
+          "url": "/lua/macs_stats.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.inventory"
+        },
+        {
+          "key": "assets",
+          "i18n": "assets",
+          "icon": "fas fa-boxes",
+          "url": "/lua/pro/assets.lua"
+        }
+      ]
+    },
+    {
+      "key": "collection",
+      "i18n": "flow_devices.exporters",
+      "icon": "fas fa-sitemap",
+      "entries": [
+        {
+          "key": "sflow_exporters",
+          "i18n": "flows_page.sflow_devices",
+          "icon": "fas fa-server",
+          "url": "/lua/pro/enterprise/sflowdevices_stats.lua"
+        },
+        {
+          "key": "nprobe",
+          "i18n": "flow_devices.nprobe_instances",
+          "icon": "fas fa-satellite-dish",
+          "url": "/lua/pro/enterprise/nprobe.lua"
+        },
+        {
+          "key": "exporters_interfaces_stats",
+          "i18n": "flow_devices.exporters_interfaces_stats",
+          "icon": "fas fa-chart-line",
+          "url": "/lua/pro/exporters_interfaces_stats.lua"
+        },
+        {
+          "key": "observation_points",
+          "i18n": "flow_devices.observation_points",
+          "icon": "fas fa-eye",
+          "url": "/lua/pro/enterprise/observation_points.lua"
+        }
+      ]
+    },
+    {
+      "key": "maps",
+      "i18n": "maps",
+      "icon": "fas fa-map",
+      "entries": [
+        {
+          "key": "analysis_map",
+          "i18n": "analysis",
+          "icon": "fas fa-project-diagram",
+          "url": "/lua/pro/enterprise/network_maps.lua?map=service_map"
+        },
+        {
+          "key": "geo_map",
+          "i18n": "geo_map.geo_map",
+          "icon": "fas fa-globe",
+          "url": "/lua/hosts_geomap.lua"
+        },
+        {
+          "key": "hosts_map",
+          "i18n": "flows_page.hosts",
+          "icon": "fas fa-map-marked-alt",
+          "url": "/lua/pro/enterprise/hosts_map.lua"
+        }
+      ]
+    },
+    {
+      "key": "if_stats",
+      "i18n": "interface",
+      "icon": "fas fa-ethernet",
+      "entries": [
+        {
+          "key": "interface",
+          "i18n": "interface_details",
+          "icon": "fas fa-info-circle",
+          "url": "/lua/if_stats.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.segments"
+        },
+        {
+          "key": "networks",
+          "i18n": "networks",
+          "icon": "fas fa-network-wired",
+          "url": "/lua/network_stats.lua"
+        },
+        {
+          "key": "host_pools",
+          "i18n": "host_pools.host_pools",
+          "icon": "fas fa-layer-group",
+          "url": "/lua/pool_stats.lua"
+        },
+        {
+          "key": "autonomous_systems",
+          "i18n": "as_stats.autonomous_systems",
+          "icon": "fas fa-globe",
+          "url": "/lua/as_stats.lua"
+        },
+        {
+          "key": "countries",
+          "i18n": "countries",
+          "icon": "fas fa-flag",
+          "url": "/lua/country_stats.lua"
+        },
+        {
+          "key": "vlans",
+          "i18n": "vlan_stats.vlans",
+          "icon": "fas fa-tags",
+          "url": "/lua/vlan_stats.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.containers"
+        },
+        {
+          "key": "pods",
+          "i18n": "pods",
+          "icon": "fab fa-docker",
+          "url": "/lua/pods_stats.lua"
+        },
+        {
+          "key": "containers",
+          "i18n": "containers",
+          "icon": "fas fa-cube",
+          "url": "/lua/containers_stats.lua"
+        }
+      ]
+    },
+    {
+      "key": "health",
+      "i18n": "health",
+      "icon": "fas fa-heartbeat",
+      "entries": [
+        {
+          "key": "system_status",
+          "i18n": "system_status",
+          "icon": "fas fa-server",
+          "url": "/lua/system_stats.lua"
+        },
+        {
+          "key": "interfaces_status",
+          "i18n": "system_interfaces_status",
+          "icon": "fas fa-ethernet",
+          "url": "/lua/system_interfaces_stats.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.storage"
+        },
+        {
+          "key": "influxdb_status",
+          "i18n": "InfluxDB",
+          "icon": "fas fa-database",
+          "url": "/lua/monitor/influxdb_monitor.lua"
+        },
+        {
+          "key": "redis_status",
+          "i18n": "Redis",
+          "icon": "fas fa-memory",
+          "url": "/lua/monitor/redis_monitor.lua"
+        },
+        {
+          "key": "clickhouse_status",
+          "i18n": "ClickHouse",
+          "icon": "fas fa-table",
+          "url": "/lua/pro/enterprise/monitor/clickhouse_monitor.lua"
+        }
+      ]
+    },
+    {
+      "key": "pollers",
+      "i18n": "pollers",
+      "icon": "fas fa-satellite-dish",
+      "entries": [
+        {
+          "key": "assets_snmp",
+          "i18n": "assets_snmp",
+          "icon": "fas fa-boxes",
+          "url": "/lua/pro/assets.lua"
+        },
+        {
+          "key": "snmp",
+          "i18n": "prefs.snmp",
+          "icon": "fas fa-network-wired",
+          "url": "/lua/pro/enterprise/snmpdevices_stats.lua"
+        },
+        {
+          "key": "active_monitoring_system",
+          "i18n": "active_monitoring_stats.active_monitoring",
+          "icon": "fas fa-heartbeat",
+          "url": "/lua/active_monitoring.lua"
+        },
+        {
+          "key": "infrastructure_dashboard_system",
+          "i18n": "infrastructure_dashboard.infrastructure_dashboard",
+          "icon": "fas fa-project-diagram",
+          "url": "/lua/pro/enterprise/infrastructure_config.lua"
+        }
+      ]
+    },
+    {
+      "key": "notifications",
+      "i18n": "endpoint_notifications.notifications",
+      "icon": "fas fa-bell",
+      "url": "/lua/admin/endpoint_notifications_list.lua"
+    },
+    {
+      "key": "policies",
+      "i18n": "policies",
+      "icon": "fas fa-shield-alt",
+      "entries": [
+        {
+          "key": "divider",
+          "i18n": "menu_group.access"
+        },
+        {
+          "key": "access_control_list",
+          "i18n": "access_control_list",
+          "icon": "fas fa-list-ul",
+          "url": "/lua/pro/admin/access_control_list.lua"
+        },
+        {
+          "key": "device_protocols",
+          "i18n": "device_protocols.device_protocols",
+          "icon": "fas fa-sliders-h",
+          "url": "/lua/admin/edit_device_protocols.lua"
+        },
+        {
+          "key": "device_exclusions",
+          "i18n": "edit_check.device_exclusion",
+          "icon": "fas fa-ban",
+          "url": "/lua/pro/admin/edit_device_exclusions.lua"
+        },
+        {
+          "key": "network_config",
+          "i18n": "checks.network_configuration",
+          "icon": "fas fa-network-wired",
+          "url": "/lua/admin/network_configuration.lua"
+        },
+        {
+          "key": "traffic_rules",
+          "i18n": "if_stats_config.traffic_rules",
+          "icon": "fas fa-traffic-light",
+          "url": "/lua/pro/traffic_rules.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.checks"
+        },
+        {
+          "key": "scripts_config",
+          "i18n": "about.checks",
+          "icon": "fas fa-check-double",
+          "url_dynamic": "scripts_config_url"
+        },
+        {
+          "key": "alert_exclusions",
+          "i18n": "edit_check.exclusion_list",
+          "icon": "fas fa-filter",
+          "url": "/lua/pro/admin/edit_alert_exclusions.lua?subdir=host"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.profiles"
+        },
+        {
+          "key": "profiles",
+          "i18n": "traffic_profiles.traffic_profiles",
+          "icon": "fas fa-tags",
+          "url": "/lua/pro/admin/edit_profiles.lua"
+        }
+      ]
+    },
+    {
+      "key": "admin",
+      "i18n": "settings",
+      "icon": "fas fa-cog",
+      "entries": [
+        {
+          "key": "divider",
+          "i18n": "menu_group.users"
+        },
+        {
+          "key": "nedge_users",
+          "i18n": "nedge.users",
+          "icon": "fas fa-users",
+          "url": "/lua/pro/nedge/admin/nf_list_users.lua"
+        },
+        {
+          "key": "manage_users",
+          "i18n": "manage_users.manage_users",
+          "icon": "fas fa-user-cog",
+          "url": "/lua/admin/users.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.configuration"
+        },
+        {
+          "key": "preferences",
+          "i18n": "prefs.preferences",
+          "icon": "fas fa-sliders-h",
+          "url": "/lua/admin/prefs.lua"
+        },
+        {
+          "key": "tags",
+          "i18n": "tags_page.tags",
+          "icon": "fas fa-tag",
+          "url": "/lua/tags.lua"
+        },
+        {
+          "key": "category_lists",
+          "i18n": "category_lists.category_lists",
+          "icon": "fas fa-list",
+          "url": "/lua/admin/blacklists.lua?enabled_status=enabled"
+        },
+        {
+          "key": "manage_configurations",
+          "i18n": "manage_configurations.manage_configurations",
+          "icon": "fas fa-file-export",
+          "url": "/lua/admin/manage_configurations.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.customization"
+        },
+        {
+          "key": "categories",
+          "i18n": "custom_categories.apps_and_categories",
+          "icon": "fas fa-th-large",
+          "url": "/lua/admin/edit_categories.lua"
+        }
+      ]
+    },
+    {
+      "key": "dev",
+      "i18n": "developer",
+      "icon": "fas fa-code",
+      "entries": [
+        {
+          "key": "rest_api",
+          "i18n": "swagger_api",
+          "icon": "fas fa-plug",
+          "url": "/lua/swagger.lua"
+        },
+        {
+          "key": "analyze_pcap",
+          "i18n": "upload_pcap",
+          "icon": "fas fa-file-upload",
+          "url": "/lua/upload_pcap.lua"
+        },
+        {
+          "key": "manage_data",
+          "i18n": "manage_data.manage_data",
+          "icon": "fas fa-database",
+          "url": "/lua/manage_data.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.internals"
+        },
+        {
+          "key": "checks_dev",
+          "i18n": "about.checks",
+          "icon": "fas fa-check-square",
+          "url": "/lua/checks_overview.lua"
+        },
+        {
+          "key": "alert_definitions",
+          "i18n": "about.alert_defines",
+          "icon": "fas fa-exclamation-circle",
+          "url": "/lua/defs_overview.lua"
+        },
+        {
+          "key": "ts_definitions",
+          "i18n": "about.ts_definitions",
+          "icon": "fas fa-chart-line",
+          "url": "/lua/ts_overview.lua"
+        },
+        {
+          "key": "directories",
+          "i18n": "about.directories",
+          "icon": "fas fa-folder-open",
+          "url": "/lua/directories.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.documentation"
+        },
+        {
+          "key": "api",
+          "i18n": "about.api_reference",
+          "icon": "fas fa-book-open",
+          "url": "https://www.ntop.org/guides/ntopng/api/",
+          "is_external": true
+        }
+      ]
+    },
+    {
+      "key": "system_stats",
+      "i18n": "system",
+      "icon": "fas fa-server",
+      "entries": []
+    },
+    {
+      "key": "about",
+      "i18n": "help",
+      "icon": "fas fa-info-circle",
+      "entries": [
+        {
+          "key": "about",
+          "i18n": "about.about",
+          "icon": "fas fa-info",
+          "url": "/lua/about.lua"
+        },
+        {
+          "key": "license",
+          "i18n": "license_page.license",
+          "icon": "fas fa-id-card",
+          "url": "/lua/license.lua"
+        },
+        {
+          "key": "limits",
+          "i18n": "limits_page.limits",
+          "icon": "fas fa-tachometer-alt",
+          "url": "/lua/limits.lua"
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.community"
+        },
+        {
+          "key": "blog",
+          "i18n": "about.ntop_blog",
+          "icon": "fas fa-rss",
+          "url": "http://blog.ntop.org/",
+          "is_external": true
+        },
+        {
+          "key": "telegram",
+          "i18n": "about.telegram",
+          "icon": "fab fa-telegram-plane",
+          "url": "https://t.me/ntop_community",
+          "is_external": true
+        },
+        {
+          "key": "manual",
+          "i18n": "about.user_manual",
+          "icon": "fas fa-book",
+          "url": "https://www.ntop.org/guides/ntopng/",
+          "is_external": true
+        },
+        {
+          "key": "divider",
+          "i18n": "menu_group.support"
+        },
+        {
+          "key": "report_issue",
+          "i18n": "about.report_issue",
+          "icon": "fas fa-bug",
+          "url": "https://github.com/ntop/ntopng/issues",
+          "is_external": true
+        },
+        {
+          "key": "suggest_feature",
+          "i18n": "about.suggest_feature",
+          "icon": "fas fa-lightbulb",
+          "url": "https://www.ntop.org/support/need-help-2/contact-us/",
+          "is_external": true
+        }
+      ]
+    }
+  ]
+}
diff --git a/package.json b/package.json
index b7cf189fb9..f1fa96fe58 100644
--- a/package.json
+++ b/package.json
@@ -46,16 +46,17 @@
     "stylelint": "^14.5.0"
   },
   "dependencies": {
+    "@cyclonedx/cyclonedx-npm": "^5.0.0",
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@popperjs/core": "^2.11.2",
     "@rollup/plugin-inject": "^5.0.5",
     "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/compiler-sfc": "^3.5.35",
     "@vueform/slider": "^2.1.10",
     "@yaireo/tagify": "^4.35.3",
     "apexcharts": "^3.33.1",
     "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.13.1",
-    "d3": "^3.5.17",
     "d3-array": "^3.1.1",
     "d3-chord": "^3.0.1",
     "d3-collection": "^1.0.7",
@@ -88,7 +89,7 @@
     "uuid": "^11.1.0",
     "vis-network": "^9.1.6",
     "vite": "^6.3.5",
-    "vue": "3.2.37",
+    "vue": "^3.5.35",
     "world-atlas": "^2.0.2"
   }
 }
diff --git a/scripts/locales/en.lua b/scripts/locales/en.lua
index cfa0182d9d..c8f6fb39e4 100644
--- a/scripts/locales/en.lua
+++ b/scripts/locales/en.lua
@@ -1109,6 +1109,9 @@ local lang = {
     ["component_versions"] = "Component Versions",
     ["startup_line"] = "Startup Line",
     ["suggest_feature"] = "Suggest a Feature",
+    ["user_manual"] = "User Manual",
+    ["ts_definitions"] = "Time Series",
+    ["api_reference"] = "API Reference",
     ["system"] = "System",
     ["system_id"] = "System Id",
     ["system_info"] = "System Information",
@@ -9982,6 +9985,26 @@ local lang = {
       ["abort_edit"] = "Abort edit of a Widget?",
     },
   },
+  ["menu_group"] = {
+    ["notifications"]  = "Notifications",
+    ["routing"]        = "Routing",
+    ["stats"]          = "Stats",
+    ["asn_mode"]       = "ASN Mode",
+    ["inventory"]      = "Inventory",
+    ["segments"]       = "Segments",
+    ["containers"]     = "Containers",
+    ["storage"]        = "Storage",
+    ["access"]         = "Access",
+    ["checks"]         = "Checks",
+    ["profiles"]       = "Profiles",
+    ["users"]          = "Users",
+    ["configuration"]  = "Configuration",
+    ["customization"]  = "Customization",
+    ["internals"]      = "Internals",
+    ["documentation"]  = "Documentation",
+    ["community"]      = "Community",
+    ["support"]        = "Support",
+  },
 }
 
 return lang
diff --git a/scripts/lua/flow_details.lua b/scripts/lua/flow_details.lua
index 6b456bbe8a..a5dd7ff9a5 100644
--- a/scripts/lua/flow_details.lua
+++ b/scripts/lua/flow_details.lua
@@ -2438,7 +2438,7 @@ if isEmptyString(page) or page == "overview" then
                }
             },
          };
-         const vue = ntopVue.Vue.createApp(vue_options);
+         const vue = ntopVue.createApp(vue_options);
          const vue_app = vue.mount("#vue-modals");
          return vue_app;
    }
diff --git a/scripts/lua/inc/footer.lua b/scripts/lua/inc/footer.lua
index 4c4363db09..579b82d6a4 100644
--- a/scripts/lua/inc/footer.lua
+++ b/scripts/lua/inc/footer.lua
@@ -1,874 +1,60 @@
 --
 -- (C) 2013-26 - ntop.org
 --
-require "os"
+-- Thin shell: mounts AppFooter Vue component, then closes the page.
+-- All footer logic (updates, ext_link_dialog, nEdge modals, 403 handler)
+-- lives in http_src/vue/app-footer.vue.
+--
+
+local dirs = ntop.getDirs()
+package.path = dirs.installdir .. "/scripts/lua/modules/?.lua;" .. package.path
+package.path = dirs.installdir .. "/scripts/lua/modules/toasts/?.lua;" .. package.path
+
 require "lua_utils"
 
-local ts_utils = require("ts_utils_core")
+local template_utils = require "template_utils"
+local json           = require "dkjson"
+local ts_utils       = require "ts_utils_core"
 
-local template = require "template_utils"
-local stats_utils = require("stats_utils")
-local page_utils = require "page_utils"
-local have_nedge = ntop.isnEdge()
-local info = ntop.getInfo(true)
-local is_admin = isAdministrator()
-local maxSpeed
-
-local ifid = interface.getId()
-local _ifstats = interface.getStats()
+local is_admin    = isAdministrator()
+local have_nedge  = ntop.isnEdge()
+local info        = ntop.getInfo(true)
 local http_prefix = ntop.getHttpPrefix()
 local random_csrf = ntop.getRandomCSRFValue()
-local is_pcap_dump_iface = interface.isPcapDumpInterface()
-
-if not is_pcap_dump_iface and not have_nedge then
-    -- if the speed in not custom we try to read the speed from the interface
-    -- and, as a final resort, we use 1Gbps
-    if tonumber(_ifstats.speed) ~= nil then
-        maxSpeed = tonumber(_ifstats.speed) * 1e6
-    else
-        maxSpeed = 1000000000 -- 1 Gbit
-    end
-end -- closes is_pcap_dump_iface == false
-
-if not info.oem then
-
-    -- print ([[
-    -- <hr>
-    -- <footer id="n-footer">
-    -- 	<div class="container-fluid">
-    -- 		<div class="row mt-2">
-    -- 			<div class="col-12 col-md-4 pl-md-0 text-center text-md-start">
-    -- 				<small>
-    -- 					<a href="https://www.ntop.org/products/traffic-analysis/ntop/" target="_blank">
-    -- 				  		]] .. getNtopngRelease(info) ..[[
-    -- 					</a>
-    -- 				</small>
-    -- 			</div>
-    -- 			<div class="col-12 col-md-4 text-center">
-    -- 				<small>]].. ntop.getInfo()["copyright"] ..[[</small>
-    -- ]])
-    -- print [[
-    -- 			</div>
-    -- 			<div class="col-12 col-md-4 text-center text-md-end pr-md-0">
-    -- 				<small>
-    -- 						<i class="fas fa-clock" title="]] print(i18n("about.server_time")) print[["></i> <div class="d-inline-block" id='network-clock'></div> ]] if(info.tzname ~= nil) then print(info.tzname) end print(" | ") print(i18n("about.uptime")) print[[: <div class="d-inline-block" id='network-uptime'></div>
-    -- 				</small>
-    -- 			</div>
-    --      	</div>
-    --    </div>
-    -- </footer>
-    -- ]]
-
-    -- else -- info.oem
-    --   print[[<div class="col-12 text-end">
-    --     <small>
-    -- 		<i class="fas fa-clock"></i> <div class="d-inline-block" id='network-clock' title="]] print(i18n("about.server_time")) print[["></div> | ]] print(i18n("about.uptime")) print[[: <div class="d-inline-block" id='network-uptime'></div>
-    --     </small>
-    -- </div>]]
-end
-
-local traffic_peity_width = "96"
 
+-- Show InfluxDB error immediately if one is cached
 if ts_utils.getDriverName() == "influxdb" then
-
-    local msg = ntop.getCache("ntopng.cache.influxdb.last_error")
-    if not isEmptyString(msg) then
-        print([[
-		<script type="text/javascript">
-			$("#influxdb-error-msg-text").html("]] .. (msg:gsub('"', '\\"')) .. [[");
-			$("#influxdb-error-msg").show();
-		</script>
-	]])
-    end
+   local msg = ntop.getCache("ntopng.cache.influxdb.last_error")
+   if not isEmptyString(msg) then
+      msg = msg:gsub('"', '\\"')
+      print([[<script type="text/javascript">
+  document.getElementById("influxdb-error-msg-text").innerHTML = "]] .. msg .. [[";
+  document.getElementById("influxdb-error-msg").style.display = "";
+</script>]])
+   end
 end
 
--- Dismiss Notification Code and Toggle Dark theme
-print([[
-	<script type='text/javascript'>
-		$(document).ready(function() {
-
-			$(`.notification button.dismiss`).click(function() {
-				const $toast = $(this).parents('.notification');
-				const id = $toast.data("toastId");
-				ToastUtils.dismissToast(id, "]] .. random_csrf ..
-          [[", (data) =>{
-					if (data.success) $toast.toast('hide');
-				});
-			});
-
-			$(`.toggle-dark-theme`).click(function() {
-				const request = $.post(`]] .. http_prefix ..
-          [[/lua/update_prefs.lua`, {
-					action: 'toggle_theme', toggle_dark_theme: ]] ..
-          tostring(not page_utils.is_dark_mode_enabled()) .. [[,
-					csrf: "]] .. random_csrf .. [["
-				});
-				request.done(function(res) {
-					if (res.success) location.reload();
-				});
-			});
-		});
-	</script>
-]])
-
--- Restart product code
-if (is_admin and ntop.isPackage() and not ntop.isWindows()) then
-
-    print(template.gen("modal_confirm_dialog.html", {
-        dialog = {
-            id = 'restart-modal',
-            action = 'restartService()',
-            title = i18n("restart.restart_product", {product = info.product}),
-            message = i18n("restart.confirm", {product = info.product}),
-            custom_alert_class = 'alert alert-danger',
-            confirm = i18n('restart.restart'),
-            confirm_button = 'btn-danger'
-        }
-    }))
-
-    print [[
-		<script type="text/javascript">
-
-		 const restartCSRF = ']]
-    print(random_csrf)
-    print [[';
-		 const restartService = function() {
-			 $.ajax({
-			   type: 'POST',
-			   url: ']]
-    print(http_prefix)
-    print [[/lua/admin/service_restart.lua',
-			   data: {
-				 csrf: restartCSRF
-			   },
-			   success: function(rsp) {
-				 alert("]]
-    print(i18n("restart.restarting", {product = info.product}))
-    print [[");
-				 $('#restart-modal').modal('hide');
-			   }
-			 });
-		 }
-
-		 $('.restart-service').click(() => {
-			$('#restart-modal').modal('show');
-		 });
-
-	   </script>
-	]]
-end
-
--- render switchable system view
-print([[
-	<script type="text/javascript">
-
-		$(document).ready(function() {
-
-			// ignore scientific numbers input
-			$(`.ignore-scientific`).keypress(function(e) {
-				if (e.which != 8 && e.which != 0 && e.which < 48 || e.which > 57) {
-					e.preventDefault();
-				}
-			})
-
-			ToastUtils.initToasts();
-		});
-
-		const toggleSystemInterface = ($form = null) => {
-			if($form != null) {
-				$form.submit(); 				
-			}
-			else {
-				console.error("An error has occurred when switching interface!");
-			}
-		}
-	]])
-print([[
-	</script>
-]])
-
-print [[
-<script type="text/javascript">
-]]
-
-print [[
-var is_historical = false;
-let updatingChart_uploads = [
-	$("#n-navbar .network-load-chart-upload").show().peity("line", { width: ]]
-print(traffic_peity_width)
-print [[, max: null }),
-	$(".mobile-menu-stats .network-load-chart-upload").show().peity("line", { width: ]]
-print(traffic_peity_width)
-print [[, max: null }),
-];
-let updatingChart_downloads = [
-	$("#n-navbar .network-load-chart-download").show().peity("line", { width: ]]
-print(traffic_peity_width)
-print [[, max: null, fill: "lightgreen"}),
-	$(".mobile-menu-stats .network-load-chart-download").show().peity("line", { width: ]]
-print(traffic_peity_width)
-print [[, max: null, fill: "lightgreen"})
-];
-let updatingChart_totals = [
-	$("#n-navbar .network-load-chart-total").show().peity("line", { width: ]]
-print(traffic_peity_width)
-print [[, max: null}),
-	$(".mobile-menu-stats .network-load-chart-total").show().peity("line", { width: ]]
-print(traffic_peity_width)
-print [[, max: null})
-];
-
-$(`.copy-http-url`).on('click', function() {
-  let sampleTextarea = document.createElement("textarea");
-  document.body.appendChild(sampleTextarea);
-  sampleTextarea.value = $(this).attr('data-to-copy');
-  sampleTextarea.select(); //select textarea content
-  document.execCommand("copy");
-  document.body.removeChild(sampleTextarea);
+-- AppFooter boot context
+local footer_context = json.encode({
+   csrf                = random_csrf,
+   http_prefix         = http_prefix,
+   ifid                = tostring(interface.getId()),
+   is_admin            = is_admin,
+   is_nedge            = have_nedge,
+   has_updates_support = (hasSoftwareUpdatesSupport() == true),
+   is_package          = (ntop.isPackage() == true),
+   is_windows          = ntop.isWindows(),
+   product             = info.product or "",
+   maintenance_expired = (info["pro.license_days_left"] ~= nil and
+                          tonumber(info["pro.license_days_left"]) <= 0),
 })
 
-let isFooterRefreshInProcess = false;
-const footerRefresh = function() {
-	if (isFooterRefreshInProcess == true) { return; }
-	isFooterRefreshInProcess = true;
-	$.ajax({
-		type: 'GET',
-		url: ']]
-print(http_prefix)
-print [[/lua/rest/v2/get/interface/data.lua',
-		data: { ifid: ]]
-print(tostring(ifid))
-print [[, type: 'summary' },
-		success: function(content) {
-			isFooterRefreshInProcess = false;
-			if(content["rc_str"] != "OK") {
-				return;
-			}
-
-			const rsp = content["rsp"];
-
-      try {
-ntopng_events_manager.emit_custom_event(ntopng_custom_events.GET_INTERFACE_DATA, rsp);
-        let bps_upload = rsp.throughput.upload * 8;
-        let bps_download = rsp.throughput.download * 8;
-
-        /* Upload chart */
-        let values = updatingChart_uploads[0].text().split(",")
-        values.shift();
-        values.push(bps_upload.toString());
-        updatingChart_uploads[0].text(values.join(",")).change();
-        updatingChart_uploads[1].text(values.join(",")).change();
-        $('.chart-upload-text:visible').html(NtopUtils.bitsToSize(bps_upload, 1000));
-        
-        /* Download chart */
-        values = updatingChart_downloads[0].text().split(",")
-        values.shift();
-        values.push((-bps_download).toString());
-        updatingChart_downloads[0].text(values.join(",")).change();
-        updatingChart_downloads[1].text(values.join(",")).change();
-        $('.chart-download-text:visible').html(NtopUtils.bitsToSize(bps_download, 1000));
-
-        /* Disaggregate interface chart */
-        values = updatingChart_totals[0].text().split(",")
-        values.shift();
-        values.push(rsp.throughput_bps * 8);
-        updatingChart_totals[0].text(values.join(",")).change();
-        updatingChart_totals[1].text(values.join(",")).change();
-  ]]
-
-if (is_pcap_dump_iface == false) and (not have_nedge) then
-    print [[
-        const v = Math.round(Math.min((rsp.throughput_bps * 8 *100)/]]
-    print(string.format("%u", maxSpeed))
-    print [[, 100));
-        $('.network-load').html(v+"%");
-]]
-end
-
--- systemInterfaceEnabled is defined inside menu.lua
-print [[
-				//$('#network-clock').html(`${rsp.localtime}`);
-				//$('#network-uptime').html(`${rsp.uptime}`);
-
-				let msg = `<div class='m-2'><div class='d-flex flex-wrap navbar-main-badges'>`;
-				
-				if(rsp.out_of_maintenance) {
-					msg += "<a href='https://www.ntop.org/support/faq/how-can-i-renew-maintenance-for-commercial-products/' target='_blank'><span class='badge bg-warning'>]]
-print(i18n("about.maintenance_expired", {product = info["product"]}))
-print [[ <i class=\"fas fa-external-link-alt\"></i></span></a> ";
-				}
-
-				if(rsp.degraded_performance) {
-				   	msg += "<a href=']]
-print(http_prefix)
-print [[/lua/system_interfaces_stats.lua?page=internals&tab=periodic_activities&periodic_script_issue=any_issue'>"
-					msg += "<span class='badge bg-warning'><i class='fas fa-exclamation-triangle data-bs-toggle='tooltip' data-bs-placement='bottom' title=']]
-print(i18n("internals.degraded_performance"))
-print [['></i></span></a>";
-				}
-
-				if ((rsp.engaged_alerts > 0 || rsp.alerted_flows > 0) && ]]
-print(ternary(hasAllowedNetworksSet(), "false", "true"))
-print [[) {
-
-					var error_color = "#B94A48";
-
-					if(rsp.engaged_alerts > 0) {
-                                                let alerts_badge = "bg-info";
-
-                                                if(rsp.engaged_alerts_error > 0) alerts_badge = "bg-danger";
-                                                else if(rsp.engaged_alerts_warning > 0) alerts_badge = "bg-warning";
-
-						msg += "<a href=']]
-print(http_prefix)
-print [[/lua/alert_stats.lua?ifid=]]
-print(tostring(ifid))
-print [[&status=engaged'>"
-						msg += "<span class=\"badge " + alerts_badge + "\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']] print(i18n('graphs.engaged_alerts')) print[['><i class=\"fas fa-exclamation-triangle\"></i> "+NtopUtils.formatValue(rsp.engaged_alerts, 1)+"</span></a>";
-					}
-
-					if(rsp.alerted_flows_warning > 0 && !(systemInterfaceEnabled)) {
-						msg += "<a href=']]
-print(http_prefix)
-print [[/lua/flows_stats.lua?status=warning'>"
-						msg += "<span class=\"badge bg-warning\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']]
-print(i18n("flow_details.alerted_flows"))
-print [['>"+NtopUtils.formatValue(rsp.alerted_flows_warning, 1)+ " <i class=\"fas fa-stream\"></i> ]]
-print [[ <i class=\"fas fa-exclamation-triangle\"></i></span></a>";
-					}
-
-					if(rsp.alerted_flows_error > 0 && !(systemInterfaceEnabled)) {
-						msg += "<a href=']]
-print(http_prefix)
-print [[/lua/flows_stats.lua?status=error'>"
-						msg += "<span class=\"badge bg-danger\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']]
-print(i18n("flow_details.dangerous_flows"))
-print [['>"+NtopUtils.formatValue(rsp.alerted_flows_error, 1)+ " <i class=\"fas fa-stream\"></i> ]]
-print [[ <i class=\"fas fa-exclamation-triangle\"></i></span></a>";
-					}
-
-					if(rsp.active_discovery_active === true) {
-						msg += "<a href=']]
-print(http_prefix)
-print [[/lua/discover.lua'>"
-						msg += "<span class=\"badge bg-warning\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']]
-print(i18n("prefs.network_discovery_running"))
-print [['><i class=\"fas fa-project-diagram\"></i></span></a>";
-					}
-				}
-
-				if((rsp.engaged_alerts > 0 || rsp.alerted_flows > 0) && $("#alerts-id").is(":visible") == false) {
-					$("#alerts-id").show();
-				}
-
-				if(rsp.ts_alerts && rsp.ts_alerts.influxdb && (!systemInterfaceEnabled)) {
-					msg += "<a href=']]
-print(http_prefix)
-print [[/lua/monitor/influxdb_monitor.lua?ifid=]]
-print(tostring(ifid))
-print [[&page=alerts#tab-table-engaged-alerts'>"
-					msg += "<span class=\"badge bg-danger\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=']] print(i18n('alerts_dashboard.influxdb_error')) print[['><i class=\"fas fa-database\"></i></span></a>";
-				}
-
-				var alarm_threshold_low = 60;  /* 60% */
-				var alarm_threshold_high = 90; /* 90% */
-				var alert = 0;
-
-				if(rsp.num_local_hosts > 0 && (!systemInterfaceEnabled)) {
-					msg += "<a href=']]
-print(http_prefix)
-print [[/lua/hosts_stats.lua?mode=local'>";
-					msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]]
-print(i18n("local_hosts"))
-print [[\" class=\"badge bg-success\">";
-					msg += NtopUtils.formatValue(rsp.num_local_hosts, 1);
-					if(rsp.num_local_rcvd_only_hosts > 0) msg += " ("+NtopUtils.formatValue(rsp.num_local_rcvd_only_hosts, 1)+")";
-					msg += " <i class=\"fas fa-laptop\" aria-hidden=\"true\"></i></span></a>";
-				}
-
-				const num_remote_hosts = rsp.num_hosts - rsp.num_local_hosts;
-				if(num_remote_hosts > 0 && (!systemInterfaceEnabled)) {
-					msg += "<a href=']]
-print(http_prefix)
-print [[/lua/hosts_stats.lua?mode=remote'>";
-					var remote_hosts_label = "]]
-print(i18n("remote_hosts"))
-print [[";
-
-					if (rsp.hosts_pctg < alarm_threshold_low && !systemInterfaceEnabled) {
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + remote_hosts_label +"\" class=\"badge bg-secondary\">";
-					} else if (rsp.hosts_pctg < alarm_threshold_high && !systemInterfaceEnabled) {
-						alert = 1;
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + remote_hosts_label +"\" class=\"badge bg-warning\">";
-					} else {
-						alert = 1;
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + remote_hosts_label +"\" class=\"badge bg-danger\">";
-					}
-
-					msg += NtopUtils.formatValue(num_remote_hosts, 1);
-                                        num_remote_rcvd_only_hosts = rsp.num_rcvd_only_hosts - rsp.num_local_rcvd_only_hosts;
-					if(num_remote_rcvd_only_hosts > 0) msg += " ("+NtopUtils.formatValue(num_remote_rcvd_only_hosts, 1)+")";
-					msg += " <i class=\"fas fa-laptop\" aria-hidden=\"true\"></i></span></a>";
-				}
-
-				if(rsp.num_devices > 0 && (!systemInterfaceEnabled)) {
-					var macs_label = "]]
-print(i18n("mac_stats.layer_2_source_devices", {device_type = ""}))
-print [[";
-					msg += "<a href=']]
-print(http_prefix)
-print [[/lua/macs_stats.lua?devices_mode=source_macs_only'>";
-
-					if (rsp.macs_pctg < alarm_threshold_low) {
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + macs_label +"\" class=\"badge bg-secondary\">";
-					} else if(rsp.macs_pctg < alarm_threshold_high) {
-						alert = 1;
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + macs_label +"\" class=\"badge bg-warning\">";
-					} else {
-						alert = 1;
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + macs_label +"\" class=\"badge bg-danger\">";
-					}
-
-					msg += NtopUtils.formatValue(rsp.num_devices, 1)+" <i class=\"fas fa-ethernet\"></i></span></a>";
-				}
-                    
-				if(rsp.num_flows > 0 && (!systemInterfaceEnabled)) {
-          msg += "<a href=']]
-print(http_prefix)
-print [[/lua/flows_stats.lua'>";
-          const flows_label = "]]
-print(i18n("live_flows"))
-print [["
-					if (rsp.flows_pctg < alarm_threshold_low) {
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + flows_label +"\" class=\"badge bg-secondary\">";
-					} else if(rsp.flows_pctg < alarm_threshold_high) {
-						alert = 1;
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + flows_label +"\" class=\"badge bg-warning\">";
-					} else {
-						alert = 1;
-						msg += "<span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"" + flows_label +"\" class=\"badge bg-danger\">";
-					}
-
-					msg += NtopUtils.formatValue(rsp.num_flows, 1)+" <i class=\"fas fa-stream\"></i>  </span> </a>";
-
-					if (rsp.db && rsp.db.flow_export_drops > 0) {
-						const export_pctg = rsp.db.flow_export_drops / (rsp.db.flow_export_count + rsp.db.flow_export_drops + 1);
-						if (export_pctg > ]]
-print(stats_utils.UPPER_BOUND_INFO_EXPORTS)
-print [[) {
-							const badge_class = (export_pctg <= ]]
-print(stats_utils.UPPER_BOUND_WARNING_EXPORTS)
-print [[) ? 'warning' : 'danger';
-							msg += "<a href=']]
-print(http_prefix)
-print [[/lua/if_stats.lua'><span class=\"badge bg-"+badge_class+"\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('flow_export_drops')) print[[\"><i class=\"fas fa-exclamation-triangle\" style=\"color: #FFFFFF;\"></i> "+NtopUtils.formatValue(rsp.db.flow_export_drops, 1)+" DB Export drop";
-							if(rsp.db.flow_export_drops > 1) msg += "s";
-							msg += "</span></a>";
-						}
-					}
-					if (rsp.dropped_zmq_msg > 0) {
-						msg += "<a href=']]
-print(http_prefix)
-print [[/lua/if_stats.lua'><span class=\"badge bg-warning\"><i class=\"fas fa-tint\" style=\"color: #FFFFFF;\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('dropping_zmq_msg')) print[[\"></i> "+NtopUtils.formatValue(rsp.dropped_zmq_msg, 1)+" ZMQ Drops</span></a>";
-					}
-					if (rsp.dropped_flows > 0) {
-						msg += "<a href=']]
-print(http_prefix)
-print [[/lua/if_stats.lua'><span class=\"badge bg-warning\"><i class=\"fas fa-tint\" style=\"color: #FFFFFF;\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('dropping_flows')) print[[\"></i> "+NtopUtils.formatValue(rsp.dropped_flows, 1)+" Flows Drops</span></a>";
-					}
-				}
-
-				if ((rsp.num_live_captures != undefined) && (rsp.num_live_captures > 0) && (!systemInterfaceEnabled)) {
-					msg += "<a href=']]
-print(http_prefix)
-print [[/lua/live_capture_stats.lua'>";
-					msg += "<span class=\"badge bg-primary\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('live_capture.active_live_captures')) print[[\">";
-					msg += NtopUtils.addCommas(rsp.num_live_captures)+" <i class=\"fas fa-download fa-lg\"></i></span></a>";
-				}
-
-				if (rsp.traffic_recording != undefined && (!systemInterfaceEnabled)) {
-					var status_label="primary";
-					var status_title="]]
-print(i18n("traffic_recording.recording"))
-print [[";
-
-					if (rsp.traffic_recording != "recording") {
-						status_label = "danger";
-						status_title = "]]
-print(i18n("traffic_recording.failure"))
-print [[";
-					}
-
-					msg += "<a href=']]
-print(http_prefix)
-print [[/lua/if_stats.lua?ifid=]]
-print(tostring(ifid))
-print [[&page=traffic_recording&tab=status'>";
-					msg += "<span class=\"badge bg-"+status_label+"\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\""+NtopUtils.addCommas(status_title)+"\">";
-					msg += "<i class=\"fas fa-hdd fa-lg\"></i></span></a>";
-				}
-
-				if (rsp.traffic_extraction != undefined && (!systemInterfaceEnabled)) {
-					var status_title="]]
-print(i18n("traffic_recording.traffic_extraction_jobs"))
-print [[";
-					var status_label = "secondary";
-
-					if (rsp.traffic_extraction == "ready") status_label="primary";
-
-					msg += "<a href=']]
-print(http_prefix)
-print [[/lua/if_stats.lua?ifid=]]
-print(tostring(ifid))
-print [[&page=traffic_recording&tab=jobs'>";
-					msg += "<span class=\"badge bg-"+status_label+"\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\""+NtopUtils.addCommas(status_title)+"\">";
-					msg += rsp.traffic_extraction_num_tasks+" <i class=\"fas fa-tasks fa-lg\"></i></span></a>";
-				}
-
-				if (rsp.vs_in_progress != undefined && rsp.vs_in_progress > 0 && (!systemInterfaceEnabled)) {
-					msg += "<a href=']]
-print(http_prefix)
-print [[/lua/vulnerability_scan.lua'>";
-					msg += "<span class=\"badge bg-primary\" data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('vulnerability_scan.vulnerability_scan_in_progress')) print[[\">";
-					msg += NtopUtils.addCommas(rsp.vs_in_progress) +" <i class=\"fas fa-satellite-dish\"></i></span></a>";
-				}
-
-                                if(rsp.is_loading == true) {
-                                       msg += "<blink><span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]] print(i18n('loading')) print[[\" class=\"badge bg-primary\"><i class=\"fas fa-spinner\"></i> ]]
-print(i18n("loading"))
-print [[</span></blink>";
-                                }
-]]
-
-if ntop.isOffline() then
-    print [[
-				msg += "<a href=\"#\" style=\"cursor: default\"><span data-bs-toggle='tooltip' data-bs-placement='bottom' title=\"]]
-    print(i18n("offline"))
-    print [[\" class=\"badge bg-secondary\"><i class=\"fas fa-plane\"></i></span></a>";
-	]]
-end
-
-print [[
-				msg += '</div></div>';
-				// append the message inside the network-load element
-				const $msg = $(msg);
-				// resize element's font size to fit better
-				if ($msg.width() > $msg.css('max-width')) {
-					$msg.find('span').css('font-size', '0.748rem');
-				}
-
-				$('.network-load').html($msg);
-                
-                NtopUtils.reloadBSTooltips();
-
-			} catch(e) {
-				console.warn(e);
-				/* alert("JSON Error (session expired?): logging out"); window.location.replace("]]
-print(http_prefix)
-print [[/lua/logout.lua");  */
-			}
-		},
-		error: function() {
-			isFooterRefreshInProcess = false;
-		}
-	});
-}
-
-$(document).ajaxError(function(err, response, ajaxSettings, thrownError) {
-	if((response.status == 403) && (response.responseText == "Login Required"))
-		window.location.href = "]]
-print(http_prefix .. "/lua/login.lua")
-print [[";
-});
-
-footerRefresh();  /* call immediately to give the UI a more responsive look */
-
-setInterval(footerRefresh, 7000); /* re-schedule every [interface-rate] seconds */
-
-//Automatically open dropdown-menu
-$(document).ready(function(){
-    $('ul.nav li.dropdown').hover(function() {
-      $(this).find('.dropdown-menu').stop(true, true).delay(150).fadeIn(100);
-    }, function() {
-      $(this).find('.dropdown-menu').stop(true, true).delay(150).fadeOut(100);
-    });
-    $('.collapse')
-      .on('shown.bs.collapse', function(){
-	$(this).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
-      })
-      .on('hidden.bs.collapse', function(){
-	$(this).parent().find(".fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");
-    });
-});
-
-]]
-
--- This code rewrites the current page state after a POST request to avoid Document Expired errors
-if not table.empty(_POST) then
-    print [[
-    if ((typeof(history) === "object")
-      && (typeof(history).replaceState === "function")
-      && (typeof(window.location.href) === "string"))
-    history.replaceState(history.state, "", window.location.href);
-  ]]
-end
-
-print [[
-
-// hide the possibly shown alerts icon in the header
-]]
-if not _ifstats.isView then
-    print("$('#alerts-li').hide();")
-else
-    print("$('#alerts-li').show();")
-end
-
-print([[
-</script>
-]])
-
--- ######################################
-
-if have_nedge then
-    print [[<form id="powerOffForm" method="post">
-    <input name="csrf" value="]]
-    print(random_csrf)
-    print [[" type="hidden" />
-    <input name="poweroff" value="" type="hidden" />
-  </form>
-  <form id="rebootForm" method="post">
-    <input name="csrf" value="]]
-    print(random_csrf)
-    print [[" type="hidden" />
-    <input name="reboot" value="" type="hidden" />
-  </form>]]
-
-    print(template.gen("modal_confirm_dialog.html", {
-        dialog = {
-            id = "poweroff_dialog",
-            action = "$('#powerOffForm').submit()",
-            title = i18n("nedge.power_off"),
-            message = i18n("nedge.power_off_confirm"),
-            confirm = i18n("nedge.power_off")
-        }
-    }))
-
-    print(template.gen("modal_confirm_dialog.html", {
-        dialog = {
-            id = "reboot_dialog",
-            action = "$('#rebootForm').submit()",
-            title = i18n("nedge.reboot"),
-            message = i18n("nedge.reboot_corfirm"),
-            confirm = i18n("nedge.reboot")
-        }
-    }))
-
-end
-
-print(template.gen("modal_confirm_dialog.html", {
-    dialog = {
-        id = "ext_link_dialog",
-        title = i18n("external_link"),
-        message = i18n("show_alerts.confirm_external_link"),
-        confirm = i18n("redirect")
-    }
-}))
-
-print [[
-        <script type="text/javascript">
-          $(document).ready(function(){
-            $(document).on('click','a.ntopng-external-link',function(event){
-              event.preventDefault();
-              const url=$(this)[0].href;
-              $("#url_ext_link_dialog").html(url+"<br/>]]
-print(i18n("are_you_sure"))
-print [[");
-              $("#btn-confirm-action_ext_link_dialog").attr('href',url);
-              $('#ext_link_dialog').modal('show');
-            });
-          });
-        </script>
-   ]]
-
--- Updates submenu
-if hasSoftwareUpdatesSupport() then
-
-    -- Updates check
-    print [[
-<script type='text/javascript'>
-  $('#updates-info-li').html(']]
-    print(i18n("updates.checking"))
-    print [[');
-  $('#updates-install-li').hide();
-
-  const updates_csrf = ']]
-    print(random_csrf)
-    print [[';
-
-  /* Updates status */
-  var updatesStatus = '';
-  var updatesLastCheck = 0;
-
-  /* Install latest update */
-  var installUpdate = function() {
-    if (confirm(']]
-    print(i18n("updates.install_confirm"))
-    if info["pro.license_days_left"] ~= nil and info["pro.license_days_left"] <=
-        0 then
-        -- License is valid, however maintenance is expired: warning the user
-        print(" " .. i18n("updates.maintenance_expired"))
-    end
-    print [[')) {
-      $.ajax({
-        type: 'POST',
-        url: ']]
-    print(http_prefix)
-    print [[/lua/install_update.lua',
-        data: {
-          csrf: updates_csrf
-        },
-        success: function(rsp) {
-          $('#updates-info-li').html(']]
-    print(i18n("updates.installing"))
-    print [[')
-          $('#updates-info-li').attr('title', '');
-          $('#updates-install-li').hide();
-          $('#admin-badge').hide();
-	  updatesStatus = 'installing';
-        }
-      });
-    }
-  }
-
-  /* Check for new updates */
-  var checkForUpdates = function() {
-    $.ajax({
-      type: 'POST',
-      url: ']]
-    print(http_prefix)
-    print [[/lua/check_update.lua',
-      data: {
-        csrf: updates_csrf,
-        search: 'true'
-      },
-      success: function(rsp) {
-        $('#updates-info-li').html(']]
-    print(i18n("updates.checking"))
-    print [[');
-        $('#updates-info-li').attr('title', '');
-        $('#updates-install-li').hide();
-        $('#admin-badge').hide();
-	updatesStatus = 'checking';
-      }
-    });
-  }
-
-  /* Update the menu with the current updates status */
-  var updatesRefresh = function() {
-    const now = Date.now()/1000;
-    let check_time_sec = 10;
-
-    if (updatesStatus == 'installing' || updatesStatus == 'checking') {
-        /* Go ahead (frequent update) */
-    } else if (updatesStatus == 'update-avail' || updatesStatus == 'upgrade-failure') {
-        return; /* no need to check again */
-    } else { /* updatesStatus == 'not-avail' || updatesStatus == 'update-failure' || updatesStatus == <other errors> || updatesStatus == '' */
-        check_time_sec = 300;
-    }
-
-    if (now < updatesLastCheck + check_time_sec) return; /* check with low freq */
-    updatesLastCheck = now; 
-
-    $.ajax({
-      type: 'GET',
-        url: ']]
-    print(http_prefix)
-    print [[/lua/check_update.lua',
-        data: {},
-        success: function(rsp) {
-          if(rsp && rsp.status) {
-
-	    updatesStatus = rsp.status;
-
-            if (rsp.status == 'installing') {
-              $('#updates-info-li').html(']]
-    print(i18n("updates.installing"))
-    print [[')
-              $('#updates-info-li').attr('title', '');
-              $('#updates-install-li').hide();
-              $('#admin-badge').hide();
-
-            } else if (rsp.status == 'checking') {
-              $('#updates-info-li').html(']]
-    print(i18n("updates.checking"))
-    print [[');
-              $('#updates-info-li').attr('title', '');
-              $('#updates-install-li').hide();
-              $('#admin-badge').hide();
-
-            } else if (rsp.status == 'update-avail' || rsp.status == 'upgrade-failure') {
-
-              $('#updates-info-li').html('<span class="badge bg-pill bg-danger">]]
-    print(i18n("updates.available"))
-    print [[</span> ]]
-    print(info["product"])
-    print [[ ' + rsp.version);
-              $('#updates-info-li').attr('title', '');
-
-              var icon = '<i class="fas fa-download"></i>';
-              $('#updates-install-li').attr('title', '');
-              if (rsp.status !== 'update-avail') {
-                icon = '<i class="fas fa-exclamation-triangle text-danger"></i>';
-                $('#updates-install-li').attr('title', "]]
-    print(i18n("updates.update_failure_message"))
-    print [[: " + rsp.status);
-              }
-              $('#updates-install-li').html(icon + " ]]
-    print(i18n("updates.install"))
-    print [[");
-              $('#updates-install-li').show();
-              $('#updates-install-li').off("click");
-              $('#updates-install-li').click(installUpdate);
-
-              if (rsp.status !== 'update-avail') $('#admin-badge').html('!');
-              else $('#admin-badge').html('1');
-              $('#admin-badge').show();
-
-            } else /* (rsp.status == 'not-avail' || rsp.status == 'update-failure' || rsp.status == <other errors>) */ {
-
-              var icon = '';
-              $('#updates-info-li').attr('title', '');
-              if (rsp.status !== 'not-avail') {
-                icon = '<i class="fas fa-exclamation-triangle text-danger"></i> ';
-                $('#updates-info-li').attr('title', "]]
-    print(i18n("updates.update_failure_message"))
-    print [[: " + rsp.status);
-              }
-              $('#updates-info-li').html(icon + ']]
-    print(i18n("updates.no_updates"))
-    print [[');
-
-              $('#updates-install-li').html("<i class='fas fa-sync'></i> ]]
-    print(i18n("updates.check"))
-    print [[");
-              $('#updates-install-li').show();
-              $('#updates-install-li').off("click");
-              $('#updates-install-li').click(checkForUpdates);
-
-              $('#admin-badge').hide();
-            }
-          }
-        }
-    });
-  }
-  setInterval(updatesRefresh, 1000);
-</script>
-]]
-end
-
--- close wrapper
-print [[
-      </main>
-    </div>
-  </body>
-</html> ]]
+template_utils.render("pages/vue_page.template", {
+   vue_page_name = "AppFooter",
+   page_context  = footer_context,
+})
+
+print("</main>")
+print("</div>")
+print("</body>")
+print("</html>")
diff --git a/scripts/lua/inc/menu.lua b/scripts/lua/inc/menu.lua
index b76ec8cbd8..3746cb6cb6 100644
--- a/scripts/lua/inc/menu.lua
+++ b/scripts/lua/inc/menu.lua
@@ -1,137 +1,34 @@
 --
 -- (C) 2013-26 - ntop.org
 --
+-- Thin shell: emits JS globals block required by legacy page scripts,
+-- then mounts AppShell (sidebar + topbar combined) Vue component.
+-- All menu/topbar data is fetched by Vue from GET /lua/rest/v2/get/ntopng/menu.lua
+--
+
 local dirs = ntop.getDirs()
-package.path = dirs.installdir .. "/pro/scripts/lua/enterprise/modules/?.lua;" .. package.path
 package.path = dirs.installdir .. "/scripts/lua/modules/?.lua;" .. package.path
 package.path = dirs.installdir .. "/scripts/lua/modules/toasts/?.lua;" .. package.path
-package.path = dirs.installdir .. "/scripts/lua/modules/vulnerability_scan/?.lua;" .. package.path
 
-if ((dirs.scriptdir ~= nil) and (dirs.scriptdir ~= "")) then
-    package.path = dirs.scriptdir .. "/lua/modules/?.lua;" .. package.path
-end
 require "lua_utils"
-require "check_redis_prefs"
 
-local recording_utils = require "recording_utils"
-local format_utils = require "format_utils"
-local page_utils = require("page_utils")
-local toasts_manager = require("toasts_manager")
-local blog_utils = require("blog_utils")
+local page_utils     = require "page_utils"
+local toasts_manager = require "toasts_manager"
 local template_utils = require "template_utils"
-local auth = require "auth"
-local vs_utils = require "vs_utils"
-local behavior_utils = require("behavior_utils")
-local checks = require "checks"
+local json           = require "dkjson"
 
-local has_local_auth = (ntop.getPref("ntopng.prefs.local.auth_enabled") ~= '0')
-local has_help_enabled = (ntop.getPref("ntopng.prefs.menu_entries.help") ~= '0')
-local has_developer_enabled = (ntop.getPref("ntopng.prefs.menu_entries.developer") ~= '0')
-
--- ************************************
-
-local prefs = ntop.getPrefs()
-
-local asset_inventory_enabled = assetsInventoryEnabled()
-
-local is_influxdb_enabled = ntop.getPref("ntopng.prefs.timeseries_driver") == "influxdb"
-local has_ch_support = hasClickHouseSupport()
-
--- user data
-local is_admin = isAdministrator()
-local session_user = _SESSION['user']
-
--- interface
-local ifid_stats = interface.getStats()
-local ifId = ifid_stats.id
-local has_vlans = interface.hasVLANs()
-local is_allowed_sys_interface = isAllowedSystemInterface()
-local system_ifid = getSystemInterfaceId()
-local interface_id = ifid_stats.id
-local random_csrf = ntop.getRandomCSRFValue()
+local is_admin            = isAdministrator()
+local session_user        = _SESSION["user"]
+local interface_id        = interface.getId()
+if _GET["ifid"] and tostring(_GET["ifid"]) ~= tostring(interface_id) then
+   interface_id = tonumber(_GET["ifid"]) or interface_id
+end
+local random_csrf         = ntop.getRandomCSRFValue()
 local is_system_interface = toboolean(page_utils.is_system_view())
-local is_pcap_dump = interface.isPcapDumpInterface()
-local is_packet_interface = interface.isPacketInterface()
-local is_db_view_interface = interface.isDatabaseViewInterface()
-local is_viewed = ifid_stats.isViewed
-local is_sub_interface = interface.isSubInterface()
-local is_zmq_interface = interface.isZMQInterface()
-local is_discoverable_interface = interface.isDiscoverableInterface()
-local is_loopback_interface = interface.isLoopback()
-local is_viewed_interface = interface.isViewed()
+local http_prefix         = ntop.getHttpPrefix()
 
-local iface_names = interface.getIfNames()
-local current_ifid = interface.getId()
-
--- compute number of interfaces
-num_ifaces = 0
-for k, v in pairs(iface_names) do
-    num_ifaces = num_ifaces + 1
-end
-
--- nedge versions
-local is_nedge = ntop.isnEdge()
--- for ntopng is always false
-local is_routing_mode = false
-if is_nedge then
-    is_routing_mode = ntop.isRoutingMode()
-end
-local is_nedge_enterprise = ntop.isnEdgeEnterprise()
-
--- ntopng info/version
-local info = ntop.getInfo()
-local is_pro = ntop.isPro()
-local is_enterprise_M = ntop.isEnterpriseM()
-local is_enterprise = ntop.isEnterprise()
-local is_enterprise_L = ntop.isEnterpriseL()
-local is_enterprise_XL = ntop.isEnterpriseXL()
-local is_appliance = ntop.isAppliance()
-local is_windows = ntop.isWindows()
-
--- dependencies / additional features
-local is_geoip_enabled = ntop.hasGeoIP()
-local limit_resource_usage = ntop.limitResourcesUsage()
-local is_vs_utils_available = vs_utils.is_available()
-local is_asn_mode_enabled = isASNModeEnabled()
-
-local has_dump_cache = ntop.hasDumpCache()
-local is_no_login_user = isNoLoginUser()
-local http_prefix = ntop.getHttpPrefix()
-
--- exporters
-local flowDevices = (interface.getFlowDevices and interface.getFlowDevices()) or {}
-local sFlowDevices = interface.getSFlowDevices() or {}
-local obsPointsInfo = interface.getObsPointsInfo() or {}
-local obs_points = obsPointsInfo["ObsPoints"] or {}
-local num_obs_points = obsPointsInfo.numObsPoints or 0
-
-local checks_config = checks.getConfigset()["config"]
-local interface_config = checks_config["interface"]
-local flow_config = checks_config["flow"]
-
--- Check if some alerts are enabled
-local devices_exclusion_enabled = false
-local acl_violation_enabled = false
-
-if (interface_config) then
-    -- Interface alerts
-    if (interface_config["device_connection_disconnection"]) and
-        (interface_config["device_connection_disconnection"]["min"]["enabled"]) then
-        devices_exclusion_enabled = true
-    end
-end
-
--- Infrastructure
-local infrastructure_view = false
-local infrastructure_instances = {}
-infrastructure_view, infrastructure_instances = isInfrastructureView()
-
--- ************************************
-
-local observationPointId = nil
-print([[
-   <div class='wrapper'>
-]])
+-- JS globals — consumed by legacy page scripts before Vue mounts
+print("<div class='wrapper'>")
 
 print [[
 <script type='text/javascript'>
@@ -146,7 +43,6 @@ print [[";
 print(interface_id)
 print [[;
 
-   /* Some localization strings to pass from lua to javascript */
    const i18n_ext = {
       "no_results_found": "]]
 print(i18n("no_results_found"))
@@ -161,11 +57,7 @@ print [[",
 print(i18n("no_data_available"))
 print [[",
       "showing_x_to_y_rows": "]]
-print(i18n("showing_x_to_y_rows", {
-    x = "{0}",
-    y = "{1}",
-    tot = "{2}"
-}))
+print(i18n("showing_x_to_y_rows", { x = "{0}", y = "{1}", tot = "{2}" }))
 print [[",
       "actions": "]]
 print(i18n("actions"))
@@ -240,9 +132,7 @@ print [[",
 print(i18n("nation"))
 print [[",
       "and_x_more": "]]
-print(i18n("and_x_more", {
-    num = '$num'
-}))
+print(i18n("and_x_more", { num = "$num" }))
 print [[",
       "invalid_input": "]]
 print(i18n("validation.invalid_input"))
@@ -268,14 +158,12 @@ print(i18n("rest_consts.CONFIGURATION_FILE_MISMATCH"))
 print [[",
       }
    };
+
    const systemInterfaceEnabled = ]]
 print(ternary(is_system_interface, "true", "false"))
 print [[;
 
-   window.unchangable_pool_names = [
-      'Jailed Hosts'
-   ]
-
+   window.unchangable_pool_names = ['Jailed Hosts'];
    window.__CSRF_DATATABLE__ = `]]
 print(random_csrf)
 print [[`;
@@ -284,1146 +172,43 @@ print(random_csrf)
 print [[`;
 
    if (document.cookie.indexOf("tzoffset=") < 0) {
-      // Tell the server the client timezone
       document.cookie = "tzoffset=" + (new Date().getTimezoneOffset() * 60 * -1);
    }
 </script>]]
 
--- NOTE: see sidebar.js for the client logic
-page_utils.init_menubar()
-
-if is_nedge then
-    dofile(dirs.installdir .. "/pro/scripts/lua/nedge/inc/menubar.lua")
-else
-    -- ##############################################
-
-    -- Dashboard
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.dashboard,
-        hidden = is_pcap_dump or is_system_interface or is_db_view_interface,
-        entries = {{
-            entry = page_utils.menu_entries.traffic_dashboard,
-            url = '/lua/index.lua'
-        }, {
-            entry = page_utils.menu_entries.assets_dashboard,
-            hidden = (not has_ch_support) or (not asset_inventory_enabled) or (not is_enterprise_L),
-            url = "/lua/pro/assets_dashboard.lua"
-        }, {
-            entry = page_utils.menu_entries.traffic_report,
-            hidden = not (is_enterprise and has_ch_support) or infrastructure_view or is_viewed, -- disable if interface is viewed
-            url = "/lua/pro/report.lua"
-        }, {
-            entry = page_utils.menu_entries.hr_chart,
-            hidden = (not is_enterprise_M) or (not has_ch_support) or (not ifid_stats["has_hr_flows"]),
-            url = "/lua/pro/hr_chart.lua"
-        }}
-    })
-
-    -- ##############################################
-
-    -- Active Monitoring
-    -- The Monitoring entry are used to go to the System interface pages
-    -- without using the Interface dropdown. The section is hidden
-    -- in system interface.
-    -- Interface is not system
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.monitoring,
-        hidden = is_system_interface or not is_admin,
-        entries = {{
-            entry = page_utils.menu_entries.active_monitoring,
-            hidden = is_windows,
-            url = "/lua/active_monitoring.lua"
-        }, {
-            entry = page_utils.menu_entries.network_discovery,
-            hidden = not is_discoverable_interface or is_windows or is_loopback_interface or limit_resource_usage or
-                infrastructure_view,
-            url = "/lua/discover.lua"
-        }, {
-            entry = page_utils.menu_entries.infrastructure_dashboard,
-            hidden = (not is_enterprise_L and not is_nedge_enterprise) or not is_admin,
-            url = '/lua/pro/enterprise/infrastructure_config.lua'
-        }, {
-            entry = page_utils.menu_entries.snmp_monitoring,
-            hidden = (not is_enterprise_M and not is_nedge_enterprise),
-            url = "/lua/pro/enterprise/snmpdevices_stats.lua"
-        }, {
-            entry = page_utils.menu_entries.vulnerability_scan,
-            url = '/lua/vulnerability_scan.lua',
-            hidden = not is_vs_utils_available or is_zmq_interface
-        }}
-    })
-
-    -- ##############################################
-
-    -- Alerts
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.alerts,
-        hidden = not prefs.are_alerts_enabled or not auth.has_capability(auth.capabilities.alerts) or
-            is_db_view_interface or infrastructure_view,
-        entries = {{
-            entry = page_utils.menu_entries.alerts_list,
-            url = "/lua/alert_stats.lua"
-        }, {
-            entry = page_utils.menu_entries.alerts_graph,
-            url = "/lua/pro/alerts_graph.lua",
-            hidden = (not is_enterprise_L and not is_nedge_enterprise) or (not has_ch_support) or (is_pcap_dump)
-        }, {
-            entry = page_utils.menu_entries.alerts_geomap,
-            url = "/lua/pro/alerts_geomap.lua",
-            hidden = true or (not is_enterprise_XL)
-        }, {
-            entry = page_utils.menu_entries.alerts_analysis,
-            url = "/lua/pro/enterprise/alerts_analysis.lua",
-            hidden = (not is_enterprise) or is_pcap_dump
-        }, {
-            entry = page_utils.menu_entries.divider
-        }, {
-            entry = page_utils.menu_sections.notifications,
-            hidden = (not is_admin) or is_pcap_dump,
-            url = '/lua/admin/endpoint_notifications_list.lua'
-        }}
-    })
-
-    -- ##############################################
-
-    -- Flows
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.flows,
-        hidden = is_asn_mode_enabled or (is_system_interface or infrastructure_view),
-        entries = {{
-            entry = page_utils.menu_entries.active_flows,
-            url = "/lua/flows_stats.lua"
-        }, {
-            entry = page_utils.menu_entries.db_explorer,
-            hidden = (not is_enterprise and not is_nedge_enterprise) or
-                not auth.has_capability(auth.capabilities.historical_flows) or ifid_stats.isViewed or ifid_stats['type'] ==
-                'db' or not has_ch_support,
-            url = "/lua/pro/db_search.lua"
-        }, {
-            entry = page_utils.menu_entries.server_ports,
-            url = '/lua/server_ports.lua',
-            hidden = not is_enterprise_L
-        }, {
-            entry = page_utils.menu_entries.divider
-        }, {
-            entry = page_utils.menu_entries.bgp_looking_glass,
-            url = '/lua/bgp_looking_glass.lua',
-            hidden = isEmptyString(ntop.getPref("ntopng.prefs.bgp_server.ip_address")) or
-                isEmptyString(ntop.getPref('ntopng.prefs.bgp_server.port'))
-                
-        }}
-    })
-
-    -- ##############################################
-    -- chatbot, hide if viewed interface or system or not enterprise xl
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.nanalyst,
-        hidden = not page_utils.has_nanalyst(),
-        entries = {{
-            entry = page_utils.menu_entries.nanalyst,
-            url = '/lua/pro/nanalyst.lua'
-        },{
-            entry = page_utils.menu_entries.ai_policy,
-            url = '/lua/pro/ai_policy.lua'
-        }, {
-            entry = page_utils.menu_entries.analyst_pipeline,
-            url = '/lua/pro/analyst_pipeline.lua'
-        }, {
-            entry = page_utils.menu_entries.ai_usage_stats,
-            url = '/lua/pro/ai_stats.lua'
-        },{
-            entry = page_utils.menu_entries.ai_audit,
-            url = '/lua/pro/ai_audit.lua'
-        },
-        
-    }})
-
-    -- ##############################################
-    -- Views menu entry for ASN Mode
-    -- Group hosts, flows 
-
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.views,
-        hidden = not is_asn_mode_enabled or (is_system_interface or is_viewed or infrastructure_view),
-        entries = {{
-            entry = page_utils.menu_entries.hosts_asn_mode,
-            url = '/lua/hosts_stats.lua'
-        }, {
-            entry = page_utils.menu_entries.active_flows_asn_mode,
-            url = "/lua/flows_stats.lua"
-        }, {
-            entry = page_utils.menu_entries.historical_flows_asn_mode,
-            hidden = (not is_enterprise and not is_nedge_enterprise) or
-                not auth.has_capability(auth.capabilities.historical_flows) or ifid_stats.isViewed or ifid_stats['type'] ==
-                'db' or not has_ch_support,
-            url = "/lua/pro/db_search.lua"
-        }, {
-            entry = page_utils.menu_entries.server_ports_asn_mode,
-            url = '/lua/server_ports.lua',
-            hidden = not is_enterprise_L
-        }, {
-            entry = page_utils.menu_entries.divider
-        }, {
-            entry = page_utils.menu_entries.bgp_looking_glass,
-            url = '/lua/bgp_looking_glass.lua',
-            hidden = isEmptyString(ntop.getPref("ntopng.prefs.bgp_server.ip_address")) or
-                isEmptyString(ntop.getPref('ntopng.prefs.bgp_server.port'))
-                
-        }}
-    })
-    -- ##############################################
-    -- Hosts
-
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.hosts,
-        hidden = is_system_interface or is_viewed or infrastructure_view or is_asn_mode_enabled,
-        entries = {{
-            entry = page_utils.menu_entries.hosts,
-            url = '/lua/hosts_stats.lua'
-        }, {
-            entry = page_utils.menu_entries.devices,
-            hidden = (not ifid_stats.has_macs),
-            url = '/lua/macs_stats.lua'
-        }, {
-            entry = page_utils.menu_entries.divider
-        }, {
-            hidden = not (is_enterprise_M and not is_windows) or not asset_inventory_enabled,
-            entry = page_utils.menu_entries.assets,
-            url = '/lua/pro/assets.lua'
-        }}
-    })
-
-    -- ##############################################
-
-    -- Exporters
-
-    local has_exporters = (ifid_stats.type == "zmq") or (ifid_stats.type == "custom") or
-                              (is_pro and (table.len(flowDevices) > 0))
-
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.collection,
-        hidden = not has_exporters or not is_enterprise_M or is_system_interface or infrastructure_view,
-        entries = {{
-            entry = page_utils.menu_entries.sflow_exporters,
-            hidden = table.len(sFlowDevices) == 0,
-            url = '/lua/pro/enterprise/sflowdevices_stats.lua'
-        }, {
-            entry = page_utils.menu_entries.nprobe,
-            url = '/lua/pro/enterprise/nprobe.lua'
-        }, {
-            entry = page_utils.menu_entries.exporters_interfaces_stats,
-            url = '/lua/pro/exporters_interfaces_stats.lua'
-        }, {
-            entry = page_utils.menu_entries.observation_points,
-            hidden = (num_obs_points) == 0,
-            url = '/lua/pro/enterprise/observation_points.lua'
-        }}
-    })
-end
-
--- ##############################################
-
--- Maps
-
-local service_map_available = false
-local asset_map_available = is_enterprise_XL
-
-service_map_available, _ = behavior_utils.mapsAvailable()
-
-page_utils.add_menubar_section({
-    section = page_utils.menu_sections.maps,
-    hidden = is_system_interface or is_viewed or infrastructure_view,
-    entries = {{
-        entry = page_utils.menu_entries.analysis_map,
-        hidden = not service_map_available,
-        url = '/lua/pro/enterprise/network_maps.lua?map=service_map'
-    }, {
-        entry = page_utils.menu_entries.geo_map,
-        hidden = is_loopback_interface or not is_geoip_enabled,
-        url = '/lua/hosts_geomap.lua'
-    }, {
-        entry = page_utils.menu_entries.hosts_map,
-        hidden = not is_enterprise or is_asn_mode_enabled,
-        url = '/lua/pro/enterprise/hosts_map.lua'
-    }}
+local boot_context = json.encode({
+   csrf               = random_csrf,
+   http_prefix        = http_prefix,
+   ifid               = tostring(interface_id),
+   is_system_interface = is_system_interface,
+   is_admin           = is_admin,
+   username           = session_user,
+   active_section     = page_utils.get_active_section() or "",
+   active_entry       = page_utils.get_active_entry()   or "",
 })
 
--- ##############################################
-
--- Interface
-page_utils.add_menubar_section({
-    hidden = is_system_interface or infrastructure_view,
-    section = page_utils.menu_sections.if_stats,
-    entries = {{
-        entry = page_utils.menu_entries.interface,
-        url = "/lua/if_stats.lua"
-    }, {
-        entry = page_utils.menu_entries.divider
-    }, {
-        entry = page_utils.menu_entries.networks,
-        hidden = is_viewed_interface,
-        url = '/lua/network_stats.lua'
-    }, {
-        entry = page_utils.menu_entries.host_pools,
-        hidden = is_nedge,
-        url = '/lua/pool_stats.lua'
-    }, {
-        entry = page_utils.menu_entries.autonomous_systems,
-        hidden = (not is_geoip_enabled) or is_viewed_interface,
-        url = '/lua/as_stats.lua'
-    }, {
-        entry = page_utils.menu_entries.countries,
-        hidden = not is_geoip_enabled or is_viewed_interface,
-        url = '/lua/country_stats.lua'
-    }, {
-        entry = page_utils.menu_entries.vlans,
-        hidden = not has_vlans or is_viewed_interface,
-        url = '/lua/vlan_stats.lua'
-    }, {
-        entry = page_utils.menu_entries.pods,
-        hidden = not ifid_stats.has_seen_pods,
-        url = '/lua/pods_stats.lua'
-    }, {
-        entry = page_utils.menu_entries.containers,
-        hidden = not ifid_stats.has_seen_containers,
-        url = '/lua/containers_stats.lua'
-    }}
+-- AppShell: sidebar + topbar
+template_utils.render("pages/vue_page.template", {
+   vue_page_name = "AppShell",
+   page_context  = boot_context,
 })
 
--- ##############################################
+-- Open main content area
+print("<main id='n-container' class='px-md-4 px-sm-1'>")
 
--- System Health
-
-local health_entries = {{
-    entry = page_utils.menu_entries.system_status,
-    url = '/lua/system_stats.lua'
-}, {
-    entry = page_utils.menu_entries.interfaces_status,
-    url = '/lua/system_interfaces_stats.lua'
-}, {
-    entry = page_utils.menu_entries.influxdb_status,
-    url = '/lua/monitor/influxdb_monitor.lua',
-    hidden = not is_influxdb_enabled
-}, {
-    entry = page_utils.menu_entries.redis_status,
-    url = '/lua/monitor/redis_monitor.lua',
-    hidden = false -- TODO: add a check for redis monitoring status
-}, {
-    entry = page_utils.menu_entries.clickhouse_status,
-    url = '/lua/pro/enterprise/monitor/clickhouse_monitor.lua',
-    hidden = not has_ch_support
-}}
-
--- Add script entries relative to system health (e.g., redis) ...
-for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
-    -- NOTE: match on the health key to only pick the right subset of entries
-    if entry.menu_entry.section == page_utils.menu_sections.health.key then
-        health_entries[#health_entries + 1] = {
-            entry = page_utils.menu_entries[entry.menu_entry.key],
-            url = entry.url
-        }
-    end
-end
-
-page_utils.add_menubar_section({
-    hidden = not is_system_interface,
-    section = page_utils.menu_sections.health,
-    entries = health_entries
-})
-
--- ##############################################
-
--- Pollers (e.g., SNMP, active monitoring)
--- System interface menu
-
-local poller_entries = {{
-    entry = page_utils.menu_entries.divider
-}, {
-    hidden = not asset_inventory_enabled,
-    entry = page_utils.menu_entries.assets_snmp,
-    url = '/lua/pro/assets.lua'
-}, {
-    entry = page_utils.menu_entries.snmp,
-    hidden = not is_system_interface or (not is_enterprise_M and not is_nedge_enterprise),
-    url = "/lua/pro/enterprise/snmpdevices_stats.lua"
-}, {
-    entry = page_utils.menu_entries.active_monitoring,
-    hidden = not is_system_interface,
-    url = "/lua/active_monitoring.lua"
-}, {
-    entry = page_utils.menu_entries.infrastructure_dashboard,
-    hidden = (not is_enterprise_L and not is_nedge_enterprise) or not is_admin,
-    url = '/lua/pro/enterprise/infrastructure_config.lua'
-}}
-
--- Add script entries relative to pollers (e.g., active monitoring) ...
-for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
-    if entry.menu_entry.section == page_utils.menu_sections.pollers.key then
-        poller_entries[#poller_entries + 1] = {
-            entry = page_utils.menu_entries[entry.menu_entry.key],
-            url = entry.url
-        }
-    end
-end
-
-page_utils.add_menubar_section({
-    hidden = not is_system_interface,
-    section = page_utils.menu_sections.pollers,
-    entries = poller_entries
-})
-
--- ##############################################
-
--- System
-
-local system_entries = {}
-
--- Add script entries...
-for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
-    -- Skip pollers, they've already been set under pollers section
-    if not entry.menu_entry.section == "pollers" then
-        system_entries[#system_entries + 1] = {
-            entry = page_utils.menu_entries[entry.menu_entry.key],
-            url = entry.url
-        }
-    end
-end
-
--- Possibly add nEdge entries
-if is_nedge or is_appliance then
-    -- Possibly add a divider if system_entries already contain elements
-    if #system_entries > 0 then
-        system_entries[#system_entries + 1] = {
-            entry = page_utils.menu_entries.divider,
-            hidden = not is_admin
-        }
-    end
-end
-
-if is_nedge then
-    for _, entry in ipairs({{
-        entry = page_utils.menu_entries.system_setup,
-        hidden = not is_admin,
-        url = '/lua/system_setup_ui/interfaces.lua'
-    }, {
-        entry = page_utils.menu_entries.dhcp_static_leases,
-        hidden = not is_admin or not is_routing_mode,
-        url = '/lua/pro/nedge/admin/dhcp_leases.lua'
-    }, {
-        entry = page_utils.menu_entries.dhcp_active_leases,
-        hidden = not is_admin or not is_routing_mode,
-        url = '/lua/pro/nedge/admin/dhcp_active_leases.lua'
-    }, {
-        entry = page_utils.menu_entries.port_forwarding,
-        hidden = not is_admin or not is_routing_mode,
-        url = '/lua/pro/nedge/admin/port_forwarding.lua'
-    }, {
-        entry = page_utils.menu_entries.rules_config,
-        hidden = not is_admin or not is_routing_mode,
-        url = '/lua/pro/nedge/admin/rules_config.lua'
-    }, {
-        entry = page_utils.menu_entries.forwarders_config,
-        hidden = not is_admin or not is_routing_mode,
-        url = '/lua/pro/nedge/admin/forwarders_config.lua'
-    }}) do
-        system_entries[#system_entries + 1] = entry
-    end
-end
-
-if is_appliance then
-    for _, entry in ipairs({{
-        entry = page_utils.menu_entries.system_setup,
-        hidden = not is_admin,
-        url = '/lua/system_setup_ui/mode.lua'
-    }}) do
-        system_entries[#system_entries + 1] = entry
-    end
-end
-
-if #system_entries > 0 then
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.system_stats,
-        hidden = not is_allowed_sys_interface or not is_system_interface,
-        entries = system_entries
-    })
-end
-
--- ##############################################
-
--- Pools
-
-page_utils.add_menubar_section({
-    hidden = true, -- Always add the pools menu (moved to the Hosts submenu)
-    section = page_utils.menu_sections.pools,
-    entries = {{
-        entry = page_utils.menu_entries.manage_pools,
-        hidden = not is_admin,
-        url = '/lua/admin/manage_pools.lua'
-    }, {
-        entry = page_utils.menu_entries.host_members,
-        hidden = not is_admin,
-        url = '/lua/admin/manage_host_members.lua'
-    }}
-})
-
--- ##############################################
-
--- Notifications
-page_utils.add_menubar_section({
-    section = page_utils.menu_sections.notifications,
-    hidden = not is_system_interface or not is_admin,
-    url = '/lua/admin/endpoint_notifications_list.lua'
-})
-
--- ##############################################
-
-local scripts_config_url = "/lua/admin/edit_configset.lua?subdir=all"
-if tonumber(system_ifid) == tonumber(current_ifid) then
-    scripts_config_url = "/lua/admin/edit_configset.lua?subdir=system"
-end
-
--- Rules & Policies
-page_utils.add_menubar_section({
-    section = page_utils.menu_sections.policies,
-    hidden = infrastructure_view or not is_admin,
-    entries = {{
-        entry = page_utils.menu_entries.access_control_list,
-        hidden = not is_admin or not is_enterprise_L or is_asn_mode_enabled,
-        url = '/lua/pro/admin/access_control_list.lua'
-    }, {
-        entry = page_utils.menu_entries.device_protocols,
-        hidden = not is_admin or is_asn_mode_enabled,
-        url = '/lua/admin/edit_device_protocols.lua'
-    }, {
-        entry = page_utils.menu_entries.device_exclusions,
-        section = page_utils.menu_sections.hosts,
-        hidden = not is_admin or not auth.has_capability(auth.capabilities.checks) or not is_enterprise_M or
-            not devices_exclusion_enabled,
-        url = '/lua/pro/admin/edit_device_exclusions.lua'
-    }, {
-        entry = page_utils.menu_entries.network_config,
-        section = page_utils.menu_sections.admin,
-        hidden = not is_admin or not auth.has_capability(auth.capabilities.checks),
-        url = '/lua/admin/network_configuration.lua'
-    }, {
-        entry = page_utils.menu_entries.traffic_rules,
-        url = '/lua/pro/traffic_rules.lua',
-        hidden = not is_enterprise or not is_admin
-    }, {
-        entry = page_utils.menu_entries.divider
-    }, {
-        entry = page_utils.menu_entries.scripts_config,
-        section = page_utils.menu_sections.checks,
-        hidden = not is_admin or not auth.has_capability(auth.capabilities.checks),
-        url = scripts_config_url
-    }, {
-        entry = page_utils.menu_entries.alert_exclusions,
-        section = page_utils.menu_sections.admin,
-        hidden = not is_admin or not auth.has_capability(auth.capabilities.checks) or not is_enterprise_M or
-            (tonumber(system_ifid) == tonumber(current_ifid)),
-        url = '/lua/pro/admin/edit_alert_exclusions.lua?subdir=host'
-    }, {
-        entry = page_utils.menu_entries.divider
-    }, {
-        entry = page_utils.menu_entries.profiles,
-        hidden = not is_admin or not is_pro or is_nedge or is_asn_mode_enabled,
-        url = '/lua/pro/admin/edit_profiles.lua'
-    }}
-})
-
-page_utils.add_menubar_section({
-    section = page_utils.menu_sections.admin,
-    hidden = not is_admin,
-    entries = {{
-        entry = page_utils.menu_entries.nedge_users,
-        hidden = not is_admin or not is_nedge,
-        url = '/lua/pro/nedge/admin/nf_list_users.lua'
-    }, {
-        entry = page_utils.menu_entries.manage_users,
-        -- Note: 'not _SESSION["localuser"]' indicates that this is an external
-        -- user (e.g. LDAP), in that case allow users management if fallback is enabled.
-        hidden = not is_admin or (not _SESSION["localuser"] and not has_local_auth),
-        url = '/lua/admin/users.lua'
-    }, {
-        entry = page_utils.menu_entries.preferences,
-        hidden = not is_admin,
-        url = '/lua/admin/prefs.lua'
-    }, {
-        hidden = not is_admin,
-        entry = page_utils.menu_entries.tags,
-        url = '/lua/tags.lua'
-    }, {
-        entry = page_utils.menu_entries.divider
-    }, {
-        entry = page_utils.menu_entries.category_lists,
-        hidden = not is_admin,
-        url = '/lua/admin/blacklists.lua?enabled_status=enabled'
-    }, {
-        entry = page_utils.menu_entries.manage_configurations,
-        hidden = not is_admin or not has_dump_cache,
-        url = '/lua/admin/manage_configurations.lua'
-    }, {
-        entry = page_utils.menu_entries.divider
-    }, {
-        entry = page_utils.menu_entries.categories,
-        hidden = not is_admin,
-        url = '/lua/admin/edit_categories.lua'
-    }}
-})
-
--- ##############################################
-
--- Developer
-
-if not info.oem and auth.has_capability(auth.capabilities.developer) then
-
-    if not is_enterprise_M or (has_developer_enabled) then
-        page_utils.add_menubar_section({
-            section = page_utils.menu_sections.dev,
-            entries = {{
-                entry = page_utils.menu_entries.rest_api,
-                url = '/lua/swagger.lua'
-            }, {
-                entry = page_utils.menu_entries.analyze_pcap,
-                url = '/lua/upload_pcap.lua'
-            }, {
-                entry = page_utils.menu_entries.manage_data,
-                hidden = not is_admin,
-                url = '/lua/manage_data.lua'
-            }, {
-                entry = page_utils.menu_entries.checks_dev,
-                url = '/lua/checks_overview.lua'
-            }, {
-                entry = page_utils.menu_entries.alert_definitions,
-                url = '/lua/defs_overview.lua'
-            }, {
-                entry = page_utils.menu_entries.ts_definitions,
-                url = '/lua/ts_overview.lua'
-            }, {
-                entry = page_utils.menu_entries.directories,
-                url = '/lua/directories.lua'
-            }, {
-                entry = page_utils.menu_entries.api,
-                url = 'https://www.ntop.org/guides/ntopng/api/'
-            }}
-        })
-    end
-end
-
--- ##############################################
-
--- About
-if not is_enterprise_M or has_help_enabled then
-    page_utils.add_menubar_section({
-        section = page_utils.menu_sections.about,
-        hidden = info.oem,
-        entries = {{
-            entry = page_utils.menu_entries.about,
-            url = '/lua/about.lua'
-        }, {
-            entry = page_utils.menu_entries.license,
-            hidden = (not is_admin),
-            url = '/lua/license.lua'
-        }, {
-            entry = page_utils.menu_entries.limits,
-            hidden = (not is_admin),
-            url = '/lua/limits.lua'
-        }, {
-            entry = page_utils.menu_entries.blog,
-            url = 'http://blog.ntop.org/'
-        }, {
-            entry = page_utils.menu_entries.telegram,
-            url = 'https://t.me/ntop_community'
-        }, {
-            entry = page_utils.menu_entries.manual,
-            url = 'https://www.ntop.org/guides/ntopng/'
-        }, {
-            entry = page_utils.menu_entries.divider
-        }, {
-            entry = page_utils.menu_entries.report_issue,
-            url = 'https://github.com/ntop/ntopng/issues'
-        }, {
-            entry = page_utils.menu_entries.suggest_feature,
-            url = 'https://www.ntop.org/support/need-help-2/contact-us/'
-        }}
-    })
-
-end
-
--- ##############################################
-
-page_utils.print_menubar()
-
--- ##############################################
--- Interface
-
-print([[
-   <nav style="margin-top:-4.5rem;margin-right:5rem;" class="navbar navbar-expand-lg navbar-light px-2 navbar-main-top" id='n-navbar'>
-      <ul class='navbar-nav flex-row flex-wrap navbar-main-top'>
-         <li class='nav-item nav-item-mobile-button'>
-            <button class='btn btn-outline-dark border-0 btn-sidebar' data-bs-toggle='sidebar'>
-               <i class="fas fa-bars"></i>
-            </button>
-         </li>
- ]])
-
--- ##############################################
--- Interfaces Selector
-
-local views = {}
-local drops = {}
-local recording = {}
-local packetinterfaces = {}
-local zmqinterfaces = {}
-local pcapdump = {}
-local ifnames = {}
-local iftype = {}
-local ifHdescr = {}
-local observationPoints = nil
-local ifCustom = {}
-local dynamic = {}
-local action_urls = {}
-
-for v, k in pairs(iface_names) do
-    interface.select(k)
-
-    local ifid_stats = interface.getStats()
-    local is_pcap_dump = interface.isPcapDumpInterface()
-    local is_sub_interface = interface.isSubInterface()
-    local is_packet_interface = interface.isPacketInterface()
-    local is_zmq_interface = interface.isZMQInterface()
-
-    ifnames[ifid_stats.id] = k
-    action_urls[ifid_stats.id] = page_utils.switch_interface_form_action_url(ifId, ifid_stats.id, ifid_stats.type)
-
-    if is_pcap_dump then
-        pcapdump[ifid_stats.id] = true
-    end
-    if (ifid_stats.isView == true) then
-        views[ifid_stats.id] = true
-    end
-    if (is_sub_interface) then
-        dynamic[ifid_stats.id] = true
-    end
-    if (recording_utils.isEnabled(ifid_stats.id)) then
-        recording[ifid_stats.id] = true
-    end
-    if (is_packet_interface) then
-        packetinterfaces[ifid_stats.id] = true
-    end
-    if (is_zmq_interface) then
-        zmqinterfaces[ifid_stats.id] = true
-    end
-
-    if (ifid_stats.stats_since_reset.drops * 100 > ifid_stats.stats_since_reset.packets) then
-        drops[ifid_stats.id] = true
-    end
-
-    ifCustom[ifid_stats.id] = ifid_stats.customIftype
-
-    local descr = getHumanReadableInterfaceName(v)
-
-    -- Note: Ensure is_windows and is_enterprise_M are defined globally 
-    -- or check them here using ntop.isWindows(), etc.
-    if ntop.isWindows() and string.contains(descr, "{") then
-        descr = ifid_stats.description
-    elseif ntop.isEnterpriseM() and is_sub_interface and ifid_stats.dynamic_interface_probe_ip then
-        -- Attempt at printing SNMP information rather than plain disaggregated IPs
-        local snmp_utils = require "snmp_utils"
-        local snmp_cached_dev = require "snmp_cached_dev"
-        local cached_device = snmp_cached_dev:create(ifid_stats.dynamic_interface_probe_ip)
-        local snmp_name, snmp_if_name
-
-        if cached_device then
-            -- See if there is a name for this probe in SNMP
-            if cached_device.system and cached_device.system.name then
-                snmp_name = cached_device.system.name
-
-                -- Now check for the existance of the interface name
-                if ifid_stats.dynamic_interface_inifidx then
-                    if cached_device.interfaces and
-                        cached_device.interfaces[tostring(ifid_stats.dynamic_interface_inifidx)] then
-                        snmp_if_name = snmp_utils.get_snmp_interface_label(
-                            cached_device.interfaces[tostring(ifid_stats.dynamic_interface_inifidx)], true)
-                    else
-                        snmp_if_name = ifid_stats.dynamic_interface_inifidx
-                    end
-                end
-            end
-        end
-        if snmp_name then
-            -- Something has been found in SNMP
-            local fmt = ""
-
-            if snmp_if_name then
-                -- There's the interface name as well
-                fmt = string.format("%s [%s]", snmp_name, snmp_if_name)
-            else
-                -- Only the device name
-                fmt = string.format("%s", snmp_name)
-            end
-
-            if descr ~= ifid_stats.description then
-                -- There's a custom alias
-                descr = string.format("%s (%s)", descr, fmt)
-            else
-                descr = fmt
-            end
-        end
-    else
-        if descr ~= ifid_stats.description and not views[k] and not pcapdump[k] then
-            if descr == shortenCollapse(ifid_stats.description) then
-                descr = ifid_stats.description
-            else
-                if prefs.is_interface_name_only == false then
-                    -- Removed description that can be long with ZMQ
-                    descr = descr -- .. " (".. ifid_stats.description ..")" -- Add description
-                end
-            end
-        end
-    end
-    --   tprint({k, dynamic[k], ifid_stats.dynamic_interface_probe_ip, ifid_stats.dynamic_interface_inifidx})
-
-    ifHdescr[ifid_stats.id] = descr
-
-    if (current_ifid == ifid_stats.id) then
-        observationPoints = interface.getObsPointsInfo()["ObsPoints"] or {}
-    end
-end
-
--- The observationPoint menu is displayed only for the flow page
-if (table.len(observationPoints) > 0) and
-    ((page_utils.get_active_section() == "flows" and page_utils.get_active_entry() == "active_flows") or
-        ((page_utils.get_active_section() == "hosts") and (string.contains(_SERVER.QUERY_STRING, "page=flows")))) then
-    observationPointId = ntop.getUserObservationPointId()
-    if ((observationPointId == 0) and (_GET["observationPointId"] ~= 0)) then
-        observationPointId = _GET["observationPointId"]
-    end
-else
-    observationPoints = nil
-end
-
-interface.select(current_ifid)
-
-local context = {
-    ifnames = ifnames,
-    infrastructure_instances = infrastructure_instances,
-    infrastructure_view = infrastructure_view,
-    views = views,
-    dynamic = dynamic,
-    recording = recording,
-    pcapdump = pcapdump,
-    packetinterfaces = packetinterfaces,
-    zmqinterfaces = zmqinterfaces,
-    drops = drops,
-    ifHdescr = ifHdescr,
-    ifCustom = ifCustom,
-    action_urls = action_urls,
-    is_system_interface = is_system_interface,
-    currentIfaceId = current_ifid,
-    observationPoints = observationPoints,
-    observationPointId = observationPointId
-}
-
-print(template_utils.gen("pages/components/ifaces-dropdown.template", context))
-
--- ##############################################
--- Up/Down info
-if not is_pcap_dump and not is_system_interface and not infrastructure_view then
-
-    print([[
-      <li class='nav-item d-none d-sm-done d-md-flex d-lg-flex p-2'>
-         <div class='info-stats'>
-            ]] .. page_utils.generate_info_stats() .. [[
-         </div>
-      </li>
-   ]])
-
-end
-
--- License Badge
-local info = ntop.getInfo(true)
-
-if (_POST["ntopng_license"] == nil) and (info["pro.systemid"] and (info["pro.systemid"] ~= "")) then
-
-    if (info["pro.release"]) then
-
-        if (info["pro.demo_ends_at"] ~= nil) then
-
-            local rest = info["pro.demo_ends_at"] - os.time()
-
-            if (rest > 0) then
-                print('<li class="nav-item nav-link"><a href="https://shop.ntop.org"><span class="badge bg-warning">')
-                print(" " .. i18n("about.licence_expires_in", {
-                    time = secondsToTime(rest)
-                }))
-                print('</span></a></li>')
-            end
-        end
-
-    else
-        print(
-            '<li class="nav-item nav-link"><a class="ntopng-external-link" href="https://shop.ntop.org" class="badge bg-warning text-decoration-none">')
-        print(i18n("about.upgrade_to_professional") .. ' <i class="fas fa-external-link-alt"></i>')
-        print('</a></li>')
-    end
-end
-
--- ########################################
-
-if not infrastructure_view then
-
-    -- Network Load
-    print([[
-   <li class="network-load d-none d-lg-inline py-2"></li>
-]])
-
-end
-
--- ########################################
--- end of navbar-nav
-print('</ul>')
-
-print([[
-<ul class='navbar-nav flex-row ms-auto my-2'>
-]])
-
--- ########################################
--- Searchbox hosts
--- append searchbox
-
-if not infrastructure_view then
-    local json = require "dkjson"
-    local json_context = json.encode({
-        ifid = current_ifid
-    })
-    print("<li class='nav-item'>")
-    template_utils.render("pages/vue_page.template", {
-        vue_page_name = "SearchBox",
-        page_context = json_context
-    })
-    print("</li>")
-end
-
--- #########################################
--- User Navbar Menu
-
--- Render Blog Notifications
-if (not info.oem) then
-
-    local username = _SESSION["user"] or ''
-    if (is_no_login_user) then
-        username = 'no_login'
-    end
-
-    local posts, new_posts_counter = blog_utils.readPostsFromRedis(username)
-    template_utils.render("pages/components/blog-dropdown.template", {
-        posts = posts,
-        new_posts_counter = new_posts_counter,
-        username = username
-    })
-end
-
-print([[
-   <li class="nav-item dropdown">
-      <a href='#' class="nav-link dropdown-toggle dark-gray" id='manage-user-dropdown' role="button" data-bs-toggle="dropdown" aria-expanded="false">
-         <i class='fas fa-user'></i>
-      </a>
-      <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-lg-end" aria-labelledby='manage-user-dropdown'>]])
-
-if (not _SESSION["localuser"] or not is_admin) and (not is_no_login_user) then
-    print [[
-      <li>
-         <a class="dropdown-item" href='#password_dialog' data-bs-toggle='modal' onclick="reset_pwd_dialog(']]
-    print(_SESSION["user"])
-    print [[')">
-            <i class='fas fa-user'></i> ]]
-    print(i18n("manage_users.manage_user_x", {
-        user = _SESSION["user"]
-    }))
-    print [[
-         </a>
-      </li>
-   ]]
-else
-
-    if (not is_no_login_user) then
-        print([[<li><a class="dropdown-item" href=']] .. http_prefix .. [[/lua/admin/users.lua?user=]] ..
-                  session_user:gsub("%.", "\\\\\\\\.") .. [['><i class='fas fa-user'></i> ]] .. session_user ..
-                  [[</a></li>]])
-    else
-        print([[<li class='dropdown-item disabled'>]])
-        print([[<i class='fas fa-user'></i> ]] .. session_user .. [[]])
-        print([[</li>]])
-    end
-
-end
-
--- Render nendge services
-if is_nedge and is_admin then
-    print([[
-   <li class="dropdown-divider"></li>
-   <li class="dropdown-header">]] .. i18n("nedge.product_status", {
-        product = info.product
-    }) .. [[</li>
-   <li>
-      <a class="dropdown-item" href="#poweroff_dialog" data-bs-toggle="modal">
-         <i class="fas fa-power-off"></i> ]] .. i18n("nedge.power_off") .. [[
-      </a>
-   </li>
-   <li>
-      <a class="dropdown-item" href="#reboot_dialog" data-bs-toggle="modal">
-         <i class="fas fa-redo"></i> ]] .. i18n("nedge.reboot") .. [[
-      </a>
-   </li>
-]])
-end
-
--- Render Update Menu
-if hasSoftwareUpdatesSupport() then
-    print([[
-   <li class="dropdown-divider"></li>
-   <li class="dropdown-header" id="updates-info-li">]] .. i18n("updates.no_updates") .. [[.</li>
-   <li><a class='dropdown-item' href='#' id="updates-install-li"><i class="fas fa-sync"></i> ]] ..
-              (i18n("updates.check")) .. [[</a></li>
-]])
-end
-
--- Rende Toggle Dark theme menu button
-
-local theme_selector = ntop.getPref("ntopng.user." .. session_user .. ".theme")
-local theme_selected = i18n("toggle_dark_theme")
-
-if (theme_selector == 'dark') then
-    theme_selected = i18n("toggle_white_theme")
-end
-
-print([[
-   <li class='dropdown-divider'></li>
-   <li>
-      <a class='dropdown-item toggle-dark-theme' href='#'><i class="fas fa-adjust"></i> ]] .. theme_selected .. [[</a>
-   </li>
-]])
-
--- Logout
-
-if (not is_no_login_user) then
-    print [[
-
- <li class='dropdown-divider'></li>
- <li>
-   <a class="dropdown-item" href="]]
-    print(http_prefix)
-    print [[/lua/ntopng_logout.lua" onclick="return confirm(']]
-    print(i18n("login.logout_message"))
-    print [[')"><i class="fas fa-sign-out-alt"></i> ]]
-    print(i18n("login.logout"))
-    print [[</a></li>]]
-end
-
--- Restart menu, the restart JS code can be found inside footer.lua
-if (is_admin and ntop.isPackage() and not is_windows) then
-    print [[
-       <li class="dropdown-divider"></li>
-       <li><a class="dropdown-item restart-service" href="#"><i class="fas fa-redo-alt"></i> ]]
-    print(i18n("restart.restart"))
-    print [[</a></li>
-   ]]
-end
-
-print([[
-      </ul>
-   </li>
-</ul>
-
-   </nav>
-]])
-
--- begging of #n-container
-print([[<main id='n-container' class='px-md-4 px-sm-1'>]])
-
--- ###################################################
--- Render toasts
 toasts_manager.render_toasts("main-container", toasts_manager.load_main_toasts())
--- ###################################################
 
 print("<div class='main-alerts'>")
 
--- Hidden by default, will be shown by the footer if necessary
-print(
-    '<div id="influxdb-error-msg" class="alert alert-danger alert-dismissable" style="display:none" role="alert"><i class="fas fa-exclamation-triangle fa-lg" id="alerts-menu-triangle"></i> <span id="influxdb-error-msg-text"></span>')
-print [[<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>]]
-print('</div>')
+print('<div id="influxdb-error-msg" class="alert alert-danger alert-dismissable" style="display:none" role="alert">' ..
+   '<i class="fas fa-exclamation-triangle fa-lg"></i> ' ..
+   '<span id="influxdb-error-msg-text"></span>' ..
+   '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' ..
+   '</div>')
 
--- Hidden by default, will be shown by the footer if necessary
-print(
-    '<div id="major-release-alert" class="alert alert-info" style="display:none" role="alert"><i class="fas fa-cloud-download-alt" id="alerts-menu-triangle"></i> <span id="ntopng_update_available"></span>')
-print('</div>')
+print('<div id="major-release-alert" class="alert alert-info" style="display:none" role="alert">' ..
+   '<i class="fas fa-cloud-download-alt"></i> ' ..
+   '<span id="ntopng_update_available"></span>' ..
+   '</div>')
 
--- See if we are starting up and display an informative message
-local secs_to_first_data = interface.getSecsToFirstData()
-
--- Do not show messages that stay too short on screen (5 sec or more)
-if secs_to_first_data > 5 then
-    print [[
-<div class="alert alert-primary" role="alert" id='starting-up-msg'>
-  <div class="spinner-border spinner-border-sm text-primary" role="status">
-    <span class="sr-only">Loading...</span>
-  </div> ]]
-    print(i18n("restart.just_started", {
-        product = info.product,
-        when = format_utils.secondsToTime(secs_to_first_data),
-        url = "https://www.ntop.org/guides/ntopng/basic_concepts/stats.html"
-    }))
-    print [[
-</div>
-
-<script type="text/javascript">
-  const msecs_to_first_data = ]]
-    print(string.format("%u", secs_to_first_data * 1000))
-    print [[;
-  const pad2 =(n) => {
-     return (n < 10 ? '0' : '') + n;
-  };
-  const fGetDateTimeString = (dLocal) => {
-    if (dLocal.getUTCDate() > 1) {
-      return `${dLocal.getUTCDate() - 1} ${i18n('metrics.days')}, ${pad2(dLocal.getUTCHours())}:${pad2(dLocal.getUTCMinutes())}:${pad2(dLocal.getUTCSeconds())}`;
-    }
-    if (dLocal.getUTCHours() > 0) {
-      return `${pad2(dLocal.getUTCHours())}:${pad2(dLocal.getUTCMinutes())}:${pad2(dLocal.getUTCSeconds())}`;
-    }
-    return `${pad2(dLocal.getUTCMinutes())}:${pad2(dLocal.getUTCSeconds())}`;
-  };
-  const hide_starting_up_msg = function() {
-    $("#starting-up-msg").hide();
-  };
-  setTimeout(hide_starting_up_msg, msecs_to_first_data);
-  let startDateTime = new Date();
-
-  let interval = setInterval(() => {
-    let offset = new Date() - startDateTime;
-    if (offset > msecs_to_first_data) { clearInterval(interval); return; }
-    let dLocal = new Date(msecs_to_first_data - offset);
-    $("#starting-up-msg > span").text(fGetDateTimeString(dLocal));
-  }, 2000);
-  
-  //setTimeout(() => clearInterval(interval), msecs_to_first_data);
-</script>
-]]
-end
-
-if (_SESSION["INVALID_CSRF"]) then
-    print(
-        '<div class="alert alert-warning alert-dismissable" role="alert"><i class="fas fa-exclamation-triangle fa-lg" id="alerts-menu-triangle"></i> ')
-    print(i18n("expired_csrf"))
-    print [[<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>]]
-    print('</div>')
-end
-
--- end of main alerts
 print("</div>")
-
--- append password change modal
-if (not is_admin) then
-    dofile(dirs.installdir .. "/scripts/lua/inc/password_dialog.lua")
-end
diff --git a/scripts/lua/modules/ntopng_menu_visibility.lua b/scripts/lua/modules/ntopng_menu_visibility.lua
new file mode 100644
index 0000000000..15240f19a2
--- /dev/null
+++ b/scripts/lua/modules/ntopng_menu_visibility.lua
@@ -0,0 +1,284 @@
+--
+-- (C) 2013-26 - ntop.org
+--
+
+--
+-- Exports two functions:
+--   get_flags()          -> flat table of named boolean flags used by entry_hidden checks
+--   get_dynamic_entries(section_key, flags, page_utils, http_prefix)
+--                        -> array of extra {key,label,url,is_divider} rows injected by
+--                          page_utils.scripts_menu, nedge, appliance, etc.
+--
+
+local ntopng_menu_visibility = {}
+
+function ntopng_menu_visibility.get_flags()
+   local page_utils     = require "page_utils"
+   local auth           = require "auth"
+   local behavior_utils = require "behavior_utils"
+   local vs_utils       = require "vs_utils"
+
+   local prefs        = ntop.getPrefs()
+   local info         = ntop.getInfo(true)
+   local ifid_stats   = interface.getStats()
+   local current_ifid = interface.getId()
+   local is_admin     = isAdministrator()
+   local http_prefix  = ntop.getHttpPrefix()
+
+   local is_system_interface  = toboolean(page_utils.is_system_view())
+   local system_ifid          = getSystemInterfaceId()
+   local is_nedge             = ntop.isnEdge()
+   local is_nedge_enterprise  = ntop.isnEdgeEnterprise()
+   local is_routing_mode      = is_nedge and ntop.isRoutingMode() or false
+   local is_enterprise        = ntop.isEnterprise()
+   local is_enterprise_m      = ntop.isEnterpriseM()
+   local is_enterprise_l      = ntop.isEnterpriseL()
+   local is_enterprise_xl     = ntop.isEnterpriseXL()
+   local is_pro               = ntop.isPro()
+   local is_appliance         = ntop.isAppliance()
+   local is_windows           = ntop.isWindows()
+   local is_oem               = (info.oem == true)
+
+   local has_ch_support      = hasClickHouseSupport()
+   local is_influxdb         = (ntop.getPref("ntopng.prefs.timeseries_driver") == "influxdb")
+   local asset_inventory     = assetsInventoryEnabled()
+   local is_geoip            = ntop.hasGeoIP()
+   local limit_resources     = ntop.limitResourcesUsage()
+   local has_dump_cache      = ntop.hasDumpCache()
+   local has_local_auth      = (ntop.getPref("ntopng.prefs.local.auth_enabled") ~= "0")
+   local has_nanalyst        = page_utils.has_nanalyst and page_utils.has_nanalyst()
+   local has_developer_menu  = (ntop.getPref("ntopng.prefs.menu_entries.developer") ~= "0")
+   local has_help_menu       = (ntop.getPref("ntopng.prefs.menu_entries.help") ~= "0")
+   local is_asn_mode         = isASNModeEnabled()
+
+   local is_pcap_dump        = interface.isPcapDumpInterface()
+   local is_db_view          = interface.isDatabaseViewInterface()
+   local is_viewed_interface = interface.isViewed()
+   local is_zmq_interface    = interface.isZMQInterface()
+   local is_loopback         = interface.isLoopback()
+   local is_discoverable     = interface.isDiscoverableInterface()
+   local has_vlans           = interface.hasVLANs()
+   local is_viewed           = (ifid_stats.isViewed == true)
+   local is_db_type          = (ifid_stats["type"] == "db")
+   local has_hr_flows        = (ifid_stats["has_hr_flows"] == true)
+   local has_macs            = (ifid_stats.has_macs == true)
+   local has_seen_pods       = (ifid_stats.has_seen_pods == true)
+   local has_seen_containers = (ifid_stats.has_seen_containers == true)
+
+   local flowDevices    = (interface.getFlowDevices and interface.getFlowDevices()) or {}
+   local sFlowDevices   = interface.getSFlowDevices() or {}
+   local obsInfo        = interface.getObsPointsInfo() or {}
+   local num_obs_points = obsInfo.numObsPoints or 0
+
+   local infrastructure_view = false
+   infrastructure_view, _ = isInfrastructureView()
+
+   -- capability shortcuts
+   local cap_alerts     = auth.has_capability(auth.capabilities.alerts)
+   local cap_checks     = auth.has_capability(auth.capabilities.checks)
+   local cap_hist_flows = auth.has_capability(auth.capabilities.historical_flows)
+   local cap_developer  = auth.has_capability(auth.capabilities.developer)
+
+   -- computed compound flags
+   local has_exporters            = (ifid_stats.type == "zmq") or (ifid_stats.type == "custom") or
+                                    (is_pro and (table.len(flowDevices) > 0))
+   local service_map_available, _ = behavior_utils.mapsAvailable()
+   local vs_available             = vs_utils.is_available()
+   local has_bgp_server           = not (isEmptyString(ntop.getPref("ntopng.prefs.bgp_server.ip_address")) or
+                                         isEmptyString(ntop.getPref("ntopng.prefs.bgp_server.port")))
+
+   local devices_exclusion_enabled = false
+   local checks_config = require("checks").getConfigset()["config"]
+   if checks_config and checks_config["interface"] and
+      checks_config["interface"]["device_connection_disconnection"] and
+      checks_config["interface"]["device_connection_disconnection"]["min"]["enabled"] then
+      devices_exclusion_enabled = true
+   end
+
+   local is_system_ifid     = (tonumber(system_ifid) == tonumber(current_ifid))
+   local is_allowed_sys_iface = isAllowedSystemInterface()
+
+   return {
+      -- interface state
+      is_pcap_dump              = is_pcap_dump,
+      is_system_interface       = is_system_interface,
+      no_system_interface       = not is_system_interface,
+      is_db_view_interface      = is_db_view,
+      is_viewed                 = is_viewed,
+      is_viewed_interface       = is_viewed_interface,
+      is_zmq_interface          = is_zmq_interface,
+      is_loopback_interface     = is_loopback,
+      no_discoverable_interface = not is_discoverable,
+      is_asn_mode_enabled       = is_asn_mode,
+      no_asn_mode               = not is_asn_mode,
+      infrastructure_view       = infrastructure_view,
+      is_db_type                = is_db_type,
+      no_vlans                  = not has_vlans,
+      no_macs                   = not has_macs,
+      no_pods                   = not has_seen_pods,
+      no_containers             = not has_seen_containers,
+      no_obs_points             = (num_obs_points == 0),
+      no_sflow_devices          = (table.len(sFlowDevices) == 0),
+      no_exporters              = not has_exporters,
+      no_hr_flows               = not has_hr_flows,
+      no_bgp_server             = not has_bgp_server,
+      no_service_map            = not service_map_available,
+      no_vs_utils               = not vs_available,
+
+      -- user/admin
+      is_admin                    = is_admin,
+      no_admin                    = not is_admin,
+      no_local_auth_or_local_user = (not _SESSION["localuser"] and not has_local_auth),
+
+      -- features / capabilities
+      alerts_disabled  = not prefs.are_alerts_enabled,
+      no_alerts_cap    = not cap_alerts,
+      no_checks_cap    = not cap_checks,
+      no_developer_cap = not cap_developer,
+
+      -- license / edition
+      is_pro            = is_pro,
+      no_pro            = not is_pro,
+      is_nedge          = is_nedge,
+      is_nedge_enterprise = is_nedge_enterprise,
+      is_routing_mode   = is_routing_mode,
+      is_oem            = is_oem,
+      is_windows        = is_windows,
+      is_appliance      = is_appliance,
+      is_allowed_sys_iface = is_allowed_sys_iface,
+      limit_resource_usage = limit_resources,
+
+      -- enterprise tiers
+      no_enterprise             = not is_enterprise,
+      no_enterprise_m           = not is_enterprise_m,
+      no_enterprise_l           = not is_enterprise_l,
+      no_enterprise_xl          = not is_enterprise_xl,
+      no_enterprise_l_or_nedge  = (not is_enterprise_l and not is_nedge_enterprise),
+      no_enterprise_m_or_nedge  = (not is_enterprise_m and not is_nedge_enterprise),
+      no_enterprise_m_no_windows = (not is_enterprise_m or is_windows),
+
+      -- compound conditions
+      no_ch_support             = not has_ch_support,
+      no_influxdb               = not is_influxdb,
+      no_asset_inventory        = not asset_inventory,
+      no_geoip                  = not is_geoip,
+      no_dump_cache             = not has_dump_cache,
+      no_nanalyst               = not has_nanalyst,
+      no_developer_menu         = (not has_developer_menu) and is_enterprise_m,
+      no_help_menu              = (not has_help_menu) and is_enterprise_m,
+      no_devices_exclusion      = not devices_exclusion_enabled,
+      is_system_ifid            = is_system_ifid,
+      pro_forced_community      = (info["pro.forced_community"] == true),
+
+      -- complex compound
+      no_enterprise_with_ch               = not (is_enterprise and has_ch_support),
+      no_enterprise_or_nedge_with_ch_hist = (not is_enterprise and not is_nedge_enterprise) or
+                                            not cap_hist_flows or not has_ch_support,
+   }
+end
+
+
+-- get_dynamic_entries: returns plugin/nedge/appliance-injected menu rows
+-- for sections that can be extended at runtime.
+--
+-- Each returned entry is already resolved: {key, label, url, is_divider}
+-- Hidden entries are simply omitted.
+function ntopng_menu_visibility.get_dynamic_entries(section_key, flags, page_utils, http_prefix)
+   local entries = {}
+
+   -- health
+   if section_key == "health" then
+      if page_utils.scripts_menu then
+         for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
+            if entry.menu_entry.section == page_utils.menu_sections.health.key then
+               local label_raw = i18n(entry.menu_entry.i18n or entry.menu_entry.key)
+               entries[#entries + 1] = {
+                  key        = entry.menu_entry.key,
+                  label      = (type(label_raw) == "string") and label_raw or entry.menu_entry.key,
+                  url        = http_prefix .. entry.url,
+                  is_divider = false,
+               }
+            end
+         end
+      end
+
+   -- pollers
+   elseif section_key == "pollers" then
+      if page_utils.scripts_menu then
+         for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
+            if entry.menu_entry.section == page_utils.menu_sections.pollers.key then
+               local label_raw = i18n(entry.menu_entry.i18n or entry.menu_entry.key)
+               entries[#entries + 1] = {
+                  key        = entry.menu_entry.key,
+                  label      = (type(label_raw) == "string") and label_raw or entry.menu_entry.key,
+                  url        = http_prefix .. entry.url,
+                  is_divider = false,
+               }
+            end
+         end
+      end
+
+   -- system_stats: nedge / appliance entries
+   elseif section_key == "system_stats" then
+      -- script-injected (skip pollers, those live under pollers section)
+      if page_utils.scripts_menu then
+         for k, entry in pairsByField(page_utils.scripts_menu, "sort_order", rev) do
+            if entry.menu_entry.section ~= "pollers" then
+               local label_raw = i18n(entry.menu_entry.i18n or entry.menu_entry.key)
+               entries[#entries + 1] = {
+                  key        = entry.menu_entry.key,
+                  label      = (type(label_raw) == "string") and label_raw or entry.menu_entry.key,
+                  url        = http_prefix .. entry.url,
+                  is_divider = false,
+               }
+            end
+         end
+      end
+
+      -- nedge entries
+      if flags.is_nedge then
+         if #entries > 0 and not flags.no_admin then
+            entries[#entries + 1] = { key = "divider", is_divider = true }
+         end
+         local nedge_rows = {
+            { key = "system_setup",       i18n_key = "nedge.system_setup",       url = "/lua/system_setup_ui/interfaces.lua", hidden = flags.no_admin },
+            { key = "dhcp_static_leases", i18n_key = "nedge.dhcp_static_leases", url = "/lua/pro/nedge/admin/dhcp_leases.lua", hidden = flags.no_admin or not flags.is_routing_mode },
+            { key = "dhcp_active_leases", i18n_key = "nedge.dhcp_active_leases", url = "/lua/pro/nedge/admin/dhcp_active_leases.lua", hidden = flags.no_admin or not flags.is_routing_mode },
+            { key = "port_forwarding",    i18n_key = "nedge.port_forwarding",    url = "/lua/pro/nedge/admin/port_forwarding.lua", hidden = flags.no_admin or not flags.is_routing_mode },
+            { key = "rules_config",       i18n_key = "nedge.rules_config",       url = "/lua/pro/nedge/admin/rules_config.lua", hidden = flags.no_admin or not flags.is_routing_mode },
+            { key = "forwarders_config",  i18n_key = "nedge.forwarders_config",  url = "/lua/pro/nedge/admin/forwarders_config.lua", hidden = flags.no_admin or not flags.is_routing_mode },
+         }
+         for _, r in ipairs(nedge_rows) do
+            if not r.hidden then
+               local label_raw = i18n(r.i18n_key)
+               entries[#entries + 1] = {
+                  key        = r.key,
+                  label      = (type(label_raw) == "string") and label_raw or r.key,
+                  url        = http_prefix .. r.url,
+                  is_divider = false,
+               }
+            end
+         end
+      end
+
+      -- appliance entries
+      if flags.is_appliance then
+         if #entries > 0 and not flags.no_admin then
+            entries[#entries + 1] = { key = "divider", is_divider = true }
+         end
+         if not flags.no_admin then
+            local label_raw = i18n("nedge.system_setup")
+            entries[#entries + 1] = {
+               key        = "system_setup",
+               label      = (type(label_raw) == "string") and label_raw or "system_setup",
+               url        = http_prefix .. "/lua/system_setup_ui/mode.lua",
+               is_divider = false,
+            }
+         end
+      end
+   end
+
+   return entries
+end
+
+return ntopng_menu_visibility
diff --git a/scripts/lua/modules/page_utils.lua b/scripts/lua/modules/page_utils.lua
index 56a7cf4f36..a9c118a98c 100644
--- a/scripts/lua/modules/page_utils.lua
+++ b/scripts/lua/modules/page_utils.lua
@@ -929,7 +929,7 @@ end
 
 -- NOTE: this function must be called after page_utils.print_header_and_set_active_menu_entry
 function page_utils.print_page_title(title, mini_title)
-    local help_link = page_utils.menu_entries[active_entry].help_link or ""
+    local help_link = (page_utils.menu_entries[active_entry] or {}).help_link or ""
     print("<header class='mb-3 d-flex align-items-center'>")
     print("<h2 class='d-inline-block'>" .. title .. "</h2>")
     if (not isEmptyString(help_link)) then
@@ -958,7 +958,8 @@ function page_utils.print_header_and_set_active_menu_entry(entry, i18n_params, a
         active_sub_entry = entry.subkey
     end
 
-    page_utils.print_header(alt_title or i18n(entry.i18n_title, i18n_params) or entry.i18n_title)
+    local _title_key = entry.i18n_title
+    page_utils.print_header(alt_title or (_title_key and i18n(_title_key, i18n_params)) or _title_key or entry.key or "")
 end
 
 -- #################################
@@ -1063,15 +1064,14 @@ function page_utils.print_header(title, addLoginJS)
     print(http_prefix)
     print [[/dist/white-mode.css?]]
     print(static_file_epoch)
-    print [[" rel="stylesheet">]]
-
-    if (dark_mode) then
-        print [[<link href="]]
-        print(http_prefix)
-        print [[/dist/dark-mode.css?]]
-        print(static_file_epoch)
-        print [[" rel="stylesheet">]]
-    end
+    print [[" rel="stylesheet">
+    <link id="dark-mode-css" href="]]
+    print(http_prefix)
+    print [[/dist/dark-mode.css?]]
+    print(static_file_epoch)
+    print [["]]
+    if not dark_mode then print [[ disabled]] end
+    print [[ rel="stylesheet">]]
 
     if (ntop.isPro() or ntop.isnEdge()) and ntop.exists(dirs.installdir .. "/httpdocs/img/custom_favicon.ico") then
         favicon_path = http_prefix .. "/img/custom_favicon.ico"
@@ -1241,8 +1241,8 @@ end
 -- #################################
 
 function page_utils.get_navbar_context(title, base_url, items_table, label_url, back_url)
-    local help_link = page_utils.menu_entries[active_entry].help_link or nil
-    local icon = page_utils.menu_sections[active_section].icon or ""
+    local help_link = (page_utils.menu_entries[active_entry] or {}).help_link or nil
+    local icon = (page_utils.menu_sections[active_section] or {}).icon or ""
 
     local navbar = {
         main_icon = icon,
@@ -1259,8 +1259,8 @@ end
 -- #################################
 
 function page_utils.get_new_navbar_context(title, base_url, items_table, label_url, back_url)
-    local help_link = page_utils.menu_entries[active_entry].help_link or nil
-    local icon = page_utils.menu_sections[active_section].icon or ""
+    local help_link = (page_utils.menu_entries[active_entry] or {}).help_link or nil
+    local icon = (page_utils.menu_sections[active_section] or {}).icon or ""
 
     local navbar = {
         main_title = {
@@ -1278,8 +1278,8 @@ end
 -- #################################
 
 function page_utils.print_navbar(title, base_url, items_table, label_url, back_url, end_items)
-    local help_link = page_utils.menu_entries[active_entry].help_link or nil
-    local icon = page_utils.menu_sections[active_section].icon or ""
+    local help_link = (page_utils.menu_entries[active_entry] or {}).help_link or nil
+    local icon = (page_utils.menu_sections[active_section] or {}).icon or ""
 
     local context = {
         navbar = {
@@ -1295,272 +1295,6 @@ function page_utils.print_navbar(title, base_url, items_table, label_url, back_u
     print(template_utils.gen("pages/components/page-navbar.template", context))
 end
 
--- #################################
-local menubar_structure = {}
-
-function page_utils.init_menubar()
-    menubar_structure = {}
-end
-
--- #################################
-
-function page_utils.add_menubar_section(section)
-    menubar_structure[#menubar_structure + 1] = section
-end
-
--- #################################
-
-local function print_submenu(section, container_list_name)
-    local active_subpage = page_utils.get_active_entry()
-    local active_subsubpage = page_utils.get_active_sub_entry()
-    local section_key = section.section.key
-    local section_id = section_key .. "-submenu"
-    local list_name = section_id .. "-list"
-
-    print [[<div data-parent='#]]
-    print(container_list_name)
-    print [[' class='collapse side-collapse' id=']]
-    print(section_id)
-    print [['>
-          <ul class='nav flex-column' id=']]
-    print(list_name)
-    print [['>
-            ]]
-
-    for _, section_entry in ipairs(section.entries) do
-        if not section_entry.hidden then
-            if section_entry.custom then
-                print(section_entry.custom)
-            elseif section_entry.entry.key == "divider" then
-                print [[
-           <li class="dropdown-divider"></li>
-                  ]]
-            else
-                local external_link = false
-                local section_has_submenu = section_entry.entries
-                local active = false
-
-                if section_entry.entry and (section_entry.entry.key == active_subpage and
-                    (not section_entry.entry.subkey or section_entry.entry.subkey == active_subsubpage)) then
-                    active = true
-                end
-
-                if section_entry.url:starts("http") then
-                    -- Absolute (external) url
-
-                    external_link = true
-                end
-                print [[
-         <li class=']]
-                if active then
-                    print("active")
-                end
-                print [['>
-
-             <a class="]]
-                if section_has_submenu then
-                    print [[submenu ]]
-                end
-                if active then
-                    print [[active ]]
-                end
-                if external_link == true then
-                    print [[ntopng-external-link ]]
-                end
-                print [["]]
-
-                if section_has_submenu then
-                    print [[ data-bs-toggle="collapse" ]]
-                end
-                print [[href="]]
-                if section_has_submenu then
-                    local submenu_section_key = section_entry.section.key
-                    local submenu_section_id = submenu_section_key .. "-submenu"
-                    print("#" .. submenu_section_id)
-                else
-                    if external_link then
-                        print(section_entry.url)
-                    else
-                        print(ntop.getHttpPrefix() .. section_entry.url)
-                    end
-                end
-                print [["]]
-
-                if section_entry.entry.is_modal then
-                    print(' data-bs-toggle="modal"')
-                end
-
-                if external_link then
-                    -- Open in a new page
-                    print(' target="_blank"')
-                end
-
-                print [[>]]
-                print(i18n(section_entry.entry.i18n_title) or section_entry.entry.i18n_title)
-                if section_entry.suffix then
-                    print(section_entry.suffix)
-                end
-                if external_link then
-                    print(" <i class='fas fa-external-link-alt'></i>")
-                end
-
-                print [[</a>]]
-
-                if section_has_submenu then
-                    print_submenu(section_entry, list_name)
-                end
-
-                print [[</li>
-   ]]
-            end
-        end
-    end
-
-    print [[
-          </ul>
-        </div>
-   ]]
-end
-
--- #################################
-
-local function print_section(section, list_name)
-    local active_page = page_utils.get_active_section()
-    local show_section = false
-    local section_has_submenu = (section.entries and #section.entries > 0)
-
-    if (not section.hidden) then
-        if not section_has_submenu then
-            show_section = true
-        else
-            -- The section is shown only if at least one of its sub entries
-            -- is shown
-            for _, section_entry in pairs(section.entries or {}) do
-                if not section_entry.hidden then
-                    show_section = true
-                    break
-                end
-            end
-        end
-    end
-
-    if show_section then
-        local section_key = section.section.key
-        local section_id = section_key .. "-submenu"
-
-        print [[
-      <li class="nav-item ]]
-        print(active_page == section_key and 'active' or '')
-        print [[">
-    <a class="]]
-
-        if section_has_submenu then
-            print [[submenu ]]
-        end
-
-        if active_page == section_key then
-            print [[active ]]
-        end
-
-        print [[" ]]
-
-        if section_has_submenu then
-            print [[ data-bs-toggle="collapse" ]]
-        end
-
-        print [[href="]]
-
-        if section.url then
-            print(ntop.getHttpPrefix() .. section.url)
-        else
-            print("#" .. section_id)
-        end
-
-        print [[">
-      <span class="]]
-        print(section.section.icon)
-        print [["></span> ]]
-        print(i18n(section.section.i18n_title))
-        print [[
-    </a>]]
-
-        if section_has_submenu then
-            print_submenu(section, list_name)
-        end
-    end
-end
-
--- #################################
-
-function page_utils.print_menubar()
-    local is_system_interface = page_utils.is_system_view()
-    local logo_path = nil
-    local list_name = "sidebar"
-
-    if (ntop.isPro() or ntop.isnEdge()) and ntop.exists(dirs.installdir .. "/httpdocs/img/custom_logo.png") then
-        logo_path = ntop.getHttpPrefix() .. "/img/custom_logo.png"
-    end
-
-    local navbar_style = _POST["toggle_theme"] or ntop.getPref("ntopng.user." .. _SESSION["user"] .. ".theme")
-
-    if ((navbar_style == nil) or (navbar_style == "white") or (navbar_style == "")) then
-        navbar_style = "default"
-    end
-
-    if (navbar_style == "default") then
-        navbar_style = "dark"
-    end
-
-    print('<nav id="n-sidebar" class="bg-' .. navbar_style .. ' py-0 px-2">')
-    print([[
-      <div class="mobile-menu-button d-flex">
-            <form class='w-100' method='post' action="/?">
-               <input hidden name='switch_interface' value='1' />
-               <input hidden name='csrf' value=']] .. ntop.getRandomCSRFValue() .. [[' />
-               ]] .. template_utils.gen("pages/components/ifaces-select.template", {
-        ifaces = page_utils.get_interface_list(),
-        is_sys_iface = is_system_interface
-    }) .. [[
-            </form>
-            <button data-bs-toggle="]] .. list_name .. [[" class='ms-5 my-auto btn btn-close'></button>
-      </div>
-      <div class="mobile-menu-stats">
-      ]])
-
-    -- the network load will not be displayed in system view mode
-    if not is_system_interface then
-        print([[<div class="network-load mb-2 w-100"></div>]])
-    end
-
-    print([[
-         <div class="info-stats w-100">]] .. page_utils.generate_info_stats() .. [[</div>
-      </div>
-   ]])
-    print("<h3 class='muted'><a href='" .. ntop.getHttpPrefix() .. "/'>")
-
-    if (logo_path ~= nil) then
-        print("<img class=\"logo-brand\" height=\"52px\" src=\"" .. logo_path .. "\" alt='Custom Logo' />")
-    else
-        print(addLogoSvg())
-    end
-
-    print([[
-           </a>
-     </h3>
-
-     <ul class="nav-side mb-4" id=']] .. list_name .. [['>
-]])
-
-    for _, section in ipairs(menubar_structure) do
-        print_section(section, list_name)
-    end
-
-    print([[
-     </ul>
-   </nav>
-]])
-end
-
 -- ##############################################
 
 function page_utils.get_interface_list()
diff --git a/scripts/lua/rest/v2/get/timeseries/batch.lua b/scripts/lua/rest/v2/get/timeseries/batch.lua
index 9aa4daf1dd..f55c5d0f86 100644
--- a/scripts/lua/rest/v2/get/timeseries/batch.lua
+++ b/scripts/lua/rest/v2/get/timeseries/batch.lua
@@ -121,6 +121,7 @@ local function get_schema_info(schema_name)
                                 info.series_meta[series_id] = {
                                     label            = smeta.label or series_id,
                                     invert_direction = smeta.invert_direction or false,
+                                    color            = smeta.color,
                                 }
                             end
                         end
@@ -224,6 +225,9 @@ if queries and type(queries) == "table" then
                     if smeta then
                         serie.label            = smeta.label
                         serie.invert_direction = smeta.invert_direction
+                        if smeta.color then
+                            serie.color = smeta.color
+                        end
                     end
                 end
             end