@material-ui/core#Hidden JavaScript Examples

Footer = () => {
  return (
    <Fragment>
      <Paper
        elevation={0}
        style={{
          borderStyle: 'solid',
          borderWidth: '1px 0px 0px 0px',
          borderColor: 'grey',
          backgroundColor: 'inherit',
          color: ' inherit',
          width: '100%',
          height: '2%',
          bottom: 0,
          overflowX: 'hidden',
          textAlign: 'right',
        }}
      >
        <Container>
          <Hidden>
            <Grid>
              <h6>
                © Copyright 2020{' '}
                <span style={{ fontWeight: '500' }}>
                  DSC TIET | Developed with
                </span>{' '}
                ❤️
              </h6>
            </Grid>
          </Hidden>
        </Container>
      </Paper>
    </Fragment>
  );
}

MiddleNav = () => {
  const classes = useStyles();

  return (
    <Hidden xsDown>
      <Toolbar className={classes.root} disableGutters>
        <NavSearch />
      </Toolbar>{" "}
    </Hidden>
  );
}

MenuItem = ({ Icon, title, arrow, onClick }) => {
  const classes = Style();
  return (
    <div className={classes.menuItem} onClick={onClick}>
      {Icon}
      <Hidden mdDown>
        <div className={classes.title}>
          <p>{title}</p>
          {arrow && <ArrowDropDownIcon />}
        </div>
      </Hidden>
    </div>
  );
}

function Sidebar(props) {
  const { open, variant, onClose } = props;
  const classes = useStyles();
  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      open={open}
      onClose={onClose}
      variant={variant}
    >
      <section className={classes.root}>
        <Hidden mdUp>
          <IconButton className={classes.menuButton} aria-label="Menu" onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </Hidden>
        <Profile className={classes.profile} />
        <List component="div" disablePadding>
          {pages.map(page => (
            <ListItem
              key={page.title}
              activeClassName={classes.activeListItem}
              className={classes.listItem}
              component={NavLink}
              to={page.href}
            >
              <ListItemIcon className={classes.listItemIcon}>{page.icon}</ListItemIcon>
              <ListItemText classes={{ primary: classes.listItemText }} primary={page.title} />
            </ListItem>
          ))}
        </List>
      </section>
    </Drawer>
  );
}

Home = () => {
  const classes = useStyles();

  return (
    <>
      <div className={classes.root}>
        <DisplacementSphere />
        <LogoLink />
        <Content />
        <ThemeToggle />
        <Hidden smDown>
          <SocialIcons />
        </Hidden>
        <Hidden mdUp>
          <SpeedDials />
        </Hidden>
        <FooterText />
      </div>
    </>
  );
}

function Header({ drawerOpen, handleDrawerToggle }) {
    const { t } = useTranslation()
    const location = useLocation()
    const [header] = useHeader()
    const classes = useStyles()

    const makeBrand = pathname => {
        var name
        flattenConfig(menuConfig).map(menu => {
            if (menu.path === pathname) {
                name = menu.name
            }
            return null
        })
        if (pathname === '/user') {
            name = 'User'
        }

        return name || ''
    }

    const pathName = makeBrand(location.pathname)
    const headerRef = useRef()

    return (
        <AppBar position='sticky' className={classes.appBar + ' ' + classes.theme}>
            <Toolbar className={classes.container}>
                <Hidden smDown>
                    <div className={classes.sidebarMinimize}>
                        {!drawerOpen ? (
                            <IconButton color='primaryNoBackground' onClick={handleDrawerToggle}>
                                <ViewList fontSize='small' />
                            </IconButton>
                        ) : (
                            <IconButton color='primaryNoBackground' onClick={handleDrawerToggle}>
                                <MoreVert fontSize='small' />
                            </IconButton>
                        )}
                    </div>
                    {header || (
                        <Typography variant='subtitle1' className={classes.title}>
                            {pathName && t('NavBar.' + pathName)}
                        </Typography>
                    )}
                </Hidden>
                <Hidden mdUp>
                    {header || (
                        <Typography variant='subtitle1' className={classes.titleMobile}>
                            {pathName && t('NavBar.' + pathName)}
                        </Typography>
                    )}
                    <div className={classes.w100} ref={headerRef}></div>
                    <div className={classes.appResponsive}>
                        <IconButton color='themeWithBackground' aria-label='open drawer' onClick={handleDrawerToggle}>
                            <Menu fontSize='small' />
                        </IconButton>
                    </div>
                </Hidden>
            </Toolbar>
        </AppBar>
    )
}

NavBar = ({ mobileOpen, setMobileOpen, tabletOpen, setTabletOpen }) => {
  // used to check current url
  const location = useLocation();

  const theme = useTheme();
  // true if in tablet mode
  const tablet = useMediaQuery(theme.breakpoints.only('sm'));
  const mobile = useMediaQuery(theme.breakpoints.only('xs'));
  const isLoggedIn = location.pathname !== '/login';
  const classes = useStyles(isLoggedIn);

  const { expiryListBadge } = useContext(ExpiryListContext);

  // handle opening and closing of drawer
  const handleDrawerToggle = () => {
    if (tablet) {
      setTabletOpen(!tabletOpen);
    } else {
      setMobileOpen(!mobileOpen);
    }
  };

  return (
    <div className={classes.root}>
      <AppBar position='fixed'>
        <Toolbar>
          <Hidden mdUp>
            <IconButton
              edge='start'
              className={classes.menuButton}
              color='inherit'
              onClick={handleDrawerToggle}
            >
              {tabletOpen ? (
                <ChevronLeftIcon />
              ) : (
                <Badge
                  badgeContent={expiryListBadge}
                  color='primary'
                  overlap='circle'
                  className={classes.tabBadge}
                  invisible={!mobile}
                >
                  <MenuIcon />
                </Badge>
              )}
            </IconButton>
          </Hidden>
          <Typography variant='h6' className={classes.title}>
            Inventory Management Web App
          </Typography>

          <AlertDialog />
        </Toolbar>
      </AppBar>
    </div>
  );
}

