Initial commit - restaurant dashboard

src/components/Home/ResList/AppBar.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+  AppBar,
+  Toolbar,
+  Box,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  useTheme,
+  useMediaQuery,
+} from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import LogoutIcon from '@mui/icons-material/Logout';
+import authService from '../../../services/authService'; 
+
+const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+  // دالة تسجيل الخروج المعدلة
+  const handleLogout = async () => {
+    try {
+      const result = await authService.logout();
+
+      if (result.success) {
+        localStorage.removeItem('token');
+        navigate('/login');
+      } else {
+        console.error('Logout failed:', result.message);
+      }
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  };
+
+  return (
+    <AppBar
+      sx={{
+        height: { xs: 56, sm: 64, md: 66 },
+        backgroundColor: '#ffffff',
+        color: 'black',
+        boxShadow: 'none',
+        borderBottom: '1px solid #e0e0e0',
+        position: 'sticky',
+        top: 0,
+        zIndex: theme.zIndex.appBar,
+      }}
+    >
+      <Toolbar
+        sx={{
+          px: { xs: 2, sm: 3, md: '24px' },
+          minHeight: { xs: '56px !important', sm: '64px !important' },
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        {/* Left: Logo */}
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box
+            component="img"
+            src="/image.png"
+            alt="logo"
+            sx={{
+              width: 40,
+              height: 40,
+              objectFit: 'contain',
+              mr: 1.5,
+            }}
+          />
+          <Typography
+            variant="h6"
+            sx={{
+              fontWeight: 400,
+              fontSize: '1.25rem',
+              color: 'text.primary',
+            }}
+          >
+            KITCH
+          </Typography>
+          <Typography
+            variant="h6"
+            sx={{
+              fontWeight: 400,
+              fontSize: '1.25rem',
+              color: 'primary.main',
+              ml: 0.5,
+            }}
+          >
+            PLUS
+          </Typography>
+        </Box>
+
+        {/* Right: Log Out Button */}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.8, sm: 1, md: 1.5 } }}>
+          <Box
+            onClick={handleLogout}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              borderRadius: '5px',
+              px: 2,
+              py: 1,
+              cursor: 'pointer',
+              transition: 'background-color 0.2s',
+              backgroundColor: 'transparent',
+              '&:hover': {
+                backgroundColor: '#fffcf9d5',
+              },
+            }}
+          >
+            <ListItemIcon
+              sx={{
+                color: 'divider',
+                minWidth: 36,
+              }}
+            >
+              <LogoutIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Log Out"
+              primaryTypographyProps={{
+                sx: {
+                  color: 'divider',
+                  fontSize: '1rem',
+                },
+              }}
+            />
+          </Box>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default KitchPlusAppBar;