diff --git a/src/webui/static/css/style.css b/src/webui/static/css/style.css
index ffb756c3..6099fc12 100644
--- a/src/webui/static/css/style.css
+++ b/src/webui/static/css/style.css
@@ -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 {
diff --git a/src/webui/static/img/icons/advanced.svg b/src/webui/static/img/icons/advanced.svg
new file mode 100644
index 00000000..8fcfe9a5
--- /dev/null
+++ b/src/webui/static/img/icons/advanced.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/webui/static/img/icons/dhcp.svg b/src/webui/static/img/icons/dhcp.svg
index 30823ecf..67fc54cb 100644
--- a/src/webui/static/img/icons/dhcp.svg
+++ b/src/webui/static/img/icons/dhcp.svg
@@ -1,4 +1,9 @@
\ No newline at end of file
+
+
+
+
+
+
+
+
diff --git a/src/webui/static/img/icons/iface-bridge.svg b/src/webui/static/img/icons/iface-bridge.svg
deleted file mode 100644
index 4dde450f..00000000
--- a/src/webui/static/img/icons/iface-bridge.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-container.svg b/src/webui/static/img/icons/iface-container.svg
deleted file mode 100644
index a6389999..00000000
--- a/src/webui/static/img/icons/iface-container.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-ethernet.svg b/src/webui/static/img/icons/iface-ethernet.svg
deleted file mode 100644
index 6c0ee150..00000000
--- a/src/webui/static/img/icons/iface-ethernet.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-gre.svg b/src/webui/static/img/icons/iface-gre.svg
deleted file mode 100644
index 0c966494..00000000
--- a/src/webui/static/img/icons/iface-gre.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-lag.svg b/src/webui/static/img/icons/iface-lag.svg
deleted file mode 100644
index 64d060d9..00000000
--- a/src/webui/static/img/icons/iface-lag.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-veth.svg b/src/webui/static/img/icons/iface-veth.svg
deleted file mode 100644
index 62c3728f..00000000
--- a/src/webui/static/img/icons/iface-veth.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-vlan.svg b/src/webui/static/img/icons/iface-vlan.svg
deleted file mode 100644
index 379524d9..00000000
--- a/src/webui/static/img/icons/iface-vlan.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-vxlan.svg b/src/webui/static/img/icons/iface-vxlan.svg
deleted file mode 100644
index 2ce493b9..00000000
--- a/src/webui/static/img/icons/iface-vxlan.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-wifi.svg b/src/webui/static/img/icons/iface-wifi.svg
deleted file mode 100644
index a344e5a3..00000000
--- a/src/webui/static/img/icons/iface-wifi.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/iface-wireguard.svg b/src/webui/static/img/icons/iface-wireguard.svg
deleted file mode 100644
index b321cd2d..00000000
--- a/src/webui/static/img/icons/iface-wireguard.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/interfaces.svg b/src/webui/static/img/icons/interfaces.svg
index 6c0ee150..9d82f461 100644
--- a/src/webui/static/img/icons/interfaces.svg
+++ b/src/webui/static/img/icons/interfaces.svg
@@ -1,3 +1,8 @@
\ No newline at end of file
+
+
+
+
+
+
+
diff --git a/src/webui/static/img/icons/keystore.svg b/src/webui/static/img/icons/keystore.svg
index 1a8c6f99..cb9a9e93 100644
--- a/src/webui/static/img/icons/keystore.svg
+++ b/src/webui/static/img/icons/keystore.svg
@@ -1,4 +1,4 @@
\ No newline at end of file
+
+
+
diff --git a/src/webui/static/img/icons/routing.svg b/src/webui/static/img/icons/routing.svg
index f0ae57aa..19ae58e7 100644
--- a/src/webui/static/img/icons/routing.svg
+++ b/src/webui/static/img/icons/routing.svg
@@ -1,6 +1,8 @@
\ No newline at end of file
+
+
+
+
+
+
+
diff --git a/src/webui/static/img/icons/status-down.svg b/src/webui/static/img/icons/status-down.svg
deleted file mode 100644
index aeb3a283..00000000
--- a/src/webui/static/img/icons/status-down.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/status-up.svg b/src/webui/static/img/icons/status-up.svg
deleted file mode 100644
index 6a6a46af..00000000
--- a/src/webui/static/img/icons/status-up.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/icons/status-warning.svg b/src/webui/static/img/icons/status-warning.svg
deleted file mode 100644
index 421cf3db..00000000
--- a/src/webui/static/img/icons/status-warning.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
\ No newline at end of file
diff --git a/src/webui/static/img/logo.png b/src/webui/static/img/logo.png
index 169dfacc..cfd199b9 100644
Binary files a/src/webui/static/img/logo.png and b/src/webui/static/img/logo.png differ
diff --git a/src/webui/templates/layouts/sidebar.html b/src/webui/templates/layouts/sidebar.html
index 534b61b5..38046346 100644
--- a/src/webui/templates/layouts/sidebar.html
+++ b/src/webui/templates/layouts/sidebar.html
@@ -1,8 +1,5 @@
{{define "sidebar"}}