// Vertical Navbar for user dashboard
export default function DashSidebar (props) {
  const classes = useStyles()
  const auth = useSelector(state => state.authReducer)
  const dispatch = useDispatch()
  // For Fetching Saved Schematics
  useEffect(() => {
    dispatch(fetchSchematics())
    dispatch(fetchOtherProjects())
    dispatch(fetchRole())
  }, [dispatch])

  return (
    <>
      <Hidden smDown>
        <div className={classes.toolbar} />
      </Hidden>
      <List>
        <ListItem
          alignItems="flex-start"
          component={RouterLink}
          to="/dashboard"
          style={{ marginTop: '15px' }}
          className={classes.sideItem}
          button
          divider
        >
          <ListItemAvatar>
            <Avatar className={classes.purple}>
              {auth.user.username.charAt(0).toUpperCase()}
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary={auth.user.username}
            secondary={
              <React.Fragment>
                <Typography
                  component="span"
                  variant="body2"
                  color="textSecondary"
                >
                  {auth.roles !== null && auth.roles.group.map((value, key) => (<h3 key={value}>{value}</h3>))}
                </Typography>
              </React.Fragment>
            }
          />
        </ListItem>

        <ListItem
          component={RouterLink}
          to="/dashboard/profile"
          className={classes.sideItem}
          button
          divider
        >
          <ListItemText primary='My Profile' />
        </ListItem>
        <ListItem
          component={RouterLink}
          to="/dashboard/schematics"
          className={classes.sideItem}
          button
        >
          <ListItemText primary='My Schematics' />
        </ListItem>
        <Divider />
        {auth.roles && auth.roles.e_sim_reviewer &&
          <ListItem
            component={RouterLink}
            to="/dashboard/review_projects"
            className={classes.sideItem}
            button
          >
            <ListItemText primary='Review Projects' />
          </ListItem>}

      </List>
    </>
  )
}

Topbar = props => {
  const { className, onSidebarOpen, ...rest } = props;

  const classes = useStyles();

  return (
    <AppBar
      {...rest}
      className={clsx(classes.root, className)}
    >
      <Toolbar>
        <RouterLink to="/">
          <img
            alt="Logo"
            src="/images/logos/logo--white.svg"
          />
        </RouterLink>
        <div className={classes.flexGrow} />
        <Hidden mdDown>
          {/* <IconButton color="inherit">
            <Badge
              badgeContent={notifications.length}
              color="primary"
              variant="dot"
            >
              <NotificationsIcon />
            </Badge>
          </IconButton> */}
          <LogoutButton/>
        </Hidden>
        <Hidden lgUp>
          <IconButton
            color="inherit"
            onClick={onSidebarOpen}
          >
            <MenuIcon />
          </IconButton>
        </Hidden>
      </Toolbar>
    </AppBar>
  );
}

export default function Landing() {

    const classes = useStyles();
    const theme = useTheme();
    const mdDown = useMediaQuery(theme.breakpoints.down('sm'));

    return (
        <Grid container justify="center" alignItems="center" className={classes.cont}>
            <Grid item xs={12} lg={6}>
                <Typography variant={mdDown ? "h2" : "h1"}>
                    {landing.title}
                </Typography>
                <Typography variant={mdDown ? "h5" : "h4"} component="h2" className={classes.subtitle}>

                    <ReactTyped
                        strings={landing.subtitles}
                        typeSpeed={40}
                        backSpeed={50}
                        loop
                    />
                </Typography>
                <Grid container direction="row" spacing={2}>
                    {
                        professionalDetails.map(({ alt, icon, link }, i) =>
                            <Grid item key={i}>
                                <a href={link} target="_blank" rel="noopener noreferrer">
                                    <Zoom in={true} style={{ transitionDelay: `${100 * i}ms` }}>
                                        <Tooltip title={alt} placement="top">
                                            <Avatar variant="rounded" className={clsx([classes.avatar, classes[alt]])}>
                                                {icon}
                                            </Avatar>
                                        </Tooltip>
                                    </Zoom>
                                </a>
                            </Grid>
                        )
                    }
                </Grid>
            </Grid>

            <Hidden mdDown>
                <Fade in={true} style={{ transitionDelay: '100ms' }}>
                    <Grid item lg={6}>
                        <Image
                            src="/landing.svg"
                            alt="Landing"
                            width="900.94"
                            height="787"
                        />
                    </Grid>
                </Fade>
            </Hidden>
        </Grid>
    )
}

LoginOkta = ({ baseUrl }) => {
  const { authService, authState } = useOktaAuth();
  const { push } = useHistory();
  const classes = useStyles();

  const onSuccess = async (res) => {
    authService.login("/home");
    authService.redirect({
      sessionToken: res.session.token,
    });
  };

  const handleLogoClick = () => {
    push("/");
  };

  if (authState.isPending) {
    return (
      <div className={classes.loading}>
        <CircularProgress />
      </div>
    );
  }

  return authState.isAuthenticated ? (
    <Redirect to="/home" />
  ) : (
    <Grid container wrap="wrap" className={classes.root}>
      <Hidden mdUp>
        <Grid item xs={12}>
          <AppBar className={classes.navbar} position="static">
            <Toolbar>
              <Button onClick={handleLogoClick}>
                <img className={classes.logo} src={logo} alt="SoMe logo" />
              </Button>
            </Toolbar>
          </AppBar>
        </Grid>
      </Hidden>
      <Grid item xs className={classes.widgetContainer}>
        <Hidden mdDown>
          <Button
            onClick={handleLogoClick}
            style={{ position: "absolute", top: ".8em", left: ".8em" }}
          >
            <img className={classes.logo} src={logoDark} alt="SoMe logo" />
          </Button>
        </Hidden>
        <SignInWidget
          baseUrl={process.env.REACT_APP_OKTA_DOMAIN}
          onSuccess={onSuccess}
        />
      </Grid>
      <Hidden xsDown>
        <Grid item xs={5} className={classes.imageContainer}>
          <LoginImg className={classes.image} alt="Login" />
        </Grid>
      </Hidden>
    </Grid>
  );
}

