RestaurantDash/src/components/Home/AppBar.js

import React from 'react';
import {
    AppBar,
    Toolbar,
    Typography,
    Box,
    IconButton,
    Divider,
    Avatar,
    Button,
    Autocomplete,
    TextField,
    InputAdornment,
    useTheme,
    useMediaQuery,
} from '@mui/material';
import { useLocation } from 'react-router-dom';
import MenuIcon from '@mui/icons-material/Menu';
import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import SearchIcon from '@mui/icons-material/Search';

const top100Films = [
    { title: 'The Shawshank Redemption' },
    { title: 'The Godfather' },
    { title: 'The Dark Knight' },
    { title: 'Pulp Fiction' },
];

const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
    const location = useLocation();
    const theme = useTheme();
    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
    const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));

    return (
        <AppBar
            sx={{
                height: { xs: 56, sm: 64, md: 66 },
                backgroundColor: '#F6F6F6',
                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 side with toggle button */}
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                    {/* Toggle button for mobile/tablet */}
                    {(isMobile || isMediumScreen) && (
                        <IconButton
                            color="inherit"
                            aria-label="open drawer"
                            edge="start"
                            onClick={onDrawerToggle}
                            sx={{ mr: 2 }}
                        >
                            <MenuIcon />
                        </IconButton>
                    )}

                    {location.pathname === '/dashboard' ? (
                        <Typography
                            variant="h6"
                            component="div"
                            sx={{
                                fontWeight: '500',
                                fontSize: { xs: '18px', sm: '20px', md: '24px' },
                                whiteSpace: 'nowrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                maxWidth: { xs: '200px', sm: 'none' }
                            }}
                        >
                            Welcome to KitchPlus
                        </Typography>
                    ) : (
                        <Autocomplete
                            sx={{
                                width: { xs: '200px', sm: '250px', md: '300px' },
                                borderRadius: '8px',
                            }}
                            freeSolo
                            id="free-solo-2-demo"
                            disableClearable
                            options={top100Films.map((option) => option.title)}
                            renderInput={(params) => (
                                <TextField
                                    {...params}
                                    placeholder="Search"
                                    InputProps={{
                                        ...params.InputProps,
                                        type: 'search',
                                        endAdornment: (
                                            <InputAdornment position="end">
                                                <SearchIcon sx={{ color: '#667085' }} />
                                            </InputAdornment>
                                        ),
                                    }}
                                    sx={{
                                        '& .MuiInputBase-root': {
                                            backgroundColor: 'white',
                                            height: { xs: 36, sm: 38, md: 40 },
                                        },
                                    }}
                                />
                            )}
                        />
                    )}
                </Box>

                {/* Right side */}
                <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.8, sm: 1, md: 1.5 } }}>
                    {location.pathname === '/dashboard' && !isSmallScreen && (
                        <Button
                            variant="contained"
                            sx={{
                                display: { xs: 'none', sm: 'none', md: 'flex' }, // هذا السطر يخفي الزر عند xs و sm ويظهره من md وما فوق
                                color: 'white',
                                height: { xs: 32, sm: 36, md: 40 },
                                mr: { xs: '6px', sm: '8px', md: '10px' },
                                backgroundColor: '#61677F',
                                borderRadius: '8px',
                                fontWeight: 600,
                                fontSize: { xs: '12px', sm: '13px', md: '14px' },
                                textTransform: 'none',
                                whiteSpace: 'nowrap',
                            }}
                        >
                            {isMediumScreen ? 'Switch Company' : 'Switch Company Profits'}
                        </Button>
                    )}
                    {location.pathname === '/dashboard' && (
                        <Divider
                            orientation="vertical"
                            flexItem
                            sx={{
                                height: { xs: 30, sm: 36, md: 40 },
                                alignSelf: 'center',
                                mx: 1 // إضافة هامش أفقي إذا لزم الأمر
                            }}
                        />
                    )}
                    <IconButton color="#667085" size={isSmallScreen ? 'small' : 'medium'}>
                        <NotificationsOutlinedIcon fontSize={isSmallScreen ? 'small' : 'medium'} />
                    </IconButton>

                    <Divider
                        orientation="vertical"
                        flexItem
                        sx={{
                            height: { xs: 30, sm: 36, md: 40 },
                            alignSelf: 'center'
                        }}
                    />

                    <Avatar
                        alt="Admin"
                        src="/images/waitress3.png"
                        sx={{
                            width: { xs: 28, sm: 32, md: 40 },
                            height: { xs: 28, sm: 32, md: 40 }
                        }}
                    />

                    {!isSmallScreen && (
                        <Typography
                            variant="body1"
                            sx={{
                                ml: { sm: 0.5, md: 1 },
                                color: '#61677F',
                                fontSize: { xs: '12px', sm: '13px', md: '14px' },
                                whiteSpace: 'nowrap',
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                maxWidth: { xs: '100px', sm: '120px', md: 'none' }
                            }}
                        >
                            Admin@gmail.com
                        </Typography>
                    )}

                    <IconButton
                        color="inherit"
                        sx={{
                            mt: 0.5,
                            color: '#A6ACB8',
                            padding: { xs: '4px', sm: '8px' }
                        }}
                        size={isSmallScreen ? 'small' : 'medium'}
                    >
                        <KeyboardArrowDownIcon fontSize={isSmallScreen ? 'small' : 'medium'} />
                    </IconButton>
                </Box>
            </Toolbar>
        </AppBar>
    );
};

export default KitchPlusAppBar;