@material-ui/core#useMediaQuery TypeScript Examples

ListView = (props: BoxProps) => {
	const theme = useTheme()
	const matches = useMediaQuery(theme.breakpoints.down("sm"));
	const maxWidth = props.maxWidth || (matches ? "100%" : "380px")
	return (
		<Box
			width="100%"
			maxWidth={maxWidth}
			height="100%"
		>
			<Box
				position="fixed"
				width="inherit"
				maxWidth="inherit"
				style={{
					paddingTop: NavigationBarHeight
				}}
				{...props}
			>
				<Paper
					elevation={0}
					style={{
						height: "100%",
						width: "100%",
						paddingTop: NavigationBarHeight,
						background: "inherit"
					}}>
					<ListViewProvider>
						<ListHeaderProvider>
							{props.children}
						</ListHeaderProvider>
					</ListViewProvider>
				</Paper>
			</Box>
		</Box>
	)
}

AuthContainer = ({ children, maxWidth = "lg" }: AuthContainerProps) => {
  const classes = useStyles();

  const isXs = useMediaQuery((theme: Theme) => theme.breakpoints.down("xs"));

  return (
    <div className={classes.root}>
      <Container maxWidth={maxWidth} disableGutters={isXs}>
        <Paper elevation={0} className={classes.paper}>
          {children}
        </Paper>
      </Container>
    </div>
  );
}

function ViewBase({ children }: IViewBaseProps) {
    const classes = useStyles();

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

    const isSmallerScreen = useMediaQuery("(max-width: 960px)");
    const isSmallScreen = useMediaQuery("(max-width: 600px)");

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

    return (
        <div className="view-base-root">
            <Messages />
            <Header drawe={!isSmallerScreen} handleDrawerToggle={handleDrawerToggle} />
            <div className={classes.drawer}>
                <Hidden mdUp>
                    <MobileDrawer mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
                </Hidden>
                <Hidden smDown>
                    <Drawer />
                </Hidden>
            </div>
            <div className={`${classes.content} ${isSmallerScreen && classes.contentShift}`}>{children}</div>
        </div>
    );
}

AdminMenu = (props): JSX.Element => {
  // XXX Not used yet
  console.debug('AdminMenu.props', props);

  const { onMenuClick, logout } = props;
  const isXSmall = useMediaQuery((theme: any) => theme.breakpoints.down('xs'));
  const open = useSelector(state => state.admin.ui.sidebarOpen);
  const resources = useSelector(getResources);

  return (
    <div>
      {resources.map(resource => (
        <MenuItemLink
          key={resource.name}
          to={`/${resource.name}`}
          primaryText={resource.options && resource.options.label || resource.name}
          leftIcon={createElement(resource.icon)}
          onClick={onMenuClick}
          sidebarIsOpen={open}
        />
      ))}
      <MenuItemLink
        to="/custom-route"
        primaryText="Miscellaneous"
        leftIcon={<LabelIcon />}
        onClick={onMenuClick}
        sidebarIsOpen={open}
      />
      {isXSmall && logout}
    </div>
  );
}

/**
 * A HOC (higher order component) that connects the boundary dropdown to redux state
 */
function BoundaryDropdown({
  ...rest
}: Omit<
  BoundaryDropdownProps,
  'selectedBoundaries' | 'setSelectedBoundaries' | 'labelMessage' | 'selectAll'
>) {
  const { t } = useSafeTranslation();
  const isMobile = useMediaQuery((theme: Theme) =>
    theme.breakpoints.only('xs'),
  );
  const labelMessage = t(`${isMobile ? 'Tap' : 'Click'} the map to select`);

  const dispatch = useDispatch();
  const selectedBoundaries = useSelector(getSelectedBoundaries);
  // toggle the selection mode as this component is created and destroyed.
  // (users can only click the map to select while this component is visible)
  useEffect(() => {
    dispatch(setIsSelectionMode(true));
    return () => {
      dispatch(setIsSelectionMode(false));
    };
  }, [dispatch]);
  return (
    <SimpleBoundaryDropdown
      {...rest}
      selectedBoundaries={selectedBoundaries}
      setSelectedBoundaries={newSelectedBoundaries => {
        dispatch(setSelectedBoundariesRedux(newSelectedBoundaries));
      }}
      labelMessage={labelMessage}
      selectAll
    />
  );
}

