peter/infix
1
0
Fork 0
mirror of https://github.com/kernelkit/infix.git synced 2026-07-22 01:13:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

webui: reorganise sidebar and rename Dashboard to Overview

Browse Source 
Group nav items by purpose:
- Security: Firewall, WireGuard, NACM
- Services: Services, DHCP, NTP, LLDP, mDNS (moved from Network)
- Network trimmed to: Interfaces, Routing, WiFi

Rename Dashboard → Overview for clearer Status > System > Overview
navigation hierarchy.

Signed-off-by: Joachim Wiberg <troglobit@gmail.com>
This commit is contained in:
Joachim Wiberg
2026-06-14 22:07:35 +02:00
parent 7ac15796e3
commit 8b10678dee
22 changed files with 102 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/webui/static/css/style.css
+24 -20
View File
@@ -54,6 +54,7 @@
--dot-color: rgba(0, 0, 0, 0.055);
/* Layout */
--topbar-height: 48px;
--radius: 8px;
--radius-sm: 4px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -174,7 +175,8 @@ a:hover {
.layout {
display: flex;
height: 100vh;
height: calc(100vh - var(--topbar-height));
margin-top: var(--topbar-height);
overflow: hidden;
}
@@ -210,13 +212,9 @@ a:hover {
Sidebar Components
========================================================================== */
.sidebar-header {
padding: 1.5rem 1.25rem;
}
.sidebar-logo {
max-width: 100%;
height: auto;
.topbar-logo {
height: calc(var(--topbar-height) - 14px);
width: auto;
display: block;
}
@@ -246,8 +244,8 @@ details.nav-group-top > summary.nav-group-summary-top {
opacity: 0.7;
padding: 0.75rem 1rem 0.375rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.35rem;
user-select: none;
transition: opacity 0.15s;
}
@@ -255,11 +253,11 @@ details.nav-group-top > summary.nav-group-summary-top:hover { opacity: 1; }
details.nav-group-top > summary.nav-group-summary-top::-webkit-details-marker { display: none; }
details.nav-group-top > summary.nav-group-summary-top::marker { display: none; }
details.nav-group-top > summary.nav-group-summary-top::after {
details.nav-group-top > summary.nav-group-summary-top::before {
content: '▸';
font-size: 0.7rem;
}
details[open].nav-group-top > summary.nav-group-summary-top::after {
details[open].nav-group-top > summary.nav-group-summary-top::before {
content: '▾';
}
@@ -1646,15 +1644,18 @@ details.fw-hint[open] summary::before { transform: rotate(90deg); }
========================================================================== */
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding: 0 1rem;
height: 48px;
height: var(--topbar-height);
background: var(--sidebar-bg);
border-bottom: 1px solid var(--sidebar-border);
flex-shrink: 0;
z-index: 100;
z-index: 200;
}
.topbar-right {
@@ -1826,10 +1827,10 @@ details.fw-hint[open] summary::before { transform: rotate(90deg); }
@media (max-width: 1024px) {
#sidebar {
position: fixed;
top: 0;
top: var(--topbar-height);
left: 0;
height: 100%;
z-index: 300;
height: calc(100vh - var(--topbar-height));
z-index: 150;
transform: translateX(-100%);
transition: transform 0.25s ease;
width: var(--sidebar-width);
@@ -1842,9 +1843,12 @@ details.fw-hint[open] summary::before { transform: rotate(90deg); }
body.sidebar-open::after {
content: '';
position: fixed;
inset: 0;
top: var(--topbar-height);
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 200;
z-index: 140;
}
#content {
src/webui/static/img/icons/advanced.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="21" y1="4" x2="14" y2="4"/>
<line x1="10" y1="4" x2="3" y2="4"/>
<line x1="21" y1="12" x2="12" y2="12"/>
<line x1="8" y1="12" x2="3" y2="12"/>
<line x1="21" y1="20" x2="16" y2="20"/>
<line x1="12" y1="20" x2="3" y2="20"/>
<line x1="14" y1="2" x2="14" y2="6"/>
<line x1="8" y1="10" x2="8" y2="14"/>
<line x1="16" y1="18" x2="16" y2="22"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 532 B

src/webui/static/img/icons/dhcp.svg
+8 -3
View File
@@ -1,4 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 13h2l2 4 4-10 4 6h4"></path>
<path d="M16 3l4 4-4 4"></path>
</svg>
<rect x="6" y="3" width="12" height="5" rx="1"/>
<line x1="9" y1="8" x2="6" y2="15"/>
<line x1="12" y1="8" x2="12" y2="15"/>
<line x1="15" y1="8" x2="18" y2="15"/>
<circle cx="6" cy="17" r="2"/>
<circle cx="12" cy="17" r="2"/>
<circle cx="18" cy="17" r="2"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 242 B

After

Width:  |  Height:  |  Size: 439 B

src/webui/static/img/icons/iface-bridge.svg
-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 20h16"></path>
<path d="M4 16h16"></path>
<path d="M4 12h16"></path>
<path d="M2 8a5 5 0 0 1 10 0 5 5 0 0 1 10 0"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 307 B

src/webui/static/img/icons/iface-container.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 421 B

src/webui/static/img/icons/iface-ethernet.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 13.5h3L7.5 7h4l3 10h4l2.5-6.5h3"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 220 B

src/webui/static/img/icons/iface-gre.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="6" width="20" height="12" rx="6"></rect>
<path d="M7 12h10"></path>
<path d="M14 9l3 3-3 3"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 286 B

src/webui/static/img/icons/iface-lag.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 20V4"></path>
<path d="M16 20V4"></path>
<path d="M4 12h16"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 251 B

src/webui/static/img/icons/iface-veth.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="6" cy="12" r="4"></circle>
<circle cx="18" cy="12" r="4"></circle>
<line x1="10" y1="12" x2="14" y2="12"></line>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 296 B

src/webui/static/img/icons/iface-vlan.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
<polyline points="2 17 12 22 22 17"></polyline>
<polyline points="2 12 12 17 22 12"></polyline>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 321 B

src/webui/static/img/icons/iface-vxlan.svg
-3
View File
@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17.5 19c0-1.7-1.3-3-3-3h-9c-2.8 0-5-2.2-5-5s2.2-5 5-5c.6 0 1.2.1 1.8.3C8.5 3.5 11 2 13.5 2c3.5 0 6.4 2.6 6.9 6h.1c2.5 0 4.5 2 4.5 4.5s-2 2.5-4.5 2.5"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 335 B

src/webui/static/img/icons/iface-wifi.svg
-6
View File
@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
<path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
<path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
<line x1="12" y1="20" x2="12.01" y2="20"></line>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 362 B

src/webui/static/img/icons/iface-wireguard.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
<circle cx="12" cy="11" r="2"></circle>
<path d="M12 13v4"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 300 B

src/webui/static/img/icons/interfaces.svg
+7 -2
View File
@@ -1,3 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 13.5h3L7.5 7h4l3 10h4l2.5-6.5h3"></path>
</svg>
<rect x="9" y="2" width="6" height="4"/>
<rect x="2" y="18" width="6" height="4"/>
<rect x="16" y="18" width="6" height="4"/>
<line x1="12" y1="6" x2="12" y2="13"/>
<line x1="5" y1="18" x2="12" y2="13"/>
<line x1="19" y1="18" x2="12" y2="13"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 220 B

After

Width:  |  Height:  |  Size: 422 B

src/webui/static/img/icons/keystore.svg
+3 -3
View File
@@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 2l-2 5-8 8H7v4H3v-4H2v-2h1l8-8 5-2z"></path>
<circle cx="16" cy="7" r="2"></circle>
</svg>
<rect x="5" y="11" width="14" height="11" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 266 B

After

Width:  |  Height:  |  Size: 265 B

src/webui/static/img/icons/routing.svg
+7 -5
View File
@@ -1,6 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M5 12l4-4"></path>
<path d="M5 12l4 4"></path>
<path d="M22 6h-6.5c-1.4 0-2.5 1.1-2.5 2.5v7c0 1.4-1.1 2.5-2.5 2.5H4"></path>
</svg>
<circle cx="4" cy="12" r="2"/>
<line x1="6" y1="12" x2="11" y2="12"/>
<line x1="11" y1="12" x2="18" y2="6"/>
<line x1="11" y1="12" x2="18" y2="18"/>
<circle cx="20" cy="5" r="2"/>
<circle cx="20" cy="19" r="2"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 334 B

After

Width:  |  Height:  |  Size: 390 B

src/webui/static/img/icons/status-down.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="15" y1="9" x2="9" y2="15"></line>
<line x1="9" y1="9" x2="15" y2="15"></line>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 300 B

src/webui/static/img/icons/status-up.svg
-4
View File
@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9 12l2 2 4-4"></path>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 242 B

src/webui/static/img/icons/status-warning.svg
-5
View File
@@ -1,5 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 372 B

src/webui/static/img/logo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 11 KiB

src/webui/templates/layouts/sidebar.html
+40 -29
View File
@@ -1,8 +1,5 @@
{{define "sidebar"}}
<nav id="sidebar">
<div class="sidebar-header">
<img src="/assets/img/logo.png" alt="Infix" class="sidebar-logo">
</div>
<div class="sidebar-nav">
<details class="nav-group-top" open>
@@ -17,7 +14,7 @@
hx-push-url="true"
class="nav-link {{if eq .ActivePage "dashboard"}}active{{end}}">
<span class="nav-icon" style="--icon: url('/assets/img/icons/dashboard.svg')"></span>
Dashboard
Overview
</a>
</li>
{{if and .Capabilities (.Capabilities.Has "containers")}}
@@ -66,16 +63,6 @@
Routing
</a>
</li>
<li>
<a href="/firewall"
hx-get="/firewall"
hx-target="#content"
hx-push-url="true"
class="nav-link {{if eq .ActivePage "firewall"}}active{{end}}">
<span class="nav-icon" style="--icon: url('/assets/img/icons/firewall.svg')"></span>
Firewall
</a>
</li>
{{if and .Capabilities (.Capabilities.Has "wifi")}}
<li>
<a href="/wifi"
@@ -88,6 +75,20 @@
</a>
</li>
{{end}}
</ul>
<div class="nav-section-label">Security</div>
<ul class="nav-group-items">
<li>
<a href="/firewall"
hx-get="/firewall"
hx-target="#content"
hx-push-url="true"
class="nav-link {{if eq .ActivePage "firewall"}}active{{end}}">
<span class="nav-icon" style="--icon: url('/assets/img/icons/firewall.svg')"></span>
Firewall
</a>
</li>
<li>
<a href="/vpn"
hx-get="/vpn"
@@ -99,23 +100,13 @@
</a>
</li>
<li>
<a href="/lldp"
hx-get="/lldp"
<a href="/nacm"
hx-get="/nacm"
hx-target="#content"
hx-push-url="true"
class="nav-link {{if eq .ActivePage "lldp"}}active{{end}}">
<span class="nav-icon" style="--icon: url('/assets/img/icons/lldp.svg')"></span>
LLDP
</a>
</li>
<li>
<a href="/mdns"
hx-get="/mdns"
hx-target="#content"
hx-push-url="true"
class="nav-link {{if eq .ActivePage "mdns"}}active{{end}}">
<span class="nav-icon" style="--icon: url('/assets/img/icons/mdns.svg')"></span>
mDNS
class="nav-link {{if eq .ActivePage "nacm"}}active{{end}}">
<span class="nav-icon" style="--icon: url('/assets/img/icons/nacm.svg')"></span>
NACM
</a>
</li>
</ul>
@@ -152,6 +143,26 @@
NTP
</a>
</li>
<li>
<a href="/lldp"
hx-get="/lldp"
hx-target="#content"
hx-push-url="true"
class="nav-link {{if eq .ActivePage "lldp"}}active{{end}}">
<span class="nav-icon" style="--icon: url('/assets/img/icons/lldp.svg')"></span>
LLDP
</a>
</li>
<li>
<a href="/mdns"
hx-get="/mdns"
hx-target="#content"
hx-push-url="true"
class="nav-link {{if eq .ActivePage "mdns"}}active{{end}}">
<span class="nav-icon" style="--icon: url('/assets/img/icons/mdns.svg')"></span>
mDNS
</a>
</li>
</ul>
</details>
src/webui/templates/pages/dashboard.html
+2 -2
View File
@@ -26,8 +26,8 @@
<div class="card-header">Runtime</div>
<div class="card-body" style="padding:0">
<table class="info-table">
{{if .Uptime}}<tr><th>Uptime</th><td>{{.Uptime}}</td></tr>{{end}}
{{if .CurrentTime}}<tr><th>Current Time</th><td>{{.CurrentTime}}</td></tr>{{end}}
{{if .Uptime}}<tr><th>Uptime</th><td><span class="num">{{.Uptime}}</span></td></tr>{{end}}
{{if .CurrentTime}}<tr><th>Current Time</th><td><span class="num">{{.CurrentTime}}</span></td></tr>{{end}}
{{if .MemTotal}}
<tr>
<th>Memory</th>