enhance header icons layout; update logo
- Increased the top margin of the left sidebar from 3.5rem to 5rem for improved spacing. - Refactored header icons section by introducing a new logo bar and reorganizing action buttons for better accessibility and layout consistency. - Removed redundant logo container and integrated its functionality into the new logo bar. - Updated styles for buttons and logo to enhance visual appearance and interaction feedback. adjust left sidebar margin and enhance header icons layout - Increased the top margin of the left sidebar from 5rem to 6rem for improved spacing. - Refactored the header icons section by consolidating the logo and toolbar into a single header panel for better accessibility and layout consistency. - Updated styles for buttons and the logo to enhance visual appearance and interaction feedback.
Alessandro committed
Mar 23, 2026 at 16:52 UTC
90eba8554dc66d41252935de0fcfad2fd9c4df4b
4 files changed
+180
-64
webui/components/sidebar/left-sidebar.html
+1
-1
@@ -85,7 +85,7 @@
85
/* Critical for allowing flex children to shrink */
86
overflow: hidden;
87
justify-content: space-between;
88
- margin-top: 3.5rem;
88
+ margin-top: 6rem;
89
padding: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
90
}
91
webui/components/sidebar/top-section/header-icons.html
+173
-47
@@ -6,86 +6,212 @@
6
</script>
7
</head>
8
<body>
9
- <div class="icons-section" id="hide-button" x-data>
10
- <!-- Sidebar Toggle Button -->
11
- <button id="toggle-sidebar" class="toggle-sidebar-button" @click="$store.sidebar.toggle()" aria-label="Toggle Sidebar" aria-expanded="false">
12
- <span class="material-symbols-outlined" aria-hidden="true">menu</span>
13
- </button>
14
-
15
- <div id="logo-container">
16
- <a href="https://github.com/agent0ai/agent-zero" target="_blank" rel="noopener noreferrer" aria-label="Agent Zero on GitHub">
17
- <span id="a0-logo" role="img" aria-label="Agent Zero"></span>
18
- </a>
9
+ <div class="sidebar-header-stack">
10
+ <!--
11
+ Single chrome block for logo + toolbar (tokens aligned with .config-button in quick-actions).
12
+ Spacer reserves in-flow height so quick-actions clears the fixed overlay (see .left-panel-top margin-top).
13
+ -->
14
+ <div id="sidebar-header-panel" class="sidebar-header-panel">
15
+ <div id="logo-bar">
16
+ <a href="https://github.com/agent0ai/agent-zero" target="_blank" rel="noopener noreferrer" aria-label="Agent Zero on GitHub">
17
+ <span id="a0-logo" role="img" aria-label="Agent Zero"></span>
18
+ </a>
19
+ </div>
20
+
21
+ <div class="icons-section" id="hide-button" x-data>
22
+ <!-- Sidebar Toggle Button -->
23
+ <button id="toggle-sidebar" class="toggle-sidebar-button" @click="$store.sidebar.toggle()" aria-label="Toggle Sidebar" aria-expanded="false">
24
+ <span class="material-symbols-outlined" aria-hidden="true">menu</span>
25
+ </button>
26
+
27
+ <button class="config-button header-action-button" id="header-dashboard" @click="deselectChat()" title="Dashboard" aria-label="Dashboard">
28
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
29
+ </button>
30
+
31
+ <button class="config-button header-action-button" id="header-plugins" @click="openModal('components/plugins/list/plugin-list.html')" title="Plugins" aria-label="Plugins">
32
+ <span class="material-symbols-outlined" aria-hidden="true">extension</span>
33
+ </button>
34
+
35
+ <button class="config-button header-action-button" id="header-settings" @click="openModal('settings/settings.html')" title="Settings" aria-label="Settings">
36
+ <span class="material-symbols-outlined" aria-hidden="true">settings</span>
37
+ </button>
38
+ </div>
39
</div>
40
+
41
</div>
42
43
44
<style>
24
- /* Sidebar toggle button + logo container (migrated) */
25
- .toggle-sidebar-button {
26
- height: 2.6rem;
27
- width: 2.6rem;
45
+ .sidebar-header-stack {
46
+ /*
47
+ Panel top (viewport) minus .left-panel-top margin-top: flow starts at 5rem; reserve overlap region.
48
+ Tuned for: padding + logo 1.47rem + gap + icon row ~2.2rem + padding.
49
+ */
50
+ --sidebar-header-flow-clearance: calc(1.9rem + (var(--spacing-xs) * 5) + 1.47rem + 2.2rem - 5rem);
51
+ }
52
+
53
+ /* Shell: same language as .config-button (quick-actions.html) */
54
+ .sidebar-header-panel {
55
+ position: fixed;
56
+ top: var(--spacing-md);
57
+ left: var(--spacing-md);
58
+ width: calc(250px - (var(--spacing-md) * 2));
59
+ box-sizing: border-box;
60
+ z-index: 1004;
61
+ display: flex;
62
+ flex-direction: column;
63
+ align-items: stretch;
64
+ padding: var(--spacing-xs) var(--spacing-sm);
65
+ background-color: var(--color-panel);
66
+ border: 0.05rem solid var(--color-border);
67
+ border-radius: 8px;
68
+ transition: background-color var(--transition-speed),
69
+ border-color var(--transition-speed), box-shadow var(--transition-speed),
70
+ opacity var(--transition-speed) ease-in-out;
71
+ }
72
+
73
+ #logo-bar {
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ width: 100%;
78
+ padding-top: var(--spacing-xxs);
79
+ }
80
+
81
+ #logo-bar a {
82
+ color: inherit;
83
+ text-decoration: none;
84
+ width: min(100%, 11.75rem);
85
+ }
86
+
87
+ #hide-button {
88
+ display: grid;
89
+ grid-template-columns: repeat(4, 1fr);
90
+ gap: var(--spacing-xs);
91
+ width: 100%;
92
+ }
93
+
94
+ /* Toolbar icons sit on the panel surface (no nested config-button boxes) */
95
+ .sidebar-header-panel #hide-button .config-button,
96
+ .sidebar-header-panel .toggle-sidebar-button {
97
background-color: transparent;
98
border: none;
99
+ border-radius: 4px;
100
+ box-shadow: none;
101
+ }
102
+
103
+ .sidebar-header-panel #hide-button .config-button {
104
+ cursor: pointer;
105
+ display: flex;
106
+ align-items: center;
107
+ justify-content: center;
108
+ opacity: 0.8;
109
+ padding: var(--spacing-xs);
110
+ min-width: 0;
111
+ min-height: 2.2rem;
112
+ transition: background-color var(--transition-speed),
113
+ border-color var(--transition-speed), box-shadow var(--transition-speed),
114
+ opacity var(--transition-speed);
115
+ }
116
+
117
+ .sidebar-header-panel #hide-button .config-button .material-symbols-outlined {
118
+ font-size: 22px;
119
+ transition: transform 0.2s ease;
120
+ }
121
+
122
+ .sidebar-header-panel #hide-button .config-button:hover {
123
+ background-color: var(--color-background-hover);
124
+ opacity: 1;
125
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
126
+ z-index: 1;
127
+ position: relative;
128
+ }
129
+
130
+ .sidebar-header-panel #hide-button .config-button:active {
131
+ opacity: 0.5;
132
+ box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06);
133
+ }
134
+
135
+ .toggle-sidebar-button {
136
color: var(--color-text);
137
opacity: 0.8;
138
cursor: pointer;
33
- left: var(--spacing-md);
34
- padding: 0.47rem 0.56rem;
35
- position: absolute;
36
- top: 1.4rem;
37
- z-index: 999;
139
+ display: flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ min-width: 0;
143
+ min-height: 2.2rem;
144
+ padding: var(--spacing-xs);
145
-webkit-transition: all var(--transition-speed) ease-in-out;
146
transition: all var(--transition-speed) ease-in-out;
147
}
41
- .toggle-sidebar-button:hover { background-color: transparent; opacity: 1; }
42
- .toggle-sidebar-button:active { opacity: 0.5; }
43
- .toggle-sidebar-button .material-symbols-outlined {
44
- font-size: 22px;
45
- -webkit-transition: all var(--transition-speed) ease;
46
- transition: all var(--transition-speed) ease;
148
+
149
+ .toggle-sidebar-button:hover {
150
+ background-color: var(--color-background-hover);
151
+ opacity: 1;
152
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
153
}
154
49
- .toggle-sidebar-button:active .material-symbols-outlined { -webkit-transform: scaleY(0.8); transform: scaleY(0.8); }
155
+ .toggle-sidebar-button:active {
156
+ opacity: 0.5;
157
+ box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.06);
158
+ }
159
51
- #logo-container {
52
- display: -webkit-flex;
53
- display: flex;
54
- align-items: center;
55
- justify-content: space-between;
56
- position: fixed;
57
- left: 4rem;
58
- top: var(--spacing-md);
59
- z-index: 1004;
60
- -webkit-transition: margin-left var(--transition-speed) ease-in-out;
61
- transition: margin-left var(--transition-speed) ease-in-out;
160
+ .toggle-sidebar-button .material-symbols-outlined {
161
+ font-size: 22px;
162
+ -webkit-transition: all var(--transition-speed) ease;
163
+ transition: all var(--transition-speed) ease;
164
+ }
165
+
166
+ .toggle-sidebar-button:active .material-symbols-outlined {
167
+ -webkit-transform: scaleY(0.8);
168
+ transform: scaleY(0.8);
169
}
63
- #logo-container a { color: inherit; text-decoration: none; }
170
+
171
#a0-logo {
172
display: block;
66
- height: 2.6rem;
67
- aspect-ratio: 120 / 50;
68
- -webkit-mask-image: url('/public/a0-fullDark.svg');
69
- mask-image: url('/public/a0-fullDark.svg');
173
+ width: 100%;
174
+ height: 1.64rem;
175
+ -webkit-mask-image: url(/public/a0-fullDark.svg);
176
+ mask-image: url(/public/a0-fullDark.svg);
177
-webkit-mask-repeat: no-repeat;
178
mask-repeat: no-repeat;
179
-webkit-mask-size: contain;
180
mask-size: contain;
74
- -webkit-mask-position: center;
181
+ -webkit-mask-position: left;
182
mask-position: center;
183
background-color: var(--color-text);
184
opacity: 0.8;
185
-webkit-transition: opacity var(--transition-speed) ease, background-color var(--transition-speed) ease;
186
transition: opacity var(--transition-speed) ease, background-color var(--transition-speed) ease;
187
}
81
- #logo-container a:hover #a0-logo { opacity: 1; }
188
+
189
+ #logo-bar a:hover #a0-logo {
190
+ opacity: 1;
191
+ }
192
+
193
+ .light-mode .sidebar-header-panel {
194
+ background-color: var(--color-background);
195
+ color: #333333;
196
+ }
197
+
198
+ .light-mode .sidebar-header-panel #hide-button .config-button:hover,
199
+ .light-mode .sidebar-header-panel .toggle-sidebar-button:hover {
200
+ background-color: var(--color-background-hover);
201
+ }
202
+
203
+ .light-mode .sidebar-header-panel #hide-button .config-button:active,
204
+ .light-mode .sidebar-header-panel .toggle-sidebar-button:active {
205
+ background-color: var(--color-background-hover);
206
+ }
207
208
@media (max-width: 768px) {
84
- .toggle-sidebar-button { position: fixed; left: var(--spacing-md); z-index: 1004; }
85
- #logo-container { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 1004; }
209
+ .sidebar-header-panel {
210
+ -webkit-transition: all 0.3s ease;
211
+ transition: all 0.3s ease;
212
+ }
213
}
214
</style>
215
</body>
216
</html>
217
91
-
webui/components/sidebar/top-section/quick-actions.html
+5
-15
@@ -14,21 +14,6 @@
14
15
<x-extension id="sidebar-quick-actions-main-start"></x-extension>
16
17
- <!-- Dashboard -->
18
- <button class="config-button" id="dashboard" @click="deselectChat()" title="Dashboard">
19
- <span class="material-symbols-outlined">home</span>
20
- </button>
21
-
22
- <!-- Scheduler -->
23
- <button class="config-button" id="plugins" @click="openModal('components/plugins/list/plugin-list.html')" title="Plugins">
24
- <span class="material-symbols-outlined">extension</span>
25
- </button>
26
-
27
- <!-- Settings -->
28
- <button class="config-button" id="settings" @click="openModal('settings/settings.html')" title="Settings">
29
- <span class="material-symbols-outlined">settings</span>
30
- </button>
31
-
17
<x-extension id="sidebar-quick-actions-main-end"></x-extension>
18
19
<!-- Dropdown Toggle -->
@@ -126,6 +111,11 @@
111
gap: var(--spacing-xs);
112
}
113
114
+ .quick-actions-anchor {
115
+ display: none;
116
+ pointer-events: none;
117
+ }
118
+
119
#quick-actions > x-extension:not(:empty) {
120
display: contents;
121
}
webui/public/a0-fullDark.svg
+1
-1
@@ -1 +1 @@
1
-<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 50" width="104" height="50"><style>.a{fill:#7a7a7a}</style><path class="a" d="m31.9 40.7c-4.1-6.9-8.1-13.8-12.2-20.9-4.1 7.1-8.1 14-12.2 20.9h-6.2c6.1-10.5 18.4-31.4 18.4-31.4 0 0 12.3 20.8 18.4 31.4 0 0-6.2 0-6.2 0z"/><path class="a" d="m27.5 40.7h-15.8q1.6-2.7 3.1-5.3h9.7c1 1.7 2 3.5 3 5.3zm52.3-6.5c0.6 1 1.2 1.9 1.9 2.9h-2.1c-0.6-0.8-1.2-1.7-1.8-2.5h-2.4v2.5h-1.6v-8.6q1.4 0 2.8 0c0.7 0 1.5-0.1 2.3 0 1.2 0.2 2.1 0.9 2.4 2.1 0.2 1.3 0 2.5-1.2 3.4-0.1 0.1-0.2 0.1-0.3 0.2q0 0 0 0zm-4.4-1.3c1.1 0 2.2 0.1 3.2 0 0.7 0 1-0.6 1-1.3 0.1-0.7-0.3-1.3-1-1.3-1-0.1-2.1 0-3.2 0zm-22.1-4.5v1.3c-1.7 1.8-3.4 3.7-5.2 5.7h5.1v1.6h-7.3v-1.7c1.5-1.6 3-3.3 4.7-5.2h-4.7v-1.7zm29.2-15.7c2.1 2.1 4 4 6.1 6v-4.9h1.5v8.7c-2.1-2-4-3.9-6.1-6v5.2h-1.5v-9q0 0 0 0zm6.3 22.2c0.4-0.2 1-0.5 1.4-0.7 1.4 1.8 3.4 1.4 4.3 0.6 0.9-0.8 1.1-1.9 0.8-3.1-0.4-1.1-1.4-1.9-2.8-1.9-1.4 0.1-2.6 1.1-2.7 2.7h-1.7c0-1.6 1.2-3.5 3.1-4 2.3-0.7 4.6 0.4 5.5 2.7 0.8 2-0.2 4.4-2.3 5.4-2 1-4.5 0.3-5.6-1.7q0 0 0 0zm-26.2-19.9c-0.3 0.2-0.8 0.5-1.1 0.8-1.8-1.5-3.8-1-4.6 0.9-0.4 1.2 0.2 2.8 1.6 3.3 1.2 0.4 2.5 0 2.8-1-0.3-0.1-0.5-0.2-0.9-0.3 0-0.4-0.1-0.8-0.1-1.3h3.1c0.3 1.8-1.2 3.8-3 4.2-2 0.5-4.2-0.6-4.9-2.5-0.8-2 0.1-4.2 2-5.2 1.8-0.9 4-0.5 5.1 1.1zm-17.1-1.8c1.6 3 3 5.7 4.5 8.6h-1.7c-0.9-1.6-1.8-3.3-2.8-5-0.9 1.7-1.8 3.3-2.7 5h-1.8c1.5-2.8 3-5.6 4.5-8.6zm52.9 2h-2.9v-1.5h7.2v1.5h-2.7v6.6h-1.6v-6.6zm-36.3 14.8v2.1h2c0 0 0 1 0 1.6-0.8 0.1-1.7 0-2.5-0.1-0.7-0.2-1.2-0.8-1.2-1.5 0-1.2 0-2.5 0-3.7h7v1.6h-5.3q0 0 0 0zm-1.7 7v-2.2q0.7 0 1.3-0.1c0.1 0.3 0.1 0.7 0.3 0.7 0.3 0 3.5 0 5.3 0v1.6c0 0-6.9 0-6.9 0zm11-21.8v2h1.9c0 0 0 0.9 0 1.5-0.8 0-1.6 0-2.3-0.2-0.7-0.1-1.1-0.6-1.1-1.3-0.1-1.1-0.1-2.3-0.1-3.4h6.5v1.4h-4.9zm-1.5 6.5v-2q0.6 0 1.2-0.1c0.1 0.2 0.1 0.6 0.3 0.6 0.2 0 3.2 0 4.9 0v1.5h-6.4z"/></svg>
\ No newline at end of file
1
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 163 26" width="163" height="26"><style>.a{fill:#7a7a7a}</style><path class="a" d="m138.7 15.3c0.8 1.2 1.6 2.4 2.5 3.7h-2.7c-0.8-1-1.6-2.2-2.4-3.3h-3.1v3.3h-2.1v-11.3q1.8 0 3.6 0c1 0 2-0.1 3 0.1 1.6 0.2 2.8 1.1 3.2 2.7 0.3 1.7 0 3.3-1.5 4.4-0.2 0.1-0.3 0.2-0.5 0.4zm-5.7-1.7c1.5 0 2.8 0 4.2-0.1 0.9 0 1.3-0.7 1.3-1.6 0-1-0.4-1.7-1.3-1.8-1.4-0.2-2.8-0.1-4.2-0.1zm-29-5.8v1.6c-2.2 2.5-4.4 5-6.7 7.6h6.7v2.1h-9.6v-2.2c2-2.2 4-4.4 6.2-6.9h-6.2v-2.2zm-48.2-0.7c2.8 2.7 5.3 5.2 8 7.9v-6.5h2v11.4c-2.7-2.6-5.2-5.1-8-7.8v6.8h-2zm94.6 9.3c0.6-0.3 1.4-0.7 1.9-0.9 1.7 2.3 4.4 1.8 5.6 0.7 1.1-1 1.5-2.5 1-4-0.5-1.4-1.8-2.6-3.6-2.5-1.8 0.1-3.4 1.4-3.6 3.5h-2.1c0-2.1 1.5-4.6 3.9-5.3 3.1-0.9 6.1 0.6 7.3 3.5 1 2.8-0.2 5.9-3 7.2-2.6 1.3-6 0.3-7.4-2.2zm-120.5-6.3c-0.5 0.3-1.1 0.7-1.5 1-2.3-1.9-5-1.3-6 1.2-0.5 1.6 0.3 3.7 2.1 4.3 1.5 0.6 3.2 0 3.6-1.3-0.3-0.1-0.7-0.2-1.1-0.3-0.1-0.6-0.1-1.1-0.2-1.8h4.1c0.3 2.4-1.6 5-4 5.6-2.6 0.7-5.4-0.8-6.4-3.4-0.9-2.5 0.2-5.5 2.6-6.7 2.4-1.3 5.4-0.7 6.8 1.4zm-22.4-2.3c2 3.8 3.9 7.5 5.9 11.2h-2.3q-1.8-3.2-3.6-6.6c-1.3 2.3-2.4 4.4-3.6 6.6h-2.3c2-3.7 3.9-7.4 5.9-11.2zm69.1 2.5h-3.8v-1.9h9.5v1.9h-3.6v8.7h-2.1zm38.9-0.4v2.7l2.7 0.1c0 0 0 1.2 0 2.1-1.1 0-2.3 0-3.3-0.2-0.9-0.2-1.6-1-1.6-2-0.1-1.5 0-3.2 0-4.8h9.1v2.1zm-2.2 9.2v-2.9c0.5 0 1.1-0.1 1.7-0.1 0.1 0.3 0.1 0.9 0.4 0.9 0.3 0 4.5 0 6.9 0v2.1zm-71.9-8.7v2.6h2.5c0 0 0 1.2 0 2-1 0-2.1 0-3.1-0.2-0.8-0.2-1.4-0.9-1.5-1.8q0-2.2 0-4.5h8.5v1.9zm-2.1 8.5v-2.6c0.6-0.1 1.1-0.1 1.6-0.1 0.2 0.3 0.2 0.8 0.4 0.8 0.3 0 4.2 0 6.4 0v1.9z"/></svg>
\ No newline at end of file