DashboardMap = ({ collection, classes }: DashboardMapProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("xs"));
  const [collectionCenter, collectionBounds] =
    getCollectionCenterAndBounds(collection);

  return (
    <Box className={classes.root}>
      <Map
        classes={{ map: classes.map }}
        initialCenter={collectionCenter || new LatLng(0, 0)}
        initialBounds={collectionBounds}
        initialZoom={3}
        collection={collection}
        showAlertLevelLegend={false}
        showWaterMark={false}
        geolocationEnabled={false}
        defaultLayerName="Heat Stress"
        legendBottom={isMobile ? 35 : 20}
        legendLeft={isMobile ? 2 : 4}
      />
    </Box>
  );
}

export function useDynamicColumns(
  cols: ColumnBreakpoints | number | undefined,
): number {
  const matches: (Breakpoint | null)[] = [
    useMediaQuery((theme: Theme) => theme.breakpoints.up('xl')) ? 'xl' : null,
    useMediaQuery((theme: Theme) => theme.breakpoints.up('lg')) ? 'lg' : null,
    useMediaQuery((theme: Theme) => theme.breakpoints.up('md')) ? 'md' : null,
    useMediaQuery((theme: Theme) => theme.breakpoints.up('sm')) ? 'sm' : null,
    useMediaQuery((theme: Theme) => theme.breakpoints.up('xs')) ? 'xs' : null,
  ];

  let numOfCols = 1;

  if (typeof cols === 'number') {
    numOfCols = cols;
  } else {
    const breakpoint = matches.find(k => k !== null) ?? 'xs';
    numOfCols = cols?.[breakpoint] ?? colDefaults[breakpoint];
  }

  return numOfCols;
}

useHoverArea = (disableHoverBelow?: Breakpoint): [
  hoverAreaProps: {
    onMouseOver: () => void;
    onMouseOut: () => void;
  },
  isHovering: boolean,
  isHoverDisabled: boolean,
  forceSetIsHovering: (isHovering: boolean) => void,
] => {
  const theme = useTheme();
  const matchesHoverDown = useMediaQuery(theme.breakpoints.down(disableHoverBelow || 'sm'));
  const [isHovering, setIsHovering] = useState<boolean>(false);
  const isHoverDisabled = !!disableHoverBelow && matchesHoverDown;

  const hoverAreaProps = {
    onMouseOver: () => setIsHovering(true),
    onMouseOut: () => setIsHovering(false),
  };

  return [hoverAreaProps, isHovering, isHoverDisabled, setIsHovering];
}

ChangeNetworkButton = () => {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );
  const [popperOpen, setPopperOpen] = useState(false);
  const { changeNetwork, network } = useTezos();
  const history = useHistory();
  const theme = useTheme();
  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"));
  const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs"));

  const handleClick = (event: React.MouseEvent<any>) => {
    setAnchorEl(event.currentTarget);
    setPopperOpen(!popperOpen);
  };

  const handleNetworkChange = (network: Network) => {
    changeNetwork(network);
    setPopperOpen(!popperOpen);
    history.push("/explorer/daos");
  };

  return (
    <>
      <Button size={isMobileExtraSmall? "small": undefined} color="secondary" variant="outlined" onClick={handleClick}>
        {isMobileSmall ? "" : "Network: "}
        {network}
      </Button>
      <NetworkMenu
        open={popperOpen}
        anchorEl={anchorEl}
        onClose={() => {
          setPopperOpen(false);
        }}
        handleNetworkChange={handleNetworkChange}
      />
    </>
  );
}

Footer: React.FC<IProps> = (props) => {
  const theme: Theme = useTheme();
  const smallQuery = useMediaQuery(theme.breakpoints.up("sm"));

  return (
    <Grid container spacing={10} style={{marginTop: "10px", marginBottom: "10px", padding: smallQuery ? "" : "30px"}} direction={smallQuery ? "row" : "column"}>
      {props.footerLinks.map((footerLink) => {
        return (
          <Link href={footerLink.link} style={{paddingRight: "15px", fontSize: "16px"}} color="textSecondary">{footerLink.name}</Link>
        );
      })}
    </Grid>
  );
}

Menu: FC<Props> = ({ logout, onMenuClick }) => {
    useSelector((state: AppState) => state.theme); // force rerender on theme change
    const isXSmall = useMediaQuery((theme: Theme) =>
        theme.breakpoints.down('xs')
    );

    return isXSmall ? (
        <MobileMenu logout={logout} onMenuClick={onMenuClick} />
    ) : (
        <DesktopMenu onMenuClick={onMenuClick} />
    );
}