App = () => {
  const dispatch = useDispatch();

  const { displayName } = useSelector((state) => state.user);

  const mode = useSelector((state) => state.util);

  const muiTheme = createMuiTheme({
    palette: {
      type: mode ? "dark" : "light",
    },
  });

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        dispatch(LoginAction(authUser));
      } else {
        dispatch(LogoutAction());
      }
    });
  }, [dispatch]);

  const classes = Style();
  return (
    <ThemeProvider theme={muiTheme}>
      <Paper
        elevation={0}
        className={classes.root}
        style={{ backgroundColor: !mode && lightPrimary }}
      >
        {!displayName ? (
          <Login />
        ) : (
          <Grid className={classes.app}>
            <Grid item container className={classes.app__header}>
              {/* ----Header---- */}
              <Header />
            </Grid>
            <Grid item container className={classes.app__body}>
              {/* ----Body---- */}
              <Hidden smDown>
                <Grid item container className={classes.body__left} md={3}>
                  {/* ----Sidebar---- */}
                  <Sidebar />
                </Grid>
              </Hidden>
              <Grid item container className={classes.body__feed} xs={12} sm={8} md={6}>
                {/* ----Feed---- */}
                <Grid item container className={classes.feed__stories}>
                  {/* ----Stories---- */}
                  <Stories />
                </Grid>
                <Grid item container className={classes.feed__form}>
                  {/* ----Upload Form---- */}
                  <Form />
                </Grid>
                <Grid item container className={classes.feed__posts}>
                  {/* ----Posts---- */}
                  <Posts />
                </Grid>
              </Grid>
              <Hidden smDown>
                <Grid item container className={classes.body__right} md={3}>
                  {/* ----Right sidebar---- */}
                  <Contacts />
                </Grid>
              </Hidden>
            </Grid>
          </Grid>
        )}
      </Paper>
    </ThemeProvider>
  );
}

App = () => {
  const classes = Styles();

  const dispatch = useDispatch();

  const { displayName } = useSelector((state) => state.user);

  const mode = useSelector((state) => state.util);

  const muiTheme = createMuiTheme({
    palette: {
      type: mode ? "dark" : "light",
    },
  });

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        dispatch(LoginAction(authUser));
      } else {
        dispatch(LogoutAction());
      }
    });
  }, []);

  return (
    <ThemeProvider theme={muiTheme}>
      {!displayName ? (
        <Login />
      ) : (
        <Grid
          container
          className={classes.app}
          style={{ backgroundColor: mode ? darkPrimary : LinkedInBgColor }}
        >
          <Grid
            item
            container
            className={classes.app__header}
            style={{
              boxShadow: mode && "0px 5px 10px -10px rgba(0,0,0,0.75)",
            }}
          >
            {/* Header */}
            <Header />
          </Grid>
          <Grid item container className={classes.app__body}>
            <Hidden smDown>
              <Grid item className={classes.body__sidebar} md={2}>
                {/* Sidebar */}
                <Sidebar />
              </Grid>
            </Hidden>
            <Grid item className={classes.body__feed} xs={12} sm={8} md={5}>
              {/* Feed */}
              <Grid item className={classes.feed__form}>
                <Form />
              </Grid>
              <Grid item className={classes.feed__posts}>
                <Posts />
              </Grid>
            </Grid>
            <Hidden smDown>
              <Grid item className={classes.body__widgets} md={3}>
                {/* Widgets */}
                <Widgets />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
      )}
    </ThemeProvider>
  );
}

Header = () => {
  const {
    title,
    drawer: { open: drawerOpen }
  } = useStoreState(state => state.app);
  const { setOpen: setDrawOpen } = useStoreActions(
    actions => actions.app.drawer
  );
  const theme = useTheme();
  const justify = !useMediaQuery(`(min-width:${theme.breakpoints.values.sm}px)`)
    ? 'space-between'
    : 'flex-end';

  const handleDrawerToggle = () => {
    setDrawOpen(!drawerOpen);
  };

  return (
    <StyledAppBar position="fixed">
      <Grid container direction="row" alignItems="center" justify={justify}>
        <Grid item>
          <Hidden smUp>
            <Grid container direction="row" alignItems="center">
              <StyledMenuButton
                edge="start"
                color="inherit"
                onClick={handleDrawerToggle}
              >
                <MenuIcon />
              </StyledMenuButton>
              <StyledTitle variant="h6" noWrap>
                {title}
              </StyledTitle>
            </Grid>
          </Hidden>
        </Grid>
        <Grid item>
          <Toolbar />
        </Grid>
      </Grid>
    </StyledAppBar>
  );
}

