feat: add menu and event to show clients page, also add a basic clients page

src/components/AppHeader.jsx

@@ -4,7 +4,7 @@ import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/ma
 import SearchIcon from '@mui/icons-material/Search';
 import MenuDrawer from './MenuDrawer';
 
-export default function AppHeader({ zone = 'public' }) {
+export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
   const bgColor = {
     public: '#40120EFF',
@@ -63,7 +63,12 @@ export default function AppHeader({ zone = 'public' }) {
         )}
 
         {/* Rendering the Drawer */}
-        <MenuDrawer zone='private' open={menuOpen} onClose={() => setMenuOpen(false)} />
+        <MenuDrawer
+          zone="private"
+          open={menuOpen}
+          onClose={() => setMenuOpen(false)}
+          onSelect={onSelectMenuItem} // pass handler from App
+        />
 
       </Toolbar>
     </AppBar>

src/components/MenuDrawer.jsx

@@ -3,10 +3,10 @@ import { Drawer, List, ListItem, ListItemText, useMediaQuery } from '@mui/materi
 const menuOptions = {
   public: ['Home', 'Explore', 'Contact'],
   restricted: ['Dashboard', 'Projects', 'Support'],
-  private: ['Products', 'Provider', 'Categories', 'Users', 'Orders', 'Settings', 'Logout'],
+  private: ['Products', 'Clients', 'Categories', 'Users', 'Orders', 'Settings', 'Logout'],
 };
 
-export default function MenuDrawer({ zone = 'public', open, onClose }) {
+export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
   const isMobile = useMediaQuery('(max-width:900px)');
   const items = menuOptions[zone];
 
@@ -21,7 +21,10 @@ export default function MenuDrawer({ zone = 'public', open, onClose }) {
     }}>
       <List sx={{ width: isMobile ? '100vw' : 250, marginTop: 14 }}>
         {items.map((text, index) => (
-          <ListItem key={index} onClick={onClose}>
+          <ListItem key={index}  onClick={() => {
+              onClose(); // Close drawer
+              onSelect?.(text); // Notify parent of selected item
+            }}>
             <ListItemText
               primary={text}
               slotProps={{