DeleteConfirm = ({ open, close, yes }: Props) => {
  const matches = useMediaQuery("(max-width: 768px)");
  return (
    <Dialog open={open} onClose={close}>
      <DialogTitle>DELETE ITEM?</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Are you sure you want to delete this item?
        </DialogContentText>
        <div style={{ display: matches ? "none" : "block" }}>
          <Divider />
          <br />
          <DialogContentText>
            <span style={{ color: "green", fontWeight: "bold" }}>PROTIP:</span>
            <br />
            You can hold down shift when clicking the <b>delete button</b> to
            bypass this confirmation entirely
          </DialogContentText>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={close} color="primary">
          No
        </Button>
        <Button onClick={yes} color="primary" variant="contained">
          Yes
        </Button>
      </DialogActions>
    </Dialog>
  );
}

App = (): ReactElement => {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')

  const theme = useMemo(
    () =>
      createTheme({
        palette: {
          secondary: prefersDarkMode
            ? {
                light: '#4f5b62',
                main: '#d5d5d5',
                dark: '#000a12',
                contrastText: '#ffffff'
              }
            : {
                light: '#4f5b62',
                main: '#263238',
                dark: '#000a12',
                contrastText: '#ffffff'
              },
          primary: {
            light: '#66ffa6',
            main: '#00e676',
            dark: '#00b248',
            contrastText: '#000000'
          }
        }
      }),
    [prefersDarkMode]
  )

  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <Main />
      </ThemeProvider>
    </div>
  )
}

SigninSignupPage = ({ variant }: SigninSignupPageProps) => {
  const classes = useStyles();

  const isSm = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));

  const location = useLocation();
  const from = (location?.state as any)?.from?.pathname || APP_LANDING;

  const resetPasswordMatch = useRouteMatch({
    path: RESET_PASSWORD_PATH,
  });

  const { user } = useSession();
  // if user authed, redirect to home dashboard
  if (user?.emailVerified) {
    return <Redirect to={from} />;
  }

  let component = null;
  let Img = LoginImg;

  if (resetPasswordMatch) {
    component = <ResetPassword />;
    Img = ForgotPasswordImg;
  } else if (user) {
    component = <EmailVerification />;
    Img = NewEmailImg;
  } else {
    component = <SigninSignupForm variant={variant} from={from} />;
    Img = variant === "signin" ? LoginImg : NewAccountImg;
  }

  return (
    <AuthContainer>
      <Grid container>
        <Grid item xs={12} md={6} lg={5} className={classes.contentContainer}>
          <Logo className={classes.logo} />
          {component}
        </Grid>
        {!isSm && (
          <Grid item md={6} lg={7} className={classes.imgContainer}>
            <Img className={classes.img} />
          </Grid>
        )}
      </Grid>
    </AuthContainer>
  );
}