NavBar = () => {
  const dispatch = useDispatch();
  const isAuth = useSelector(({ channel }) => channel.isAuth);
  const classes = useStyles();
  const theme = useTheme();
  return (
    <Toolbar
      classes={{
        gutters: classes.toolbar,
      }}
    >
      <>
        <Hidden smUp>
          <IconButton
            onClick={() => dispatch(setMobileSearch(true))}
            size={theme.breakpoints.up("md") ? "small" : "medium"}
            className={classes.iconButton}
          >
            <SearchIcon />
          </IconButton>
        </Hidden>
        <Tooltip title="Create">
          <NavVidMenuBtn />
        </Tooltip>
        <Hidden smDown>
          <>
            <Tooltip title="Apps">
              <span>
                <IconButton disabled>
                  <AppsIcon />
                </IconButton>
              </span>
            </Tooltip>
            {isAuth || (
              <Tooltip title="Settings">
                <span>
                  <IconButton disabled>
                    <MoreIcon />
                  </IconButton>
                </span>
              </Tooltip>
            )}
          </>
        </Hidden>
        {isAuth && (
          <Tooltip title="Notifications">
            <IconButton className={classes.iconButton}>
              <NotificationsIcon />
            </IconButton>
          </Tooltip>
        )}

        {isAuth && <NavUserMenuBtn />}
        {isAuth || (
          <SignInBtn size={theme.breakpoints.up("md") ? "medium" : "large"} />
        )}
      </>
    </Toolbar>
  );
}

Frame = memo(({ contents, frontmatter, window }) => {

  const classes = useStyles()
  const [mobileOpen, setMobileOpen] = React.useState(false);
  // const [isNoContents, setIsNoContents] = React.useState(false);

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

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

  const series = Boolean(contents) ? contents.series : undefined


  // console.log(contents)
  // console.log(frontmatter)
  return (
    <div>
      <TopBar
        handleDrawerToggle={handleDrawerToggle}
        series={series}
      />
      {contents ?
        <nav className={classes.drawer}>
          {/* on mobile phone */}
          <Hidden smUp implementation="css">
            <Drawer
              container={container}
              variant="temporary"
              open={mobileOpen}
              onClose={handleDrawerToggle}
              classes={{
                paper: classes.drawerPaper,
              }}
              ModalProps={{
                keepMounted: true, // Better open performance on mobile.
              }}
            >
              <Aside frontmatter={frontmatter} contents={contents} />
            </Drawer>
          </Hidden>
          {/* on pc web*/}
          <Hidden xsDown implementation="css">
            <Drawer
              classes={{
                paper: classes.drawerPaper,
              }}
              variant="permanent"
              open
            >
              <Aside frontmatter={frontmatter} contents={contents} />
            </Drawer>
          </Hidden>
        </nav>
        : 
        <Hidden smUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            <Aside frontmatter={frontmatter} contents={undefined} />
          </Drawer>
        </Hidden>}
    </div>
  )

})

function Toolbar(props) {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const classes = useStyles();
  const isMenuOpen = Boolean(anchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "primary-search-account-menu";

  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      id={menuId}
      keepMounted
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <MenuItem
        onClick={() => {
          props.history.push("/my-account");
        }}
      >
        My account
      </MenuItem>
      <MenuItem
        onClick={() => {
          auth.clearAppStorage();
          props.history.push("/login");
        }}
      >
        Logout
      </MenuItem>
    </Menu>
  );
  return (
    <div>
      <AppBar className={classes.root}>
        <ToolbarItem style={{justifyContent: "space-between", flexWrap: "wrap",}}>
          <Logo />
          <div className={classes.inlineFlex}>
          <h4 style={{ color: "#000", paddingRight: "1rem", whiteSpace: "nowrap", }}>
            Welcome {auth.getUserInfo().contact.name}
          </h4>
          <Hidden mdDown>
            <IconButton
              className={classes.accntBtn}
              aria-label="account of current user"
              aria-controls={menuId}
              aria-haspopup="true"
              color="inherit"
              onClick={handleProfileMenuOpen}
            >
              <AccountCircle />
            </IconButton>
          </Hidden>
          <Hidden lgUp>
            <DrawerToggle clicked={props.drawerToggleClicked} />
          </Hidden>
          </div>
        </ToolbarItem>
      </AppBar>
      {renderMenu}
    </div>
  );
}

AppHeader = ({darkMode, ModeChange}) => {
    const classes = useStyles();

    return (
        <AppBar position="static" className={classes.appBar}>
            <Container maxWidth='lg'>
                <Toolbar disableGutters className={classes.toolbar_container}>

                    <MUILink href="/" title="CodeHood Mentors" className={classes.brand}>
                        <img src={CodeHoodLogo} alt="Codehood" />
                        <Hidden only={['xs', 'sm']}>
                            <Typography
                                variant={window.innerWidth < 637 ? "h6" : "h4"}
                                className={classes.title}
                            >
                                Mentors
                            </Typography>
                        </Hidden>
                    </MUILink>

                    <FormControlLabel
                        control={
                            <Switch
                                name="switch_dark_mode"
                                checked={darkMode}
                                onChange={ModeChange}
                                aria-label={darkMode ? "Light Mode" : "Dark Mode"}
                                color='default'
                            />
                        }
                        label={
                            darkMode ? (
                                <LightIcon htmlColor='#ffffff' />
                            ) : (
                                <DarkIcon htmlColor='#ffffff' />
                            )
                        }
                    />
                    
                </Toolbar>
            </Container>
        </AppBar>
    )
}

