5th

frontend/src/components/layout/DashboardLayout.tsx

@@ -51,10 +51,15 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
   const { user, logout } = useAuth();
   const { themeMode, actualTheme, setThemeMode } = useTheme();
   const muiTheme = useMuiTheme();
-  const isMobile = useMediaQuery(muiTheme.breakpoints.down('lg'));
+  const isMobile = useMediaQuery('(max-width: 1200px)');  // 降低斷點確保覆蓋所有小螢幕
 
   // 響應式處理
   useEffect(() => {
+    console.log('Responsive handling:', { 
+      isMobile, 
+      windowWidth: window.innerWidth,
+      currentSidebarOpen: sidebarOpen 
+    });
     if (isMobile) {
       setSidebarOpen(false);
       setSidebarCollapsed(false);
@@ -136,10 +141,27 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
   };
 
 
-  const toggleSidebar = () => {
+  const toggleSidebar = (event?: React.MouseEvent) => {
+    console.log('🔧 Toggle sidebar clicked:', { 
+      isMobile, 
+      sidebarOpen, 
+      sidebarCollapsed,
+      windowWidth: window.innerWidth,
+      eventTarget: event?.target,
+      eventCurrentTarget: event?.currentTarget
+    });
+    
+    // 防止事件冒泡
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    
     if (isMobile) {
+      console.log('📱 Mobile: Setting sidebar open to:', !sidebarOpen);
       setSidebarOpen(!sidebarOpen);
     } else {
+      console.log('🖥️ Desktop: Toggling collapsed to:', !sidebarCollapsed);
       setSidebarCollapsed(!sidebarCollapsed);
     }
   };
@@ -162,8 +184,8 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
         position="fixed"
         elevation={0}
         sx={{
-          width: { lg: `calc(100% - ${getDrawerWidth()}px)` },
-          ml: { lg: `${getDrawerWidth()}px` },
+          width: isMobile ? '100%' : `calc(100% - ${getDrawerWidth()}px)`,
+          ml: isMobile ? 0 : `${getDrawerWidth()}px`,
           backgroundColor: actualTheme === 'dark' 
             ? 'rgba(17, 24, 39, 0.9)' 
             : 'rgba(255, 255, 255, 0.9)',
@@ -183,11 +205,23 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
             onClick={toggleSidebar}
             sx={{ 
               mr: 2,
-              display: { lg: sidebarCollapsed ? 'inline-flex' : 'none' },
+              display: isMobile || sidebarCollapsed ? 'flex' : 'none',
+              zIndex: 1301, // 確保按鈕在 Drawer modal 之上
+              position: 'relative',
+              pointerEvents: 'auto',
+              cursor: 'pointer',
+              minWidth: '48px',
+              minHeight: '48px',
+              border: process.env.NODE_ENV === 'development' ? '2px solid lime' : 'none', // 更明顯的除錯邊框
               '&:hover': {
                 backgroundColor: actualTheme === 'dark' 
                   ? 'rgba(255, 255, 255, 0.1)' 
                   : 'rgba(0, 0, 0, 0.1)',
+              },
+              '&:active': {
+                backgroundColor: actualTheme === 'dark' 
+                  ? 'rgba(255, 255, 255, 0.2)' 
+                  : 'rgba(0, 0, 0, 0.2)',
               }
             }}
           >
@@ -303,6 +337,9 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
         }}
         ModalProps={{
           keepMounted: true, // 手機端性能優化
+          style: {
+            zIndex: isMobile ? 1300 : undefined, // 確保 modal 不會遮擋按鈕
+          },
         }}
       >
         <Sidebar 
@@ -317,7 +354,7 @@ const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {
         component="main"
         sx={{
           flexGrow: 1,
-          width: { lg: `calc(100% - ${getDrawerWidth()}px)` },
+          width: isMobile ? '100%' : `calc(100% - ${getDrawerWidth()}px)`,
           minHeight: '100vh',
           backgroundColor: actualTheme === 'dark' ? '#111827' : '#f9fafb',
           transition: 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1)',