@material-ui/core#BottomNavigation TypeScript Examples

The following examples show how to use @material-ui/core#BottomNavigation. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From back-home-safe with GNU General Public License v3.0 6 votes vote down vote up 
MainScreen = () => {
  const { t } = useTranslation("main_screen");
  const [activePage, setActivePage] = useState(0);
  const tabs = useMemo(() => tabsArr({ t }), [t]);

  return (
    <PageWrapper>
      <Carousel draggable={false} value={activePage}>
        {tabs.map(({ component, key }) => (
          <React.Fragment key={key}>{component}</React.Fragment>
        ))}
      </Carousel>
      <NavWrapper>
        <BottomNavigation
          showLabels
          value={activePage}
          onChange={(event, newValue) => {
            setActivePage(newValue);
          }}
        >
          {tabs.map(({ key, label, icon }) => (
            <BottomNavigationAction key={key} label={label} icon={icon} />
          ))}
        </BottomNavigation>
      </NavWrapper>
    </PageWrapper>
  );
}
Example #2
Source File: Home.tsx    From logo-generator with MIT License 4 votes vote down vote up 
export default function ScrollableTabsButtonAuto() {
	const classes = useStyles();
	const [value, setValue] = React.useState(0);
	const [modalStyle] = React.useState(getModalStyle);
	const [openLogin, setOpenLogin] = React.useState(false);
	const [openSignUp, setOpenSignUp] = React.useState(false);
	const { currentUser, logout }:any= useAuth();
	const [error, setError] = React.useState('');
	const history = useHistory();
	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);


	const handleChange = (event:any, newValue:any) => {
		setValue(newValue);
	};

	const handleMenuClick = (event: React.MouseEvent<HTMLButtonElement>) => {
		setAnchorEl(event.currentTarget);
	  };

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

	async function handleLogout(){
		setError("")
		setAnchorEl(null)

		try{
			await logout();
			history.push('/')
		}catch {
			setError('Failed to log out')
		}
	}

	const handleOpen = () => {
		setOpenLogin(true);
	};
	
	const handleClose = () => {
		setOpenLogin(false);
	};

	const LoginBody = (
		<div style={modalStyle} className={classes.paper}>
		  <Login loginOpen={(value1:boolean, value2:boolean)=> {setOpenLogin(value1)
		   setOpenSignUp(value2)} }/>
		</div>
	);

	const signUpBody = (
		<div style={modalStyle} className={classes.paper}>
		  <SignUp signupOpen={(value1:boolean, value2:boolean)=> {setOpenSignUp(value1)
		   setOpenLogin(value2)}}/>
	    </div>
	);
	

	return (
		<div className={classes.root}>
            {/* <AppBar position="sticky" color="default">
                <Toolbar variant="dense">
                    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                     <MenuIcon />
                      </IconButton>
                    <Typography variant="h6" className={classes.title}>
                         Logo-Generator
                    </Typography>
                     <Button color="inherit">Login</Button>
					 <Button color="inherit">SignUp</Button>

                </Toolbar>
            </AppBar> */}

			<AppBar position="static" color="default">
			    <Toolbar variant="dense">
                    <Typography variant="h6" className={classes.title}>
                        Logo-Generator
                    </Typography>
	
				    {currentUser ?  <>
					                 <Button onClick={handleMenuClick}>{currentUser.displayName}
                                      <AccountCircleOutlinedIcon></AccountCircleOutlinedIcon>
                                     </Button>
									  <Menu
                                        id="simple-menu"
                                        anchorEl={anchorEl}
                                        keepMounted
                                        open={Boolean(anchorEl)}
                                        onClose={handleMenuClose}
                                      >
                                       <MenuItem onClick={handleMenuClose}>My Logos</MenuItem>
                                       <MenuItem onClick={handleLogout}>Logout</MenuItem>
                                       </Menu>
									</> 
							     : 
					                <>
                                      <Button color="inherit" onClick={handleOpen}>Login</Button>
					                    <Modal
                                         open={openLogin}
                                          onClose={handleClose}
                                        >
                                          {LoginBody}
                                        </Modal>

				                       <Button color="inherit" onClick={() => setOpenSignUp(true)}>SignUp</Button>
				                        <Modal
                                         open={openSignUp}
                                         onClose={() => setOpenSignUp(false)}
                                        >
                                         {signUpBody}
                                        </Modal>
					                </>
                    } 
                </Toolbar>

				<Tabs
					value={value}
					onChange={handleChange}
					indicatorColor="primary"
					textColor="primary"
					variant="scrollable"
				>
					<Tab label="GDG" {...a11yProps(0)} />
					<Tab label="DSC" {...a11yProps(1)} />
					<Tab label="WTM" {...a11yProps(2)} />
				</Tabs>
			</AppBar>
			<TabPanel value={value} index={0}>
				<GDGEditor />
			</TabPanel>
			<TabPanel value={value} index={1}>
				<DSCEditor />
			</TabPanel>
			<TabPanel value={value} index={2}>
				<WTMEditor />
			</TabPanel>
			<br></br>
			<br></br>
			<br></br>
			<br></br>
			<br></br>
			<BottomNavigation className={classes.stickToBottom}>
			<GitHubButton href="https://github.com/dscnsec/logo-generator" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star dscnsec/logo-generator on GitHub">Star</GitHubButton>
				
				<Typography>
				&nbsp;&middot;&nbsp;Created by&nbsp;
					<Link href="https://xprilion.com" target="_blank">
						@xprilion
					</Link>
				</Typography>
			</BottomNavigation>
		</div>
	);
}