Topbar = props => {
  const { className, onSidebarOpen, ...rest } = props;

  const classes = useStyles();

  const [notifications] = useState([]);

  return (
    <AppBar
      {...rest}
      className={clsx(classes.root, className)}
    >
      <Toolbar>
        <RouterLink to="/">
          <h1 style={{color:'white'}}>Telar</h1>
        </RouterLink>
        <div className={classes.flexGrow} />
        <Hidden mdDown>
          <IconButton color="inherit">
            <Badge
              badgeContent={notifications.length}
              color="primary"
              variant="dot"
            >
              <NotificationsIcon />
            </Badge>
          </IconButton>
          <IconButton
            className={classes.signOutButton}
            color="inherit"
          >
            <InputIcon />
          </IconButton>
        </Hidden>
        <Hidden lgUp>
          <IconButton
            color="inherit"
            onClick={onSidebarOpen}
          >
            <MenuIcon />
          </IconButton>
        </Hidden>
      </Toolbar>
    </AppBar>
  );
}

render() {
    return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <Typography
              className={this.props.classes.heading}
              variant="display1"
              color="inherit"
            >
              Chat Server
            </Typography>
            <Hidden mdUp>
              <IconButton
                color="inherit"
                onClick={this.handleMenubutton}
                className={this.props.classes.menuButton}
              >
                <MenuIcon />
              </IconButton>
            </Hidden>
            <Hidden smDown>
              <Typography className={this.props.classes.links}>
                <Button href="/api/signup" color="primary" variant="contained">
                  Signup
                </Button>

                <Button href="/api/signin" color="primary" variant="contained">
                  Signin
                </Button>

                <Button href="/api/chat" color="primary" variant="contained">
                  Chat
                </Button>
              </Typography>
            </Hidden>
          </Toolbar>
        </AppBar>
        <Hidden mdUp>
          <Drawer
            variant="persistent"
            anchor="top"
            open={this.state.open}
            classes={{ paperAnchorTop: this.props.classes.drawerColor }}
          >
            <div className={this.props.classes.drawerWidth}>
              <IconButton onClick={this.handleMenubutton}>
                <KeyboardArrowUpIcon />
              </IconButton>

              <List>
                {["SignUp", "SignIn", "Chat"].map((text, index) => (
                  <ListItem button key={index}>
                    <Button href={`#${text}`} onClick={this.handleMenubutton}>
                      <ListItemText primary={text} />
                    </Button>
                  </ListItem>
                ))}
              </List>
            </div>
          </Drawer>
        </Hidden>
      </div>
    );
  }

function Welcome(props) {
	const [loading, setLoading] = useState(true);
	const [dashRedirect, setDashRedirect] = useState(false);
	const { setLoggedIn, setAuthToken, changeName } = useContext(InfoContext);

	const getQueryParams = () => {
		const query = window.location.search.substring(1);
		const vars = query.split("&");

		let name = null;
		let token = null;

		vars.map(det => {
			const sp = det.split("=");
			if(sp[0] === "name") {
				name = decodeURIComponent(sp[1]);
			} else if(sp[0] === "token") {
				token = sp[1];
			}
		})

		if(name !== null && token !== null) {
			setAuthToken(token);
			changeName(name);

			localStorage.setItem("authToken", token);
			localStorage.setItem("name", name);
			localStorage.setItem("userLoggedIn", true);
			setLoggedIn(true);

			setDashRedirect(true);
			return true;
		}

		return false;
	}

	useEffect(() => {
		if(!getQueryParams()) {
			const token = localStorage.getItem('authToken');
			if(token === null) {
				setLoggedIn(false);
				setLoading(false);
			} else {
				setLoggedIn(true);
				setDashRedirect(true);
				setLoading(false);
			}
		}
	}, []);

	if(dashRedirect) {
		return (
			<Redirect to="/dashboard" />
		)
	} else {
		return (
			loading ? <Loading />
			:
			<Container className="welcome-page">
				<div className="welcome-screen">
					<Grid container spacing={0}>
						<Grid item xs={12} md={6} className="heading-section">
							<img src="head.png" className="quiz-image" alt="Welcome to Quizzie"></img>
						</Grid>
						<Hidden smDown>
							<Grid item xs={12} md={6} className="pin-section">
								<img src="quiz.png" className="pin-image" alt="User Representation"></img>
							</Grid>
						</Hidden>
					</Grid>
					<PlayMenuBar />
				</div>
			</Container>
		)
	}
}

