Linking of login, logout and registration interfaces.

src/components/Home/SideHome.js

@@ -24,6 +24,8 @@ import {
   Logout as LogoutIcon
 } from '@mui/icons-material';
 
+import authService from '../../services/authService'; // تأكد من المسار الصحيح
+
 const menuItems = [
   { text: 'Dashboard', icon: <DashboardIcon />, path: '/dashboard' },
   { text: 'Cashier', icon: <CashierIcon />, path: '/cashier' },
@@ -32,9 +34,8 @@ const menuItems = [
   { text: 'Training', icon: <TrainingIcon />, path: '/training' },
   { text: 'Analytics & Reporting', icon: <AnalyticsIcon />, path: '/analytics' },
   { text: 'Restaurant Profile', icon: <RestaurantIcon />, path: '/profile' },
-  { text: 'Host Kitchen', icon: <HostKitchenIcon />, path: '/host-kitchen' },
+  // { text: 'Host Kitchen', icon: <HostKitchenIcon />, path: '/host-kitchen' },
   { text: 'Create Kitchen', icon: <CreateKitchenIcon />, path: '/create-kitchen' },
-  
 ];
 
 const bottomItems = [
@@ -47,6 +48,17 @@ const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
   const navigate = useNavigate();
   const location = useLocation();
 
+  const handleLogout = async () => {
+    const result = await authService.logout();
+
+    localStorage.removeItem('token');
+    localStorage.removeItem('refresh_token');
+
+    navigate('/login', { replace: true });
+
+    if (isMobile) onClose();
+  };
+
   const renderListItems = (items) =>
     items.map((item, index) => {
       const isActive = location.pathname === item.path;
@@ -56,10 +68,11 @@ const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
           <Box
             onClick={() => {
               if (item.text === 'Log Out') {
-                localStorage.removeItem('token');
+                handleLogout();
+              } else {
+                navigate(item.path);
+                if (isMobile) onClose();
               }
-              navigate(item.path);
-              if (isMobile) onClose();
             }}
             sx={{
               display: 'flex',
@@ -76,10 +89,12 @@ const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
               },
             }}
           >
-            <ListItemIcon sx={{
-              color: isActive ? theme.palette.primary.main : '#A6ACB8',
-              minWidth: 36
-            }}>
+            <ListItemIcon
+              sx={{
+                color: isActive ? theme.palette.primary.main : '#A6ACB8',
+                minWidth: 36,
+              }}
+            >
               {item.icon}
             </ListItemIcon>
             <ListItemText
@@ -87,7 +102,7 @@ const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
               primaryTypographyProps={{
                 sx: {
                   color: isActive ? theme.palette.primary.main : '#61677F',
-                  fontSize: '0.875rem'
+                  fontSize: '0.875rem',
                 },
               }}
             />
@@ -97,12 +112,14 @@ const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
     });
 
   const drawer = (
-    <Box sx={{
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      bgcolor: 'background.paper'
-    }}>
+    <Box
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        bgcolor: 'background.paper',
+      }}
+    >
       <Box
         sx={{
           px: 2,
@@ -111,7 +128,7 @@ const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
           position: 'sticky',
           top: 0,
           zIndex: 1,
-          bgcolor: 'background.paper'
+          bgcolor: 'background.paper',
         }}
       >
         <Box display="flex" alignItems="center">
@@ -152,22 +169,26 @@ const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
         </Box>
       </Box>
 
-      <Box sx={{
-        flex: 1,
-        overflowY: 'auto',
-        scrollbarWidth: 'none',
-        '&::-webkit-scrollbar': { display: 'none' },
-        py: 1
-      }}>
+      <Box
+        sx={{
+          flex: 1,
+          overflowY: 'auto',
+          scrollbarWidth: 'none',
+          '&::-webkit-scrollbar': { display: 'none' },
+          py: 1,
+        }}
+      >
         <List>{renderListItems(menuItems)}</List>
       </Box>
 
-      <Box sx={{
-        position: 'sticky',
-        bottom: 0,
-        bgcolor: 'background.paper',
-        borderColor: 'divider'
-      }}>
+      <Box
+        sx={{
+          position: 'sticky',
+          bottom: 0,
+          bgcolor: 'background.paper',
+          borderColor: 'divider',
+        }}
+      >
         <List>{renderListItems(bottomItems)}</List>
       </Box>
     </Box>
@@ -192,16 +213,14 @@ const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
             width: drawerWidth,
             boxSizing: 'border-box',
             borderRight: 'none',
-            boxShadow: 'none'
+            boxShadow: 'none',
           },
         }}
       >
         {drawer}
       </Drawer>
-
     </Box>
   );
-
 };
 
 export default Sidebar;