@mui/material#CssBaseline JavaScript Examples

function App() {
  return (
    <BrowserRouter>
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <GlobalStyles />
          <Pace color={theme.palette.primary.light} />
          <Suspense fallback={<Fragment />}>
            <Switch>
              <Route path="/c">
                <LoggedInComponent />
              </Route>
              <Route>
                <LoggedOutComponent />
              </Route>
            </Switch>
          </Suspense>
        </ThemeProvider>
      </StyledEngineProvider>
    </BrowserRouter>
  );
}

export default function ThemeProvider({ children }) {
  const themeOptions = useMemo(
    () => ({
      palette,
      shape: { borderRadius: 8 },
      typography,
      shadows,
      customShadows,
    }),
    []
  );

  const theme = createTheme(themeOptions);
  theme.components = componentsOverride(theme);

  return (
    <StyledEngineProvider injectFirst>
      <MUIThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </MUIThemeProvider>
    </StyledEngineProvider>
  );
}

MatxTheme = ({ children }) => {
  const { settings } = useSettings();
  let activeTheme = { ...settings.themes[settings.activeTheme] };

  return (
    <ThemeProvider theme={activeTheme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  );
}

ReactDOM.render(
  <StyledEngineProvider injectFirst>
    <BrowserRouter>
      <CssBaseline />
      <App />
    </BrowserRouter>
  </StyledEngineProvider>,
  document.getElementById('root')
);

render(
	<ThemeProvider theme={theme}>
		<CssBaseline />
		<Demo />
	</ThemeProvider>,
	document.querySelector('#demo')
);

ThemeSetup = ({ children }) => {
    return (
        <StyledComponentsThemeProvider
            theme={{
                colors: {
                    primary: '#1d446b',
                    secondary: '#82df66',
                    tertiary: '#2195f3',
                    success: '#28a745',
                    danger: '#dc3545',
                    gray: '#545454',
                    link: '#4DCFF3',
                    defaultFont: '#545454',
                    background: '#ffffff',
                    border: borderColor,
                    green: '#a7da19',
                    alert: {
                        primary: {
                            background: '#43aeff',
                            font: '#1d3c63',
                        },
                        warning: {
                            background: '#fff3cd',
                            font: '#856404',
                        },
                        danger: {
                            background: '#f8d7da',
                            font: '#721c24',
                        },
                    },
                },
                border: `1px solid ${borderColor}`,
                padding: '5px',
                fontSize: 16,
                breakpoints: {
                    xs: 0,
                    sm: 600,
                    md: 960,
                    lg: 1280,
                    xl: 1920,
                },
                rem: (factor) => `${16 * factor}px`,
            }}
        >
            <CssBaseline />
            {children}
        </StyledComponentsThemeProvider>
    );
}

Layout = ({drawerMenu, toolbarChildren, toolBarMenu, children}) => {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  const [breadcrumb, setBreadcrumb] = useState([]);

  return (
    <Box sx={{ display: 'flex'}}>
        <CssBaseline />
        <AppBar position="fixed" open={open}>
            <Toolbar>
              <div style={{paddingRight: '20px', display: open?"none":"inline-flex"}}><Logo /></div>
              <IconButton
                color="inherit"
                aria-label="open drawer"
                onClick={handleDrawerOpen}
                edge="start"
                sx={{
                  marginRight: '36px',
                  ...(open && { display: 'none' }),
                }}
              >
                
                <MenuIcon />
              </IconButton>
                {toolbarChildren}
                <div style={{
                    marginLeft: "auto",
                    marginRight: "0px",
                }}>{toolBarMenu}</div>
            </Toolbar>
        </AppBar>
        <Drawer
            variant="permanent"
            open={open}
        >
          <DrawerHeader>
            {open && <div style={{marginLeft:'0px', marginRight:'auto', display:'inline-flex',alignItems: 'center', flexWrap: 'wrap',}}>
                <div style={{display: 'inline-flex', paddingRight: '20px'}}>
                    <Logo />
                </div>
                <h2>FIREACT</h2>
            </div>}
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </DrawerHeader>
        <Divider />
            {drawerMenu}
        <Divider />
        </Drawer>
        <Box component="main" sx={{ flexGrow: 1, overflow:'hidden'}}>
            <DrawerHeader />
            <Box width={1} style={{position:"fixed", zIndex: '1200'}}>
                <Paper square>
                    <Box p={2}>
                    <Breadcrumb links={breadcrumb} />
                    </Box>
                </Paper>
            </Box>
            <div style={{position: 'relative'}}>
            <Box mt={10} ml={3} mr={3} mb={3}>
              <BreadcrumbContext.Provider value={{setBreadcrumb}}>
                  {children}
              </BreadcrumbContext.Provider>
            </Box>
            </div>
        </Box>
    </Box>
  );
}

App = () => {
  const allPages = useRoutes(routes);

  const toasterOptions = {
    style: {
      fontWeight: 500,
      fontFamily: "'Poppins', sans-serif",
    },
  };

  AOS.init({
    // Global settings:
    disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
    startEvent: "DOMContentLoaded", // name of the event dispatched on the document, that AOS should initialize on
    initClassName: "aos-init", // class applied after initialization
    animatedClassName: "aos-animate", // class applied on animation
    useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
    disableMutationObserver: false, // disables automatic mutations' detections (advanced)
    debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
    throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

    // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
    offset: 120, // offset (in px) from the original trigger point
    delay: 0, // values from 0 to 3000, with step 50ms
    duration: 400, // values from 0 to 3000, with step 50ms
    easing: "ease", // default easing for AOS animations
    once: false, // whether animation should happen only once - while scrolling down
    mirror: false, // whether elements should animate out while scrolling past them
    anchorPlacement: "top-bottom", // defines which position of the element regarding to window should trigger the animation
  });

  return (
    <React.Fragment>
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={darkTheme}>
          <CssBaseline />
          <Toaster toastOptions={toasterOptions} />
          {allPages}
        </ThemeProvider>
      </StyledEngineProvider>
    </React.Fragment>
  );
}

export default function Demo() {
	const [currentPhoto, setCurrentPhoto] = React.useState(DEFAULT_IMAGE);
	const [showPhoto, setShowPhoto] = React.useState(true);

	const [showLoading, setShowLoading] = React.useState(SHOW_LOADING);
	const [errorIcon, setErrorIcon] = React.useState(ERROR_ICON);
	const [height, setHeight] = React.useState(HEIGHT);
	const [width, setWidth] = React.useState(WIDTH);
	const [shift, setShift] = React.useState(SHIFT);
	const [distance, setDistance] = React.useState(DISTANCE);
	const [shiftDuration, setShiftDuration] = React.useState(SHIFT_DURATION);
	const [duration, setDuration] = React.useState(DURATION);
	const [easing, setEasing] = React.useState(EASING);
	const [fit, setFit] = React.useState(FIT);
	const [bgColor, setBgColor] = React.useState(BG_COLOR);

	function getNewPhoto() {
		if (mobileOpen) setMobileOpen(false);
		const newPhoto = Math.floor(Math.random() * 1051);
		setShowPhoto(false);
		setCurrentPhoto(newPhoto);
		setTimeout(() => {
			setShowPhoto(true);
		}, 100);
	}

	function refreshPhoto() {
		if (mobileOpen) setMobileOpen(false);
		setShowPhoto(false);
		setTimeout(() => {
			setShowPhoto(true);
		}, 100);
	}

	function resetDefaults() {
		setShowLoading(SHOW_LOADING);
		setErrorIcon(ERROR_ICON);
		setHeight(HEIGHT);
		setWidth(WIDTH);
		setShift(SHIFT);
		setDistance(DISTANCE);
		setShiftDuration(SHIFT_DURATION);
		setDuration(DURATION);
		setEasing(EASING);
		setFit(FIT);
		setBgColor(BG_COLOR);
	}

	const [mobileOpen, setMobileOpen] = React.useState(false);

	const mobile = useMediaQuery('@media (max-width: 900px)');

	function handleDrawerToggle() {
		setMobileOpen(!mobileOpen);
	}

	return (
		<Box sx={{ display: 'flex', height: '100vh' }}>
			<CssBaseline />
			<AppBar
				elevation={0}
				position="fixed"
				sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
			>
				<Toolbar>
					<IconButton
						color="inherit"
						aria-label="open drawer"
						edge="start"
						onClick={handleDrawerToggle}
						sx={{ mr: 2, display: { md: 'none' } }}
					>
						{mobileOpen ? <CodeOffIcon /> : <CodeIcon />}
					</IconButton>
					<Typography
						variant="h6"
						noWrap
						component="div"
						sx={{ flexGrow: 1, display: { xs: 'none', md: 'inline-block' } }}
					>
						<TypeIt
							getBeforeInit={(instance) => {
								instance
									.pause(3500)
									.type('npm install mui-image')
									.pause(1500)
									.delete()
									.type("import Image from 'mui-image'");

								return instance;
							}}
							options={{ speed: 120, cursor: false }}
						/>
					</Typography>
					<Typography
						variant="h6"
						noWrap
						component="div"
						sx={{ flexGrow: 1, display: { xs: 'inline-block', md: 'none' } }}
					>
						mui-image
					</Typography>
					<Box display="flex">
						<IconButton
							onClick={() =>
								window.open('https://yarnpkg.com/package/mui-image')
							}
							color="inherit"
						>
							<YarnIcon
								viewBox="0 0 256 256"
								fontSize="large"
								color="inherit"
							/>
						</IconButton>
						<IconButton
							onClick={() => window.open('https://npmjs.com/package/mui-image')}
							color="inherit"
						>
							<NpmIcon fontSize="large" color="inherit" />
						</IconButton>
						<IconButton
							onClick={() =>
								window.open('https://github.com/benmneb/mui-image')
							}
							color="inherit"
						>
							<GitHubIcon fontSize="large" color="inherit" />
						</IconButton>
					</Box>
				</Toolbar>
			</AppBar>
			<Drawer
				variant={mobile ? 'temporary' : 'permanent'}
				open={mobile ? mobileOpen : true}
				onClose={handleDrawerToggle}
				ModalProps={{
					keepMounted: true,
				}}
				sx={{
					width: DRAWER_WIDTH,
					maxWidth: '100vw',
					flexShrink: 0,
					'& .MuiDrawer-paper': {
						width: DRAWER_WIDTH,
						maxWidth: '100vw',
						boxSizing: 'border-box',
					},
				}}
			>
				<Toolbar />
				<Stack
					spacing={2}
					component="section"
					padding={2}
					sx={{ minWidth: '100%' }}
				>
					<Box component="div" variant="h6">
						{'<Image'}
					</Box>
					<Stack spacing={1} sx={{ pl: 2 }}>
						<Line component="div">
							src="https://picsum.photos/id/{currentPhoto}/2000"
						</Line>
						<Tooltip title="Any valid CSS `height` property" placement="right">
							<Line component="div">
								height="
								<TextField
									variant="standard"
									value={height}
									onChange={(e) => setHeight(e.target.value)}
								/>
								"
							</Line>
						</Tooltip>
						<Tooltip title="Any valid CSS `width` property" placement="right">
							<Line component="div">
								width="
								<TextField
									variant="standard"
									value={width}
									onChange={(e) => setWidth(e.target.value)}
								/>
								"
							</Line>
						</Tooltip>
						<Tooltip
							title="Any valid CSS `object-fit` property"
							placement="right"
						>
							<Line component="div">
								fit=
								<Select
									variant="standard"
									value={fit}
									onChange={(e) => setFit(e.target.value)}
									sx={{ minWidth: 100 }}
								>
									<MenuItem value="fill">"fill"</MenuItem>
									<MenuItem value="contain">"contain"</MenuItem>
									<MenuItem value="cover">"cover"</MenuItem>
									<MenuItem value="none">"none"</MenuItem>
									<MenuItem value="scale-down">"scale-down"</MenuItem>
								</Select>
							</Line>
						</Tooltip>
						<Tooltip
							title="Number of milliseconds the image takes to transition in"
							placement="right"
						>
							<Line component="div">
								duration={'{'}
								<TextField
									variant="standard"
									value={duration}
									onChange={(e) => setDuration(e.target.value)}
								/>
								{'}'}
							</Line>
						</Tooltip>
						<Tooltip
							title="Any valid CSS `transition-timing-function` property"
							placement="right"
						>
							<Line component="div">
								easing=
								<Select
									variant="standard"
									value={easing}
									onChange={(e) => setEasing(e.target.value)}
									sx={{ minWidth: 100 }}
								>
									<MenuItem value="cubic-bezier(0.7, 0, 0.6, 1)">
										"cubic-bezier(0.7, 0, 0.6, 1)"
									</MenuItem>
									<MenuItem value="ease">"ease"</MenuItem>
									<MenuItem value="ease-in">"ease-in"</MenuItem>
									<MenuItem value="ease-out">"ease-out"</MenuItem>
									<MenuItem value="ease-in-out">"ease-in-out"</MenuItem>
									<MenuItem value="linear">"linear"</MenuItem>
								</Select>
							</Line>
						</Tooltip>
						<Tooltip
							title="Once installed you can add a custom loading indicator"
							placement="right"
						>
							<Line component="div">
								showLoading=
								<FormControlLabel
									sx={{ ml: 0 }}
									control={
										<Switch
											checked={showLoading}
											onChange={(e) => setShowLoading(e.target.checked)}
										/>
									}
									label={`{ ${showLoading} }`}
									labelPlacement="start"
								/>
							</Line>
						</Tooltip>
						<Tooltip
							title="Once installed you can add a custom error icon"
							placement="right"
						>
							<Line component="div">
								errorIcon=
								<FormControlLabel
									sx={{ ml: 0 }}
									control={
										<Switch
											checked={errorIcon}
											onChange={(e) => setErrorIcon(e.target.checked)}
										/>
									}
									label={`{ ${errorIcon} }`}
									labelPlacement="start"
								/>
							</Line>
						</Tooltip>
						<Tooltip
							title="Direction to shift image as it appears"
							placement="right"
						>
							<Line component="div">
								shift=
								<Select
									variant="standard"
									value={shift || 'null'}
									onChange={(e) => setShift(e.target.value)}
									sx={{ minWidth: 100 }}
								>
									<MenuItem value={'null'}>{'{ null }'}</MenuItem>
									<MenuItem value="top">"top"</MenuItem>
									<MenuItem value="right">"right"</MenuItem>
									<MenuItem value="bottom">"bottom"</MenuItem>
									<MenuItem value="left">"left"</MenuItem>
								</Select>
							</Line>
						</Tooltip>
						<Tooltip
							title="Distance to shift the image as it appears. Any valid CSS `length` property"
							placement="right"
						>
							<Line component="div">
								distance="
								<TextField
									variant="standard"
									value={distance}
									onChange={(e) => setDistance(e.target.value)}
								/>
								"
							</Line>
						</Tooltip>
						<Tooltip
							title="Number of milliseconds the shift takes"
							placement="right"
						>
							<Line component="div">
								shiftDuration={'{'}
								<TextField
									variant="standard"
									value={shiftDuration || duration * 0.3}
									onChange={(e) => setShiftDuration(e.target.value)}
								/>
								{'}'}
							</Line>
						</Tooltip>
						<Tooltip
							title="Color the image transitions in from. Any valid CSS `background-color` property"
							placement="right"
						>
							<Line component="div">
								bgColor="
								<TextField
									variant="standard"
									value={bgColor}
									onChange={(e) => setBgColor(e.target.value)}
								/>
								"
							</Line>
						</Tooltip>
					</Stack>
					<Box component="div" variant="h6">
						{'/>'}
					</Box>
					<Button
						disabled={showPhoto === 'refresh'}
						variant="contained"
						onClick={refreshPhoto}
						disableElevation
					>
						Refresh photo
					</Button>
					<Button
						disabled={showPhoto === 'new'}
						variant="outlined"
						onClick={getNewPhoto}
					>
						Random photo
					</Button>
					<Button onClick={resetDefaults}>Reset defaults</Button>
				</Stack>
			</Drawer>
			<Box component="section" sx={{ flexGrow: 1, backgroundColor: bgColor }}>
				<Toolbar />
				<ImageOutput
					sx={{
						maxHeight: { xs: 'calc(100vh - 56px)', sm: 'calc(100vh - 64px)' },
					}}
				>
					{showPhoto && (
						<Image
							src={`https://picsum.photos/id/${currentPhoto}/2000`}
							width={width}
							height={height}
							duration={duration}
							showLoading={showLoading}
							errorIcon={errorIcon}
							shift={shift}
							distance={distance}
							shiftDuration={shiftDuration}
							easing={easing}
							fit={fit}
							bgColor={bgColor}
						/>
					)}
				</ImageOutput>
			</Box>
		</Box>
	);
}

Layout = (props) => {
  const { window } = props;
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const sidebarContents = [
    {
      title: "Contacts",
      link: "/admin_dashboard/contacts",
      icon: <Phone strokeWidth={1} />,
    },
    {
      title: "Tickets",
      link: "/admin_dashboard/tickets",
      icon: <Package strokeWidth={1} />,
    },
    {
      title: "Todos",
      link: "/admin_dashboard/todos",
      icon: <FileText strokeWidth={1} />,
    },
    {
      title: "Email",
      link: "/admin_dashboard/emails",
      icon: <Inbox strokeWidth={1} />,
    },
    {
      title: "CDA",
      link: "/admin_dashboard/cda",
      icon: <Book strokeWidth={1} />,
    },
  ];

  const drawer = (
    <div>
      <Toolbar />
      <Divider />
      <List>
        {sidebarContents.map((item, index) => (
          <ListItem button key={index} component={NavLink} to={item.link}>
            <ListItemIcon>{item.icon}</ListItemIcon>
            <ListItemText primary={item.title} />
          </ListItem>
        ))}
      </List>
      <Divider />
    </div>
  );

  const container =
    window !== undefined ? () => window().document.body : undefined;

  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const renderMenu = (
    <Menu
      id="long-menu"
      MenuListProps={{
        "aria-labelledby": "long-button",
      }}
      anchorEl={anchorEl}
      open={open}
      onClose={handleClose}
    >
      <MenuItem onClick={handleClose}>
        <ListItemIcon>
          <User width="18px" strokeWidth={1.5} />
        </ListItemIcon>
        <Typography variant="inherit">Profile</Typography>
      </MenuItem>
      <MenuItem onClick={handleClose}>
        <ListItemIcon>
          <LogOut width="18px" strokeWidth={1.5} />
        </ListItemIcon>
        <Typography variant="inherit">Logout</Typography>
      </MenuItem>
    </Menu>
  );

  return (
    <section className="wrapper">
      <Box sx={{ display: "flex" }}>
        <CssBaseline />
        <AppBar
          position="fixed"
          sx={{
            // width: { sm: `calc(100% - ${drawerWidth}px)` },
            // ml: { sm: `${drawerWidth}px` },
            backgroundColor: "#1e1e2f",
            backgroundImage: "none",
            boxShadow: "none",
            borderTop: "2px solid #1d8cf8",
          }}
        >
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              edge="start"
              onClick={handleDrawerToggle}
              sx={{ mr: 2, display: { sm: "none" } }}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" noWrap component="div">
              Easy CRM
            </Typography>
            <Box sx={{ flexGrow: 1 }} />
            <IconButton
              color="inherit"
              aria-label="more"
              id="long-button"
              aria-controls={open ? "long-menu" : undefined}
              aria-expanded={open ? "true" : undefined}
              aria-haspopup="true"
              onClick={handleClick}
            >
              <MoreVertical />
            </IconButton>
            {renderMenu}
          </Toolbar>
        </AppBar>
        <Box
          component="nav"
          sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
          aria-label="sidebar"
          className="sidebar"
        >
          {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
            sx={{
              display: { xs: "block", sm: "none" },
              "& .MuiDrawer-paper": {
                boxSizing: "border-box",
                width: 230,
                border: "none",
                // backgroundColor: "transparent",
                background: "linear-gradient(0deg, #3358f4, #1d8cf8)",
                position: "relative",
              },
            }}
          >
            {drawer}
          </Drawer>
          <Drawer
            variant="permanent"
            sx={{
              display: { xs: "none", sm: "block" },
              "& .MuiDrawer-paper": {
                boxSizing: "border-box",
                width: 230,
                border: "none",
                backgroundColor: "transparent",
                position: "relative",
              },
            }}
            open
          >
            {drawer}
          </Drawer>
        </Box>
        <Box
          component="main"
          sx={{
            flexGrow: 1,
            p: 3,
            width: { sm: `calc(100% - ${drawerWidth}px)` },
            overflowY: "scroll",
            // height: "100vh - 64px",
          }}
          className="main-panel"
        >
          <Toolbar />
          <Outlet />
        </Box>
      </Box>
    </section>
  );
}