MenuList = () => {
	const classes = useStyles();
	const location = useLocation();
	const { push } = useHistory();
	const { authService } = useOktaAuth();

	const logout = async () => {
		await authService.logout("/");
	};

	return (
		<>
			<Hidden xsDown>
				<Button className={classes.logoButton} onClick={() => push("/home")}>
					<img className={classes.logo} src={logo} alt="SoMe logo" />
				</Button>
			</Hidden>
			<CreatePost />
			<List aria-label="Menu">
				<ListItem button onClick={() => push("/home")}>
					<ListItemIcon>
						<DashboardIcon
							className={
								location.pathname.includes("/home")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Media Manager" />
				</ListItem>
				<ListItem button onClick={() => push("/analytics")}>
					<ListItemIcon>
						<TrendingUpIcon
							className={
								location.pathname.includes("/analytics")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Analytics" />
				</ListItem>
				<ListItem button onClick={() => push("/connect/twitter")}>
					<ListItemIcon>
						<AccountBoxIcon
							className={
								location.pathname.includes("/connect")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Accounts" />
				</ListItem>
			</List>
			<List>
				<ListItem button onClick={logout}>
					<ListItemIcon>
						<ExitToAppIcon color="primary" />
					</ListItemIcon>
					<ListItemText primary="Logout" />
				</ListItem>
			</List>
		</>
	);
}

export default function RichTextEditor(props) {
  const modules = {
    toolbar: {
      container: [
        [{ font: [] }, { size: [] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ color: [] }, { background: [] }],
        [{ script: 'super' }, { script: 'sub' }],
        [{ header: '1' }, { header: '2' }, 'blockquote', 'code-block'],
        [
          { list: 'ordered' },
          { list: 'bullet' },
          { indent: '-1' },
          { indent: '+1' },
        ],
        ['direction', { align: [] }],
        ['link', 'image', 'video', 'formula'],
        ['clean'],
      ],
      handlers: {
        image: props.imageHandler,
      },
    },
    clipboard: {
      matchVisual: false,
    },
  };
  if (props.url.length > 0) {
    const quill = props.quillRef.getEditor();
    quill.insertEmbed(props.index, 'image', props.url);
    props.setQuillURL('');
  }
  return (
    <Grid item xs={props.width}>
      <h3 className="element-header">{props.field_name.toUpperCase()}</h3>
      <div className="quill-container">
        <ReactQuill
          ref={(el) => {
            props.setQuillRef(el);
          }}
          modules={modules}
          value={props.defaultValue || ''}
          onChange={(e) => props.handleChange(props.currentKey, e)}
          style={{
            clear: 'both',
            height: 400,
            marginBottom: 40,
          }}
        />
      </div>
      <Hidden mdUp implementation="css">
        <div style={{ height: 50 }} />
      </Hidden>
      <Hidden smUp implementation="css">
        <div style={{ height: 20 }} />
      </Hidden>
    </Grid>
  );
}

function BottomNavBar({ user }) {
  const classes = useStyles();
  const history = useHistory();
  const [value, setValue] = useState("home");

  const handleChange = (e, newValue) => {
    history.push(`/${newValue}`);
    setValue(newValue);
  };

  useEffect(() => {
    setValue(window.location.pathname.substring(1));
    return history.listen(() => {
      setValue(window.location.pathname.substring(1));
    });
  }, []);

  return (
    <Hidden smUp>
      <div className={classes.footer}>
        <ThemeProvider theme={createMuiTheme(darkTheme)}>
          <BottomNavigation
            value={value}
            onChange={handleChange}
            className={classes.root}
          >
            <BottomNavigationAction
              label="Home"
              value="home"
              icon={<HomeRounded />}
            />
            {user?.displayName && (
              <BottomNavigationAction
                label="Upload"
                value="upload"
                icon={<AddCircleRounded />}
              />
            )}
            <BottomNavigationAction
              label="Explore"
              value="explore"
              icon={<ExploreRounded />}
            />
          </BottomNavigation>
        </ThemeProvider>
      </div>
    </Hidden>
  );
}

NavMenu = () => {
	const [open, setOpen] = useState(false);

	const classes = useStyles();

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

	return (
		<>
			<Hidden smUp>
				<TopNav toggleMenu={() => setOpen(!open)} />
				<Drawer
					variant={"temporary"}
					open={open}
					onClose={closeDrawer}
					className={clsx(classes.drawer, {
						[classes.drawerOpen]: true,
						[classes.drawerClose]: false,
					})}
					classes={{
						paper: clsx({
							[classes.drawerOpen]: true,
							[classes.drawerClose]: false,
						}),
					}}
				>
					<MenuList closeDrawer={closeDrawer} />
				</Drawer>
			</Hidden>
			<Hidden xsDown>
				<Drawer
					variant={"permanent"}
					className={clsx(classes.drawer, {
						[classes.drawerOpen]: open,
						[classes.drawerClose]: !open,
					})}
					classes={{
						paper: clsx({
							[classes.drawerOpen]: open,
							[classes.drawerClose]: !open,
						}),
					}}
					onMouseEnter={() => setOpen(true)}
					onMouseLeave={closeDrawer}
				>
					<MenuList />
				</Drawer>
			</Hidden>
		</>
	);
}

function Layout({ window, children }) {
  const theme = useTheme();
  const classes = useStyles();
  const history = useHistory();
  const location = useLocation();
  const [searchResult, setSearchResult] = useState([]);
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  const { darkMode, setDarkMode } = useContext(DarkModeContext);
  const [keyword, setKeyword] = useState("");
  const [mobileOpen, setMobileOpen] = React.useState(false);

  useEffect(() => {
    setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
  }, []);

  const menuItems = [
    {
      text: "HomePage",
      icon: <HomeRounded />,
      path: "/",
    },
    {
      text: "Waifu Pics",
      icon: <ImageRounded />,
      path: "/waifu",
    },
  ];

  const drawer = (
    <div>
      <div>
        <Typography variant="h5" className={classes.title}>
          ANIMEWORLD-Z
        </Typography>
      </div>
      <Divider />
      <List>
        {menuItems.map((menu, i) => (
          <ListItem
            key={i}
            button
            onClick={() => history.push(menu.path)}
            className={location.pathname === menu.path ? classes.active : null}
          >
            <ListItemIcon>{menu.icon}</ListItemIcon>
            <ListItemText primary={menu.text} />
          </ListItem>
        ))}
      </List>
      <div className={classes.footer}>
        <Typography variant="h6" className={classes.version}>
          v2.1
        </Typography>
      </div>
    </div>
  );

  const handleSwitch = (event) => {
    setDarkMode(event.target.checked);
  };

  const handleSearch = (event) => {
    const { value } = event.target;
    setKeyword(value);
  };

  const getSearchAnime = () => {
    if (keyword) {
      axios
        .get(`/api/v1/anime/${keyword}`)
        .then((response) => {
          setSearchResult(response.data);
        })
        .catch((err) => console.log(err));
    } else {
      setSearchResult([]);
    }
  };

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

  const handleResetKeyword = () => {
    setKeyword("");
  };

  useEffect(() => {
    let timer = setTimeout(() => getSearchAnime(), 1000);
    return () => clearTimeout(timer);
  }, [keyword]);

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

  return (
    <div className={classes.root}>
      <CssBaseline />
      {keyword !== "" ? (
        <SearchList
          results={searchResult}
          handleResetKeyword={handleResetKeyword}
        />
      ) : (
        ""
      )}
      <AppBar className={classes.appBar} color="dafault">
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            className={classes.menuButton}
          >
            <MenuBookRounded />
          </IconButton>
          <Typography className={classes.time}>{time}</Typography>
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchOutlined />
            </div>
            <InputBase
              placeholder="Search…"
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ "aria-label": "search" }}
              onChange={handleSearch}
              value={keyword}
            />
          </div>
          <Switch checked={darkMode} onChange={handleSwitch} />
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer}>
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer
            container={container}
            variant="temporary"
            anchor={theme.direction === "rtl" ? "right" : "left"}
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper,
            }}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>
      <div className={classes.page}>
        <div className={classes.toolbar}></div>
        {children}
      </div>
    </div>
  );
}