MainLayout: React.FC<Props> = ({ children, notificationsService, authService }) => {
  const classes = useStyles();
  const theme = useTheme();
  const [drawerState, sendDrawer] = useMachine(drawerMachine);

  const aboveSmallBreakpoint = useMediaQuery(theme.breakpoints.up("sm"));
  const xsBreakpoint = useMediaQuery(theme.breakpoints.only("xs"));

  const desktopDrawerOpen = drawerState?.matches({ desktop: "open" });
  const mobileDrawerOpen = drawerState?.matches({ mobile: "open" });
  const toggleDesktopDrawer = () => {
    sendDrawer("TOGGLE_DESKTOP");
  };
  const toggleMobileDrawer = () => {
    sendDrawer("TOGGLE_MOBILE");
  };

  const openDesktopDrawer = (payload: any) => sendDrawer("OPEN_DESKTOP", payload);
  const closeMobileDrawer = () => sendDrawer("CLOSE_MOBILE");

  useEffect(() => {
    if (!desktopDrawerOpen && aboveSmallBreakpoint) {
      openDesktopDrawer({ aboveSmallBreakpoint });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [aboveSmallBreakpoint, desktopDrawerOpen]);

  return (
    <>
      <NavBar
        toggleDrawer={xsBreakpoint ? toggleMobileDrawer : toggleDesktopDrawer}
        drawerOpen={xsBreakpoint ? mobileDrawerOpen : desktopDrawerOpen}
        notificationsService={notificationsService}
      />
      <NavDrawer
        toggleDrawer={xsBreakpoint ? toggleMobileDrawer : toggleDesktopDrawer}
        drawerOpen={xsBreakpoint ? mobileDrawerOpen : desktopDrawerOpen}
        closeMobileDrawer={closeMobileDrawer}
        authService={authService}
      />
      <main className={classes.content} data-test="main">
        <div className={classes.appBarSpacer} />
        <Container maxWidth="md" className={classes.container}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              {children}
            </Grid>
          </Grid>
        </Container>
        <footer>
          <Footer />
        </footer>
      </main>
    </>
  );
}

BuyFiatModal: React.FC<BuyFiatModalProps> = ({
  open,
  onClose,
  buyMoonpay,
}) => {
  const classes = useStyles();
  const { account } = useActiveWeb3React();
  const { breakpoints } = useTheme();
  const mobileWindowSize = useMediaQuery(breakpoints.down('sm'));
  const { initTransak } = useInitTransak();

  return (
    <CustomModal open={open} onClose={onClose}>
      <Box padding={3}>
        <Box display='flex' justifyContent='space-between' alignItems='center'>
          <Typography variant='subtitle2' color='textPrimary'>
            Fiat gateway providers
          </Typography>
          <CloseIcon style={{ cursor: 'pointer' }} onClick={onClose} />
        </Box>
        <Box className={classes.paymentBox}>
          <img src={Moonpay} alt='moonpay' />
          <Box className={classes.buyButton} onClick={buyMoonpay}>
            Buy
          </Box>
        </Box>
        <Box className={classes.paymentBox}>
          <img src={Transak} alt='transak' />
          <Box
            className={classes.buyButton}
            onClick={() => {
              onClose();
              initTransak(account, mobileWindowSize);
            }}
          >
            Buy
          </Box>
        </Box>
        <Box mt={3} display='flex'>
          <Box display='flex' mt={0.3}>
            <HelpIcon />
          </Box>
          <Box ml={1.5} width='calc(100% - 32px)'>
            <Typography variant='body2'>
              Fiat services on Quickswap are provided by third-parties.
              Quickswap is not associated with, responsible or liable for the
              performance of these third-party services. Any claims & questions
              should be addressed with the selected provider.
            </Typography>
          </Box>
        </Box>
      </Box>
    </CustomModal>
  );
}

function ViewBase({ children }: IViewBaseProps) {
  const classes = useStyles();

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

  const isSmallerScreen = useMediaQuery("(max-width: 960px)");
  const isSmallScreen = useMediaQuery("(max-width: 600px)");

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

  return (
    <div className="view-base-root">
      <Messages />
      <Header drawe={!isSmallerScreen} handleDrawerToggle={handleDrawerToggle} />
      <div className={classes.drawer}>
        <Hidden mdUp>
          <MobileDrawer mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
        </Hidden>
        <Hidden smDown>
          <Drawer />
        </Hidden>
      </div>
      <div className={`${classes.content} ${isSmallerScreen && classes.contentShift}`}>
        {!isSmallerScreen && (
          <div className="cubes-top">
            <p>{cubesImage}</p>
          </div>
        )}
        {!isSmallScreen && (
          <div className="cubes-bottom">
            <p>{cubesImage}</p>
          </div>
        )}
        {children}
      </div>
    </div>
  );
}

useSmallScreen = (): boolean => {
  const smallScreen = useMediaQuery(MEDIA_QUERY_SMALL_SCREEN);
  return smallScreen;
}

function ViewBase({ children }: IViewBaseProps) {
    const classes = useStyles();

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

    const isSmallerScreen = useMediaQuery("(max-width: 960px)");
    const isSmallScreen = useMediaQuery("(max-width: 600px)");

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

    return (
        <div className="view-base-root">
            <Messages />
            <Header drawe={!isSmallerScreen} handleDrawerToggle={handleDrawerToggle} />
            <div className={classes.drawer}>
                <Hidden mdUp>
                    <MobileDrawer mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
                </Hidden>
                <Hidden smDown>
                    <Drawer />
                </Hidden>
            </div>
            <div className={`${classes.content} ${isSmallerScreen && classes.contentShift}`}>
                {!isSmallerScreen && (
                    <div className="cubes-top">
                        <p>{cubesImage}</p>
                    </div>
                )}
                {!isSmallScreen && (
                    <div className="cubes-bottom">
                        <p>{cubesImage}</p>
                    </div>
                )}
                {children}
            </div>
        </div>
    );
}

LoadingSkeleton: FC<LoadingSkeletonProps> = ({
  loading,
  children,
  variant,
  width,
  height,
  lines,
  image,
  dark = true,
  className,
  longText,
  textHeight,
}) => {
  const classes = useStyles({ image, textHeight });
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("xs"));
  const [lineWidths, setLineWidths] = useState<
    { key: number; width: number }[]
  >([]);
  const rectSkeletonProps: SkeletonProps =
    variant === "rect" &&
    (typeof width !== "undefined" || typeof height !== "undefined")
      ? { width, height }
      : {};

  useEffect(() => {
    if (typeof lines === "number") {
      setLineWidths(
        times(lines, (i) => ({
          key: i,
          width: random(
            longText || isMobile ? 50 : 20,
            longText || isMobile ? 100 : 40
          ),
        }))
      );
    }
  }, [isMobile, lines, longText]);

  if (!loading) {
    return <>{children}</>;
  }

  if (variant === "text" && typeof lines === "number" && lineWidths.length) {
    return (
      <>
        {lineWidths.map(({ key, width: lineWidth }) => (
          <Skeleton
            animation="wave"
            className={classNames(classes.root, classes.textHeight, className, {
              [classes.dark]: dark,
            })}
            key={key}
            variant={variant}
            width={width || `${lineWidth}%`}
          />
        ))}
      </>
    );
  }

  return (
    <Skeleton
      animation="wave"
      className={classNames(classes.root, classes.image, className, {
        [classes.dark]: dark,
      })}
      variant={variant}
      {...rectSkeletonProps}
    />
  );
}

ProductGallery: React.VFC<Props> = ({ product }) => {
  const styles = useStyles();
  const mobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'));

  const [activeStep, setActiveStep] = useState(0);

  return mobile ? (
    <div className={styles.galleryStepper}>
      <SwipeableViews
        enableMouseEvents
        axis="x"
        index={activeStep}
        onChangeIndex={(index) => setActiveStep(index)}
      >
        <div>
          <Image className={styles.galleryStepperImage} mediaItem={product.image} next={false} />
        </div>
        {product.galleryImages?.nodes?.map(
          (mediaItem) =>
            mediaItem != null && (
              <div key={mediaItem.id}>
                <Image className={styles.galleryStepperImage} mediaItem={mediaItem} next={false} />
              </div>
            ),
        )}
      </SwipeableViews>
      <MobileStepper
        steps={(product.galleryImages?.nodes?.length ?? 0) + 1}
        variant="dots"
        position="static"
        activeStep={activeStep}
        nextButton={<div />}
        backButton={<div />}
      />
    </div>
  ) : (
    <div className={styles.gallery}>
      <figure className={styles.galleryImage}>
        <Image mediaItem={product.image} next={false} />
        <figcaption>{product.image?.caption}</figcaption>
      </figure>
      {product.galleryImages?.nodes?.map(
        (mediaItem) =>
          mediaItem != null && (
            <figure className={styles.galleryImage}>
              <Image key={mediaItem.id} mediaItem={mediaItem} next={false} />
              <figcaption>{mediaItem.caption}</figcaption>
            </figure>
          ),
      )}
    </div>
  );
}

EntityBadgesDialog = ({ open, onClose }: Props) => {
  const theme = useTheme();
  const { entity } = useAsyncEntity();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const badgesApi = useApi(badgesApiRef);

  const {
    value: badges,
    loading,
    error,
  } = useAsync(async () => {
    if (open && entity) {
      return await badgesApi.getEntityBadgeSpecs(entity);
    }
    return [];
  }, [badgesApi, entity, open]);

  const content = (badges || []).map(
    ({ badge: { description }, id, url, markdown }) => (
      <Box marginTop={4} key={id}>
        <DialogContentText component="div">
          <img alt={description || id} src={url} />
          <CodeSnippet language="markdown" text={markdown} showCopyCodeButton />
        </DialogContentText>
      </Box>
    ),
  );

  return (
    <Dialog fullScreen={fullScreen} open={open} onClose={onClose}>
      <DialogTitle>Entity Badges</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Embed badges in other web sites that link back to this entity. Copy
          the relevant snippet of Markdown code to use the badge.
        </DialogContentText>

        {loading && <Progress />}
        {error && <ResponseErrorPanel error={error} />}

        {content}
      </DialogContent>

      <DialogActions>
        <Button onClick={onClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

withBluiAppBar = (): StoryFnReactReturnType => {
    const classes = useStyles();
    const direction = getDirection();
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
    const appBarGroupId = 'AppBar';
    const threeLinerGroupId = 'ThreeLiner';
    const toolbarMenuGroupId = 'ToolbarMenu';
    // AppBar props
    const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
    const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
    const collapsedDesktopHeight = number('collapsedDesktopHeight', 64, {}, appBarGroupId);
    const collapsedMobileHeight = number('collapsedMobileHeight', 56, {}, appBarGroupId);
    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
    const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
    const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);
    // ThreeLiner props
    const title = text('title', 'title', threeLinerGroupId);
    const info = text('info', 'info', threeLinerGroupId);
    // ToolbarMenu props
    const toolbarLabel = text('label', 'Subtitle', toolbarMenuGroupId);
    return (
        <>
            <AppBar
                expandedHeight={expandedHeight}
                collapsedHeight={!isMobile ? collapsedDesktopHeight : collapsedMobileHeight}
                scrollThreshold={scrollThreshold}
                animationDuration={animationDuration}
                backgroundImage={showBackgroundImage ? bgImage : undefined}
                variant={variant}
                classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
            >
                <Toolbar
                    classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}
                >
                    <IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
                        <Menu />
                    </IconButton>
                    <Spacer />
                    <ThreeLiner
                        classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
                        className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
                        title={title}
                        subtitle={
                            <ToolbarMenu
                                classes={{ root: classes.toolbarMenuRoot }}
                                label={toolbarLabel}
                                menuGroups={menuGroups}
                            ></ToolbarMenu>
                        }
                        info={info}
                        animationDuration={animationDuration}
                    />
                    <div style={{ display: 'flex', flexDirection: 'row' }}>
                        <IconButton onClick={action('home icon clicked...')} color={'inherit'}>
                            <Home />
                        </IconButton>
                        <IconButton onClick={action('work icon clicked...')} color={'inherit'}>
                            <Work />
                        </IconButton>
                        <IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
                            <Settings />
                        </IconButton>
                    </div>
                </Toolbar>
            </AppBar>
            <div>{getBodyFiller()}</div>
        </>
    );
}

withMediaQuery = (
  query: string | ((theme: Theme) => string),
  options?: Options,
) => Component => props => {
  const mediaQuery = useMediaQuery(query, options);
  return <Component {...props} mediaQuery={mediaQuery} />;
}

AppTabBar: React.FC<{
  value: number;
  setValue: any;
  labels: string[];
  class1?: any;
  centered?: boolean;
}> = ({ value, setValue, labels, class1, centered }) => {
  const a11yProps = (index: any) => {
    return {
      id: `simple-tab-${index}`,
      "aria-controls": `simple-tabpanel-${index}`
    };
  };

  const handleChange = (event: React.ChangeEvent<any>, newValue: number) => {
    setValue(newValue);
  };

  const theme = useTheme();
  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <StyledAppBar
      position="static"
      style={
        centered && !isMobileSmall
          ? { display: "grid", justifyContent: "center" }
          : undefined
      }
    >
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="simple tabs example"
        style={
          centered && !isMobileSmall
            ? { display: "flex", justifyContent: "center", marginLeft: 12 }
            : undefined
        }
      >
        {labels.map((label, i) => (
          <CustomTab
            label={label}
            {...a11yProps(i)}
            key={i}
            classes={!isMobileSmall ? class1 : undefined}
          />
        ))}
      </Tabs>
    </StyledAppBar>
  );
}

Toolbar = () => {
  const history = useHistory();
  const isSmallScreen = useMediaQuery((theme: any)  => theme.breakpoints.down("xs"));

  return (
    <Slide direction='down' in={true} timeout={800}>
      <AppBar position='sticky' className='AppBar'>
        <AppToolbar>
          <div className='HeaderContainer'>
            <div
              className='HeaderLeftContainer'
              onClick={() => history.push('/')}
            >
              <GamesIcon className='HeaderIcon' />
              <Typography variant={isSmallScreen? 'subtitle1':'h5'} color='inherit' noWrap>
                {title}
              </Typography>
            </div>
            <div>
              <Button title="New Session" startIcon={<AddCircleOutlineIcon/>} color='inherit' onClick={() => history.push('/')}>
                {!isSmallScreen ? 'New Session': null}
              </Button>
              <Button startIcon={<MergeTypeOutlinedIcon/>} size={ isSmallScreen ? "small" : "large"}  color='inherit' onClick={() => history.push('/join')}>
                {!isSmallScreen ? 'Join Session' : null}
              </Button>
              <Button
                id='github-button'
                color='inherit'
                onClick={() =>
                  (window.location.href =
                    'https://github.com/hellomuthu23/planning-poker')
                }
              >
                <GithubIcon></GithubIcon>
              </Button>
            </div>
          </div>
        </AppToolbar>
      </AppBar>
    </Slide>
  );
}

CustomAppBar: FC = props => {
    const classes = useStyles();
    const location = useLocation<{ pathname: string }>();

    const isXSmall = useMediaQuery((theme: Theme) =>
        theme.breakpoints.down('xs')
    );
    const [tourStates] = useTourStates();

    let numberOfTours = 0;
    if (tourStates) {
        numberOfTours = Object.keys(tourStates).reduce((acc, tourId) => {
            if (!tourStates[tourId]) {
                return acc + 1;
            }
            return acc;
        }, 0);
    }

    return (
        <AppBar {...props} elevation={1}>
            {isXSmall ? (
                <>
                    {location.pathname === '/' && (
                        <Logo className={classes.logo} />
                    )}
                    <Typography
                        variant="h6"
                        color="inherit"
                        className={classes.title}
                        id="react-admin-title"
                    />
                </>
            ) : (
                <>
                    <Logo className={classes.logo} />
                    <Typography
                        variant="h6"
                        color="inherit"
                        className={classes.title}
                        id="react-admin-title"
                    />
                    <Search />
                    <IconButton
                        aria-label="Tours"
                        to="/tours"
                        component={Link}
                        color="inherit"
                    >
                        <Badge
                            badgeContent={numberOfTours}
                            color="error"
                            variant="dot"
                        >
                            <TourIcon />
                        </Badge>
                    </IconButton>
                    <ToggleThemeButton />
                    <LanguageSwitcher
                        languages={[
                            { locale: 'en', name: 'English' },
                            { locale: 'fr', name: 'Français' },
                        ]}
                        defaultLanguage="English"
                    />
                </>
            )}
        </AppBar>
    );
}

export default function useChangeMenuIcon(): SvgIconComponent {
  const Icon: SvgIconComponent = () =>
    useMediaQuery("(max-width: 768px)") ? <MoreVert /> : <MoreHoriz />;
  return Icon;
}

export default function ({
    children,
    location,
}: {
    children: NonNullable<React.ReactNode>
    location: any
}): React.ReactElement {
    const [theme, setTheme] = useState<'light' | 'dark'>('light')
    const path: string = location.pathname

    useEffect(() => {
        if (isTouchDevice()) document.documentElement.classList.add('touch')
    }, [])

    const muiTheme = createMuiTheme({
        palette: {
            type: theme,
            primary:
                theme === 'dark'
                    ? {
                          main: blue[300],
                      }
                    : undefined,
            secondary: {
                main: blue[800],
            },
        },
    })

    const isDesktop = useMediaQuery(muiTheme.breakpoints.up('sm'))

    return (
        <>
            <Helmet
                titleTemplate="%s | TL Reference"
                defaultTitle="TL Reference"
            />
            <MuiThemeProvider theme={muiTheme}>
                <>
                    <AppBar position="static" color="secondary">
                        <Toolbar>
                            {isDesktop ? (
                                <DesktopNavigation path={path} />
                            ) : (
                                <MobileNavigation path={path} />
                            )}
                            <GlobalSearchField isMobile={!isDesktop} />
                            <Tooltip title="Toggle dark theme">
                                <IconButton
                                    color="inherit"
                                    onClick={() =>
                                        setTheme(
                                            theme === 'dark' ? 'light' : 'dark'
                                        )
                                    }
                                >
                                    {theme === 'light' ? (
                                        <NightsStayIcon />
                                    ) : (
                                        <Brightness7Icon />
                                    )}
                                </IconButton>
                            </Tooltip>
                        </Toolbar>
                    </AppBar>
                    {children}
                </>
            </MuiThemeProvider>
        </>
    )
}