@mui/material#useMediaQuery JavaScript Examples

MatxSidenav = ({ sx, open, children, toggleSidenav, width = '220px' }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Box height="100%" display="flex">
      <SideNav sx={sx} width={open || !isMobile ? width : '0px'}>
        {children}
      </SideNav>

      {open && isMobile && <SideNavOverlay onClick={toggleSidenav} />}
    </Box>
  );
}

Homepage = () => {
  const matches = useMediaQuery("(min-width:600px)");

  const navigate = useNavigate();

  return (
    <section className="wrapper" style={{ borderTop: "3px solid #1d8cf8" }}>
      <div className="row p-4">
        <div className="col-md-6">
          <h1
            style={{
              fontSize: matches ? "7rem" : "3rem",
              textTransform: "uppercase",
              textAlign: "justify",
              fontWeight: 700,
              textShadow: "-0.04em 0.04em #0f3460, -0.06em 0.06em #fd5d93",
              color: "#fff",
            }}
          >
            Easy CRM for Your Basic CRM needs
          </h1>
          <p className="text-danger lead title">*It's in development</p>
        </div>
        <div className="col-md-6">
          {matches && <img src={SomePic} alt="" style={{ maxWidth: "100%" }} />}
          <div>
            <Button variant="contained" onClick={() => navigate("/login")}>
              Login
            </Button>
            <Button
              variant="outlined"
              color="secondary"
              className="ms-3"
              onClick={() => navigate("/signup")}
            >
              Get started
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

Layout1Topbar = () => {
  const theme = useTheme();
  const { settings, updateSettings } = useSettings();
  const { logout, user } = useAuth();
  const isMdScreen = useMediaQuery(theme.breakpoints.down('md'));

  const updateSidebarMode = (sidebarSettings) => {
    updateSettings({
      layout1Settings: { leftSidebar: { ...sidebarSettings } },
    });
  };

  const handleSidebarToggle = () => {
    let { layout1Settings } = settings;
    let mode;
    if (isMdScreen) {
      mode = layout1Settings.leftSidebar.mode === 'close' ? 'mobile' : 'close';
    } else {
      mode = layout1Settings.leftSidebar.mode === 'full' ? 'close' : 'full';
    }
    updateSidebarMode({ mode });
  };

  return (
    <TopbarRoot>
      <TopbarContainer>
        <Box display="flex">
          <StyledIconButton onClick={handleSidebarToggle}>
            <Icon>menu</Icon>
          </StyledIconButton>

          <IconBox>
            <StyledIconButton>
              <Icon>mail_outline</Icon>
            </StyledIconButton>

            <StyledIconButton>
              <Icon>web_asset</Icon>
            </StyledIconButton>

            <StyledIconButton>
              <Icon>star_outline</Icon>
            </StyledIconButton>
          </IconBox>
        </Box>

        <Box display="flex" alignItems="center">
          <MatxSearchBox />

          <NotificationProvider>
            <NotificationBar />
          </NotificationProvider>

          <ShoppingCart />

          <MatxMenu
            menuButton={
              <UserMenu>
                <Hidden xsDown>
                  <Span>
                    Hi <strong>{user.name}</strong>
                  </Span>
                </Hidden>
                <Avatar src={user.avatar} sx={{ cursor: 'pointer' }} />
              </UserMenu>
            }
          >
            <StyledItem>
              <Link to="/">
                <Icon> home </Icon>
                <Span> Home </Span>
              </Link>
            </StyledItem>

            <StyledItem>
              <Link to="/page-layouts/user-profile">
                <Icon> person </Icon>
                <Span> Profile </Span>
              </Link>
            </StyledItem>

            <StyledItem>
              <Icon> settings </Icon>
              <Span> Settings </Span>
            </StyledItem>

            <StyledItem onClick={logout}>
              <Icon> power_settings_new </Icon>
              <Span> Logout </Span>
            </StyledItem>
          </MatxMenu>
        </Box>
      </TopbarContainer>
    </TopbarRoot>
  );
}

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>
	);
}

Layout1 = () => {
  const { settings, updateSettings } = useSettings();
  const { layout1Settings, secondarySidebar } = settings;
  const topbarTheme = settings.themes[layout1Settings.topbar.theme];
  const {
    leftSidebar: { mode: sidenavMode, show: showSidenav },
  } = layout1Settings;

  const getSidenavWidth = () => {
    switch (sidenavMode) {
      case 'full':
        return sideNavWidth;

      case 'compact':
        return sidenavCompactWidth;

      default:
        return '0px';
    }
  };

  const sidenavWidth = getSidenavWidth();
  const theme = useTheme();
  const isMdScreen = useMediaQuery(theme.breakpoints.down('md'));

  const ref = useRef({ isMdScreen, settings });
  const layoutClasses = `theme-${theme.palette.type}`;

  useEffect(() => {
    let { settings } = ref.current;
    let sidebarMode = settings.layout1Settings.leftSidebar.mode;
    if (settings.layout1Settings.leftSidebar.show) {
      let mode = isMdScreen ? 'close' : sidebarMode;
      updateSettings({ layout1Settings: { leftSidebar: { mode } } });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isMdScreen]);

  return (
    <Layout1Root className={layoutClasses}>
      {showSidenav && sidenavMode !== 'close' && (
        <SidenavTheme>
          <Layout1Sidenav />
        </SidenavTheme>
      )}

      <LayoutContainer width={sidenavWidth} secondarySidebar={secondarySidebar}>
        {layout1Settings.topbar.show && layout1Settings.topbar.fixed && (
          <ThemeProvider theme={topbarTheme}>
            <Layout1Topbar fixed={true} className="elevation-z8" />
          </ThemeProvider>
        )}

        {settings.perfectScrollbar && (
          <StyledScrollBar>
            {layout1Settings.topbar.show && !layout1Settings.topbar.fixed && (
              <ThemeProvider theme={topbarTheme}>
                <Layout1Topbar />
              </ThemeProvider>
            )}
            <Box flexGrow={1} position="relative">
              <MatxSuspense>
                <Outlet />
              </MatxSuspense>
            </Box>

            {settings.footer.show && !settings.footer.fixed && <Footer />}
          </StyledScrollBar>
        )}

        {!settings.perfectScrollbar && (
          <ContentBox>
            {layout1Settings.topbar.show && !layout1Settings.topbar.fixed && (
              <ThemeProvider theme={topbarTheme}>
                <Layout1Topbar />
              </ThemeProvider>
            )}

            <Box flexGrow={1} position="relative">
              <MatxSuspense>
                <Outlet />
              </MatxSuspense>
            </Box>

            {settings.footer.show && !settings.footer.fixed && <Footer />}
          </ContentBox>
        )}

        {settings.footer.show && settings.footer.fixed && <Footer />}
      </LayoutContainer>

      {settings.secondarySidebar.show && <SecondarySidebar />}
    </Layout1Root>
  );
}