VerifyOtp = props => {
  let history = useHistory();

  const { loaderStatus, setLoaderStatus } = useContext(LoaderContext);

  const [otp, setotp] = useState("");
  const classes = useStyles();
  const [error, setError] = useState("");
  const { layout: Layout } = props;

  const validate = () => {
    setLoaderStatus(true);
    const error = validateInput(otp, form["otp"]["validations"]);
    console.log(error);
    if (error[0]) {
      setError(error);
      setLoaderStatus(false);
    } else {
      axios
        .post(
          strapiApiConstants.STRAPI_DB_URL +
            strapiApiConstants.STRAPI_CHECK_OTP,
          { otp: otp, contact_number: props.location.state.contactNumber }
        )
        .then(res => {
          history.push(routeConstants.NEW_REGISTRATION_URL, {
            otp: otp,
            contactNumber: props.location.state.contactNumber,
            from: routeConstants.VERIFY_OTP
          });
          setLoaderStatus(false);
        })
        .catch(err => {
          if (err.response.data.message === "User already registered") {
            setError("User Already Registered");
          } else if (err.response.data.message === "OTP is invalid")
            setError("Invalid OTP");

          setLoaderStatus(false);
        });
    }
  };

  const requestOtpAgain = () => {
    setLoaderStatus(true);
    axios
      .post(
        strapiApiConstants.STRAPI_DB_URL +
          strapiApiConstants.STRAPI_REQUEST_STUDENT_OTP,
        { contact_number: props.location.state.contactNumber }
      )
      .then(res => {
        setLoaderStatus(false);
      })
      .catch(err => {
        console.log(err);
        setLoaderStatus(false);
      });
  };
  if (!props.location.state) {
    return (
      <Redirect
        to={{
          pathname: routeConstants.SIGN_IN_URL
        }}
      />
    );
  } else {
    return (
      <Layout>
        <div className={classes.masterlogin2}>
          <div className={classes.masterlogin1}>
            <div className={classes.masterlogin}>
              <Paper className={classes.rootDesktop}>
                <CardContent>
                  <CssBaseline />
                  <div className={classes.paper}>
                    <div className={classes.signin_header}>
                      <div className={classes.loginlock}>
                        <CardIcon>
                          <Icon>lock</Icon>
                        </CardIcon>
                      </div>
                      <Typography
                        className={classes.signin}
                        component="h1"
                        variant="h5"
                        style={{ fontWeight: "700" }}
                      >
                        {authPageConstants.REGISTER}
                      </Typography>
                    </div>

                    <React.Fragment>
                      <Typography
                        component="h5"
                        variant="subtitle2"
                        style={{ marginTop: ".9rem", marginBottom: ".9rem" }}
                      >
                        {authPageConstants.OTP_ALERT}{" "}
                        {props.location.state.contactNumber}
                      </Typography>
                      <TextField
                        label="One Time Password"
                        name="otp"
                        value={otp}
                        style={{ marginRight: "175px" }}
                        error={error[0] ? true : false}
                        variant="outlined"
                        fullWidth
                        helperText={error ? error : null}
                        onChange={event => {
                          if (otp.length > 0) setError("");
                          setotp(event.target.value);
                        }}
                      />
                      <Link
                        href="javascript:void(0);"
                        variant="body2"
                        className={classes.linkColor}
                        onClick={requestOtpAgain}
                      >
                        {authPageConstants.RESEND_OTP_BUTTON}
                      </Link>

                      <Button
                        color="primary"
                        type="submit"
                        fullWidth
                        variant="contained"
                        className={classes.submit}
                        onClick={() => {
                          validate();
                        }}
                      >
                        Verify OTP
                      </Button>
                    </React.Fragment>
                    <Grid container>
                      <Grid item xs={12} style={{ textAlign: "center" }}>
                        <Link
                          href={routeConstants.SIGN_IN_URL}
                          variant="body2"
                          className={classes.linkColor}
                        >
                          {authPageConstants.BACK_TO_LOGIN_TEXT}
                        </Link>
                      </Grid>
                    </Grid>
                  </div>
                </CardContent>
                <Hidden mdDown>
                  <CardMedia
                    className={classes.cover}
                    image={image}
                    title="Live from space album cover"
                  />
                </Hidden>
              </Paper>
            </div>
          </div>
        </div>
      </Layout>
    );
  }
}

