admin/Hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tighten collapsed sidebar layout (#834)

Browse Source
This commit is contained in:
Zhicheng Han
2026-05-19 02:33:53 +02:00
committed by GitHub
parent d2cbce2f13
commit 3d74d78698
11 changed files with 131 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/components/layout/AppSidebar.vue
+47 -16
View File
@@ -22,6 +22,12 @@ const logoPath = '/logo.png';
const collapsedGroups = reactive<Record<string, boolean>>({});
type SidebarGroupKey = "Conversation" | "Agent" | "Monitoring" | "System";
function groupLabel(key: SidebarGroupKey) {
return t(`sidebar.group${key}${appStore.sidebarCollapsed ? "Short" : ""}`);
}
function toggleGroup(key: string) {
collapsedGroups[key] = !collapsedGroups[key];
}
@@ -79,12 +85,12 @@ function openChangelog() {
<!-- Conversation -->
<div class="nav-group">
<div class="nav-group-label" @click="toggleGroup('conversation')">
<span>{{ t("sidebar.groupConversation") }}</span>
<span>{{ groupLabel("Conversation") }}</span>
<svg class="nav-group-arrow" :class="{ collapsed: isGroupCollapsed('conversation') }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
<div v-show="!isGroupCollapsed('conversation')">
<div v-show="!isGroupCollapsed('conversation')" class="nav-group-items">
<button class="nav-item" :class="{ active: selectedKey === 'hermes.chat' }" @click="handleNav('hermes.chat')">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
@@ -124,12 +130,12 @@ function openChangelog() {
<!-- Agent -->
<div class="nav-group">
<div class="nav-group-label" @click="toggleGroup('agent')">
<span>{{ t("sidebar.groupAgent") }}</span>
<span>{{ groupLabel("Agent") }}</span>
<svg class="nav-group-arrow" :class="{ collapsed: isGroupCollapsed('agent') }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
<div v-show="!isGroupCollapsed('agent')">
<div v-show="!isGroupCollapsed('agent')" class="nav-group-items">
<button class="nav-item" :class="{ active: selectedKey === 'hermes.jobs' }" @click="handleNav('hermes.jobs')">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
@@ -196,12 +202,12 @@ function openChangelog() {
<!-- Monitoring -->
<div class="nav-group">
<div class="nav-group-label" @click="toggleGroup('monitoring')">
<span>{{ t("sidebar.groupMonitoring") }}</span>
<span>{{ groupLabel("Monitoring") }}</span>
<svg class="nav-group-arrow" :class="{ collapsed: isGroupCollapsed('monitoring') }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
<div v-show="!isGroupCollapsed('monitoring')">
<div v-show="!isGroupCollapsed('monitoring')" class="nav-group-items">
<button class="nav-item" :class="{ active: selectedKey === 'hermes.logs' }" @click="handleNav('hermes.logs')">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
@@ -232,12 +238,12 @@ function openChangelog() {
<!-- System -->
<div class="nav-group">
<div class="nav-group-label" @click="toggleGroup('system')">
<span>{{ t("sidebar.groupSystem") }}</span>
<span>{{ groupLabel("System") }}</span>
<svg class="nav-group-arrow" :class="{ collapsed: isGroupCollapsed('system') }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
<div v-show="!isGroupCollapsed('system')">
<div v-show="!isGroupCollapsed('system')" class="nav-group-items">
<button class="nav-item" :class="{ active: selectedKey === 'hermes.gateways' }" @click="handleNav('hermes.gateways')">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
@@ -423,6 +429,12 @@ function openChangelog() {
}
}
.nav-group-items {
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-group-label {
font-size: 10px;
font-weight: 600;
@@ -549,14 +561,20 @@ function openChangelog() {
align-items: center;
justify-content: space-between;
gap: 8px;
overflow: hidden;
}
.version-links {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 8px;
}
:deep(.theme-switch-container) {
flex-shrink: 0;
}
.github-link,
.website-link {
color: $text-muted;
@@ -576,6 +594,9 @@ function openChangelog() {
.version-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
transition: color 0.2s;
@@ -660,7 +681,18 @@ function openChangelog() {
}
.nav-group-label {
display: none;
justify-content: center;
gap: 2px;
padding: 8px 0 4px;
letter-spacing: 0;
span {
max-width: 36px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.nav-item {
@@ -677,13 +709,6 @@ function openChangelog() {
}
}
// Keep group children visible — user can still see icons
.nav-group > div {
display: flex !important;
flex-direction: column;
gap: 2px;
}
// Hide selectors and footer text, keep theme switch
:deep(.profile-selector),
:deep(.model-selector) {
@@ -691,6 +716,12 @@ function openChangelog() {
}
.sidebar-footer {
.logout-item {
margin: 0;
padding: 10px 4px;
border-radius: $radius-sm;
}
.logout-item span {
display: none;
}