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 {