Header = () => {
  const classes = Style();
  const dispatch = useDispatch();
  const mode = useSelector((state) => state.util);
  const { photoURL } = useSelector((state) => state.user);

  const changeTheme = () => {
    dispatch(ToggleTheme());
  };

  const logout = () => {
    auth.signOut();
  };

  return (
    <Paper elevation={0} style={{ borderRadius: 0, width: "100%", height: "100%" }}>
      <Grid container className={classes.header}>
        {/*----Logo & Search icon--------*/}
        <Hidden xsDown>
          <Grid item className={classes.header__logo} sm={2} md={3}>
            <img className={classes.logo__image} src={logo} alt="facebook-logo" />
            <Hidden smDown>
              <div className={classes.logo__search}>
                <SearchIcon />
                <input placeholder="Search facebook ..." />
              </div>
            </Hidden>
          </Grid>
        </Hidden>
        {/*----Nav-Bar--------*/}
        <Grid item className={classes.header__nav} xs={12} sm={8} md={6}>
          <div className={`${classes.nav__links} ${classes.nav__links__specail}`}>
            <Avatar src={logo} />
          </div>
          <div className={classes.nav__links}>
            <HomeOutlined />
          </div>
          <div className={classes.nav__links}>
            <PlayCircleFilledWhiteOutlined />
          </div>
          <Hidden xsDown>
            <div className={classes.nav__links}>
              <StoreMallDirectoryOutlined />
            </div>
            <div className={classes.nav__links}>
              <SupervisedUserCircleOutlined />
            </div>
          </Hidden>
          <div className={classes.nav__links} onClick={changeTheme}>
            {mode ? <Brightness4Icon /> : <BrightnessHighIcon />}
          </div>
          <div className={`${classes.nav__links} ${classes.nav__links__specail}`}>
            <Avatar src={photoURL} onClick={logout} />
          </div>
        </Grid>
        {/*----Userinfo and options--------*/}
        <Hidden xsDown>
          <Grid item className={classes.header__userinfo} sm={2} md={3}>
            <Tooltip
              placement="left"
              TransitionComponent={Zoom}
              TransitionProps={{ timeout: 300 }}
              title={"logout"}
              arrow
            >
              <Avatar src={photoURL} onClick={logout} />
            </Tooltip>
            <Hidden smDown>
              <div className={classes.userinfo__options}>
                <AddIcon />
                <TelegramIcon />
                <Badge badgeContent={10} max={9} {...defaultProps} />

                <ArrowDropDownRoundedIcon />
              </div>
            </Hidden>
          </Grid>
        </Hidden>
      </Grid>
    </Paper>
  );
}

ResponsiveDrawer = (props: ResponsiveDrawerProps) => {
  useEffect(() => {
    try {
      props.getHostInfo();
    } catch (e) {
      console.log(e);
    }
  }, [props]);
  const classes = useStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  if (isMobile) {
    props = { ...props, shrinked: false };
  }
  const toggleShrink = () => {
    props.onShrink();
  };

  const isSupportedSdkVersion = (supportedAbove, supportedBelow) => {
    const sdkVersion = props.sdkVersion || '0.0.1';
    supportedAbove = supportedAbove || '0.0.1';
    supportedBelow = supportedBelow || '10000.0.0';

    return (
      semver.gte(sdkVersion, supportedAbove) &&
      semver.lte(sdkVersion, supportedBelow)
    );
  };

  return (
    <SwipeableDrawer
      className={classes.drawer}
      classes={{ paper: classes.drawerPaper }}
      anchor="left"
      variant={!isMobile ? 'persistent' : 'temporary'}
      open={props.show}
      onClose={(e) => props.onOpenClose(e)}
      onOpen={(e) => props.onOpenClose(e)}
    >
      <div
        className={clsx(classes.drawerPaperContent, {
          [classes.drawerPaperShrink]: props.shrinked,
        })}
        role="presentation"
      >
        <List
          className={clsx(classes.drawerPaperContentTopList)}
          classes={{ root: classes.NavListRoot }}
        >
          {props.show &&
            props.navItems.map(
              (it) =>
                isSupportedSdkVersion(
                  it.supportedAboveSdkVersion,
                  it.supportedBelowSdkVersion
                ) && (
                  <Tooltip
                    key={it.label}
                    arrow
                    title={props.shrinked ? it.label : ''}
                    placement="right"
                    enterDelay={100}
                    classes={{
                      tooltip: classes.tooltip,
                      arrow: classes.tooltipArrow,
                    }}
                  >
                    <ListItem
                      button
                      onClick={() => {
                        props.changeTitle(it.label);
                        if (isMobile) {
                          props.onOpenClose(undefined);
                        }
                      }}
                      component={NavLink}
                      to={it.navLink}
                      key={it.label}
                      activeclassname={classes.activeNavLink}
                      className={clsx(classes.navLink, {
                        [classes.shrinkedListItem]: props.shrinked,
                      })}
                    >
                      <ListItemIcon className="icon">{it.icon}</ListItemIcon>
                      <ListItemText
                        primary={props.shrinked ? '  ' : it.label}
                      />
                    </ListItem>
                  </Tooltip>
                )
            )}
        </List>
        <Hidden only={['xs']}>
          <List>
            <Divider />
            <Tooltip
              arrow
              title={props.shrinked ? 'Expand' : ''}
              placement="right"
              enterDelay={1000}
              classes={{
                tooltip: classes.tooltip,
                arrow: classes.tooltipArrow,
              }}
            >
              <ListItem
                button
                onClick={toggleShrink}
                className={clsx({
                  [classes.shrinkedListItem]: props.shrinked,
                })}
              >
                <ListItemIcon>
                  {props.shrinked ? <ArrowForwardIcon /> : <ArrowBackIcon />}
                </ListItemIcon>
                <ListItemText primary={props.shrinked ? 'Expand' : 'Shrink'} />
              </ListItem>
            </Tooltip>
          </List>
        </Hidden>
      </div>
    </SwipeableDrawer>
  );
}