text: import PropTypes from 'prop-types';
  import styled from '@emotion/styled';
  import { AppBar, Avatar, Badge, Box, IconButton, Toolbar, Tooltip } from '@mui/material';
  import MenuIcon from '@mui/icons-material/Menu';
  import SearchIcon from '@mui/icons-material/Search';
  import { Bell as BellIcon } from '../icons/bell';
  import { UserCircle as UserCircleIcon } from '../icons/user-circle';
  import { Users as UsersIcon } from '../icons/users';
  import { Bar } from 'react-chartjs-2';
  import {Button} from '@mui/material';
  import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
  
  
  const DashboardNavbarRoot = styled(AppBar)(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[3]
  }));
  
  export const DashboardNavbar = (props) => {
    const { onSidebarOpen, ...other } = props;
  
    return (
      <>
        <DashboardNavbarRoot
          sx={{
            left: {
              lg: 280
            },
            width: {
              lg: 'calc(100% - 280px)'
            }
          }}
          {...other}>
          <Toolbar
            disableGutters
            sx={{
              minHeight: 64,
              left: 0,
              px: 2
            }}
          >
            <IconButton
              onClick={onSidebarOpen}
              sx={{
                display: {
                  xs: 'inline-flex',
                  lg: 'none'
                }
              }}
            >
              <MenuIcon fontSize="small" />
            </IconButton>
            
            <Button
              endIcon={<ArrowDropDownIcon fontSize="small" />}
              size="small"
            >
              Selection du Compartiment
            </Button>
            
            <Box sx={{ flexGrow: 1 }} />
            <Tooltip title="Contacts">
              <IconButton sx={{ ml: 1 }}>
                <UsersIcon fontSize="small" />
              </IconButton>
            </Tooltip>
            <Tooltip title="Notifications">
              <IconButton sx={{ ml: 1 }}>
                <Badge
                  badgeContent={4}
                  color="primary"
                  variant="dot"
                >
                  <BellIcon fontSize="small" />
                </Badge>
              </IconButton>
            </Tooltip>
            
          </Toolbar>
        </DashboardNavbarRoot>
      </>
    );
  };
  
  DashboardNavbar.propTypes = {
    onSidebarOpen: PropTypes.func
  };
  