teamp tou uu giao dien

management/src/App.tsx

@@ -102,6 +102,15 @@ function App() {
   const route = useRoute();
   const { staff, logout } = useAuth();
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    return localStorage.getItem('sc_sidebar_collapsed') === 'true';
+  });
+
+  const toggleSidebarCollapse = () => {
+    const nextVal = !sidebarCollapsed;
+    setSidebarCollapsed(nextVal);
+    localStorage.setItem('sc_sidebar_collapsed', String(nextVal));
+  };
   const [myClasses, setMyClasses] = useState<{ id: number; name: string; code: string }[]>(() => {
     try {
       const stored = localStorage.getItem('sc_my_classes_details');
@@ -186,13 +195,37 @@ function App() {
         />
       )}
 
-      <aside className={`sidebar${sidebarOpen ? ' sidebar--open' : ''}`}>
+      <aside className={`sidebar${sidebarOpen ? ' sidebar--open' : ''}${sidebarCollapsed ? ' sidebar--collapsed' : ''}`}>
         <div className="brand">
           <img src="/logo.jpeg" alt="Simple Care" className="brand-logo-img" />
           <div className="brand-text">
             <span className="brand-name">Simple Care</span>
             <span className="brand-sub">Rikkei Education</span>
           </div>
+          <button
+            type="button"
+            className="sidebar-collapse-toggle-pc"
+            onClick={toggleSidebarCollapse}
+            title="Thu gọn menu"
+            style={{
+              background: 'none',
+              border: 'none',
+              color: 'var(--text-muted)',
+              cursor: 'pointer',
+              padding: '4px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginLeft: 'auto',
+              borderRadius: '4px',
+              transition: 'var(--transition)',
+            }}
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="19" y1="12" x2="5" y2="12" />
+              <polyline points="12 19 5 12 12 5" />
+            </svg>
+          </button>
         </div>
 
         <nav>
@@ -332,7 +365,37 @@ function App() {
         </div>
       </aside>
 
-      <main className="main-content">
+      <main className={`main-content${sidebarCollapsed ? ' main-content--full' : ''}`}>
+        {sidebarCollapsed && (
+          <button
+            type="button"
+            className="sidebar-expand-btn-pc"
+            onClick={toggleSidebarCollapse}
+            title="Mở rộng menu"
+            style={{
+              position: 'fixed',
+              left: '12px',
+              top: '12px',
+              zIndex: 99,
+              background: '#fff',
+              border: '1px solid var(--border-color)',
+              borderRadius: '50%',
+              width: '32px',
+              height: '32px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              boxShadow: 'var(--shadow-sm)',
+              transition: 'var(--transition)',
+            }}
+          >
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="5" y1="12" x2="19" y2="12" />
+              <polyline points="12 5 19 12 12 19" />
+            </svg>
+          </button>
+        )}
         <div className="page-viewport">
           {route.classId ? (
             <ClassWorkspace