баги

frontend/react/settings/SettingsApp.jsx

@@ -5,6 +5,8 @@ import { logoutAndRedirect } from '../shared/auth-client.js';
 import { SESSION_PHASES } from '../shared/session-policy.js';
 import { useAuthorizedSession } from '../shared/use-authorized-session.js';
 import { AsyncState } from '../shared/ui/AsyncState.jsx';
+import { useSidebar } from '../shared/use-sidebar.js';
+import { SidebarToggle } from '../shared/ui/SidebarToggle.jsx';
 import { DatabaseTab } from './DatabaseTab.jsx';
 import { EduFormsTab } from './EduFormsTab.jsx';
 import { GeneralTab } from './GeneralTab.jsx';
@@ -15,7 +17,6 @@ import {
 } from './settings-service.js';
 
 const THEME_STORAGE_KEY = 'theme';
-const SIDEBAR_STORAGE_KEY = 'sidebar-collapsed';
 
 const TAB_ICONS = Object.freeze({
     database: (
@@ -72,19 +73,7 @@ export function SettingsApp() {
 }
 
 function SettingsShell({ title, sidebar, children }) {
-    const [collapsed, setCollapsed] = useState(() => (
-        typeof window !== 'undefined'
-            && window.innerWidth > 768
-            && localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true'
-    ));
-
-    function toggleSidebar() {
-        setCollapsed(current => {
-            const next = !current;
-            localStorage.setItem(SIDEBAR_STORAGE_KEY, next);
-            return next;
-        });
-    }
+    const { collapsed, mobileOpen, toggleSidebar, closeSidebar } = useSidebar();
 
     function toggleTheme() {
         const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
@@ -99,7 +88,7 @@ function SettingsShell({ title, sidebar, children }) {
 
     return (
         <>
-            <aside className={`sidebar${collapsed ? ' collapsed' : ''}`}>
+            <aside id="app-sidebar" className={`sidebar${collapsed && !mobileOpen ? ' collapsed' : ''}${mobileOpen ? ' open' : ''}`}>
                 <div className="sidebar-header">
                     <div className="logo">
                         <svg width="32" height="32" viewBox="0 0 40 40" fill="none">
@@ -127,7 +116,9 @@ function SettingsShell({ title, sidebar, children }) {
                         </svg>
                     </button>
                 </div>
-                {sidebar}
+                <div className="sidebar-nav-container" onClick={event => {
+                    if (event.target.closest('.nav-item')) closeSidebar();
+                }}>{sidebar}</div>
                 <div className="sidebar-footer">
                     <a href="/admin/" className="btn-back">
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
@@ -149,10 +140,11 @@ function SettingsShell({ title, sidebar, children }) {
                 </div>
             </aside>
 
-            <div className="sidebar-overlay" />
+            <div className={`sidebar-overlay${mobileOpen ? ' open' : ''}`} onClick={closeSidebar} />
 
             <main className={`main${collapsed ? ' sidebar-collapsed' : ''}`}>
                 <header className="topbar">
+                    <SidebarToggle open={mobileOpen} onClick={toggleSidebar} />
                     <h1>{title}</h1>
                     <button
                         type="button"