diff --git a/frontend/src/sidebar/Sidebar.jsx b/frontend/src/sidebar/Sidebar.jsx
index c9c0201..84b084c 100644
--- a/frontend/src/sidebar/Sidebar.jsx
+++ b/frontend/src/sidebar/Sidebar.jsx
@@ -189,7 +189,6 @@ const Sidebar = ({
onSelectTenant,
onOpenSettings,
onUploadFiles,
- loading = false,
}) => {
const {
setCollapsed,
@@ -318,6 +317,50 @@ const Sidebar = ({
cycleThemeMode();
}, [cycleThemeMode]);
+ const themeMenuSection =
+ typeof neutralHue === 'number' || typeof neutralHue === 'string'
+ ? (
+
+
+
Theme
+
+
+
+
+
+
+
+ )
+ : null;
+
const handleSearchInputChange = useCallback(
(event) => {
onSearchChange?.(event.target.value);
@@ -348,6 +391,7 @@ const Sidebar = ({
offset: 6,
});
const showTenantList = tenants.length > 1;
+ const menuClassName = `menu${!showTenantList && !themeMenuSection ? ' menu--simple' : ''}`;
const toggleTenantMenu = useCallback(() => {
if (!tenantMenuOpen && tenants.length === 0 && onSelectTenant) {
@@ -426,50 +470,6 @@ const Sidebar = ({
);
const rootNode = folderNodes.get('root');
- const themeControls =
- typeof neutralHue === 'number' || typeof neutralHue === 'string'
- ? (
-
-
-
Theme
-
-
-
-
-
-
-
- )
- : null;
-
return (
);
};
diff --git a/frontend/src/styles/sidebar/sidebar.css b/frontend/src/styles/sidebar/sidebar.css
index 9420503..2adf0bd 100644
--- a/frontend/src/styles/sidebar/sidebar.css
+++ b/frontend/src/styles/sidebar/sidebar.css
@@ -200,12 +200,23 @@
color: var(--muted);
}
-.sidebar__title-chevron {
- transition: transform 0.2s ease;
+
+.sidebar__title-button .sidebar__title-chevron {
+ opacity: 0;
+ transform: translateY(-1px);
+ transition:
+ opacity 0.12s ease,
+ transform 0.2s ease;
+}
+
+.sidebar__title-button:hover .sidebar__title-chevron,
+.sidebar__title-button:focus-visible .sidebar__title-chevron,
+.sidebar__title-chevron.is-open {
+ opacity: 1;
}
.sidebar__title-chevron.is-open {
- transform: rotate(180deg);
+ transform: rotate(180deg) translateY(-1px);
}
.menu {
@@ -225,10 +236,10 @@
.menu__list {
max-height: 260px;
overflow-y: auto;
- padding: 0.35rem 0;
+ padding: 0.35rem 0.5rem;
display: flex;
flex-direction: column;
- gap: 0.15rem;
+ gap: 0.25rem;
}
.menu__heading {
@@ -238,17 +249,25 @@
color: var(--muted);
}
+.menu__heading--with-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+}
+
.menu button.menu__item,
.menu .menu__item {
display: flex;
align-items: center;
justify-content: flex-start;
- gap: 0.6rem;
+ gap: 0.5rem;
width: 100%;
- padding: 0.55rem 1rem;
+ padding: 0.45rem 0.75rem;
border: none;
+ border-radius: 0.4rem;
background: none;
- color: inherit;
+ color: var(--sidebar-fg);
font: inherit;
text-align: left;
cursor: pointer;
@@ -267,6 +286,7 @@
.menu .menu__item.active {
font-weight: 600;
color: var(--accent);
+ background: var(--accent-soft);
}
.menu button.menu__item:focus-visible,
@@ -313,7 +333,50 @@
border-top: none;
}
-.menu__settings {
+
+.menu__section {
+ border-top: 1px solid var(--border);
+ padding: 0.35rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.menu__heading-actions {
+ display: inline-flex;
+ gap: 0.35rem;
+}
+
+.menu__slider {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.8rem;
+ color: var(--muted);
+ padding: 0 1rem 0.25rem;
+}
+
+.menu__section > .menu__slider {
+ margin-top: -0.25rem;
+}
+
+.menu__slider input[type='range'] {
+ flex: 1;
+ accent-color: var(--accent);
+}
+
+.menu__slider-label {
+ min-width: 2.5rem;
+}
+
+.menu__slider-value {
+ font-variant-numeric: tabular-nums;
+ color: var(--fg);
+ min-width: 3rem;
+ text-align: right;
+}
+
+.menu__button {
width: 100%;
display: inline-flex;
align-items: center;
@@ -325,30 +388,22 @@
cursor: pointer;
padding: 0.4rem 0.5rem;
border-radius: 0.35rem;
+ transition: background 0.15s ease, color 0.15s ease;
}
-.menu__settings:hover,
-.menu__settings:focus-visible {
+.menu__button:hover,
+.menu__button:focus-visible {
background: var(--sidebar-hover-bg);
}
-.menu__logout {
- width: 100%;
- display: inline-flex;
- align-items: center;
- gap: 0.4rem;
- border: none;
- background: none;
+.menu__button--danger {
color: var(--danger);
- font: inherit;
- cursor: pointer;
- padding: 0.4rem 0.5rem;
- border-radius: 0.35rem;
}
-.menu__logout:hover,
-.menu__logout:focus-visible {
+.menu__button--danger:hover,
+.menu__button--danger:focus-visible {
background: var(--surface-danger-subtle);
+ color: var(--danger);
}
.sidebar__search {