text: /* eslint-disable no-restricted-imports */
  import React from "react";
  import Notice from "../../../../partials/content/Notice";
  import CodeExample from "../../../../partials/content/CodeExample";
  import { makeStyles, fade } from "@material-ui/core/styles";
  import {
    AppBar,
    Toolbar,
    IconButton,
    Typography,
    Button,
    Menu,
    MenuItem,
    Badge,
    InputBase,
    FormGroup,
    FormControlLabel,
    Switch
  } from "@material-ui/core";
  import MenuIcon from "@material-ui/icons/Menu";
  import SearchIcon from "@material-ui/icons/Search";
  import AccountCircle from "@material-ui/icons/AccountCircle";
  import MailIcon from "@material-ui/icons/Mail";
  import NotificationsIcon from "@material-ui/icons/Notifications";
  import MoreIcon from "@material-ui/icons/MoreVert";
  
  // Example 1
  const useStyles1 = makeStyles(theme => ({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1
    }
  }));
  
  // Example 2
  const useStyles2 = makeStyles({
    root: {
      flexGrow: 1
    }
  });
  
  // Example 3
  const useStyles3 = makeStyles(theme => ({
    grow: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      display: "none",
      [theme.breakpoints.up("sm")]: {
        display: "block"
      }
    },
    search: {
      position: "relative",
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      "&:hover": {
        backgroundColor: fade(theme.palette.common.white, 0.25)
      },
      marginRight: theme.spacing(2),
      marginLeft: 0,
      width: "100%",
      [theme.breakpoints.up("sm")]: {
        marginLeft: theme.spacing(3),
        width: "auto"
      }
    },
    searchIcon: {
      width: theme.spacing(7),
      height: "100%",
      position: "absolute",
      pointerEvents: "none",
      display: "flex",
      alignItems: "center",
      justifyContent: "center"
    },
    inputRoot: {
      color: "inherit"
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 7),
      transition: theme.transitions.create("width"),
      width: "100%",
      [theme.breakpoints.up("md")]: {
        width: 200
      }
    },
    sectionDesktop: {
      display: "none",
      [theme.breakpoints.up("md")]: {
        display: "flex"
      }
    },
    sectionMobile: {
      display: "flex",
      [theme.breakpoints.up("md")]: {
        display: "none"
      }
    }
  }));
  
  // Example 4
  const useStyles4 = makeStyles(theme => ({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1
    }
  }));
  
  // Example 5
  const useStyles5 = makeStyles(theme => ({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1,
      display: "none",
      [theme.breakpoints.up("sm")]: {
        display: "block"
      }
    },
    search: {
      position: "relative",
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      "&:hover": {
        backgroundColor: fade(theme.palette.common.white, 0.25)
      },
      marginLeft: 0,
      width: "100%",
      [theme.breakpoints.up("sm")]: {
        marginLeft: theme.spacing(1),
        width: "auto"
      }
    },
    searchIcon: {
      width: theme.spacing(7),
      height: "100%",
      position: "absolute",
      pointerEvents: "none",
      display: "flex",
      alignItems: "center",
      justifyContent: "center"
    },
    inputRoot: {
      color: "inherit"
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 7),
      transition: theme.transitions.create("width"),
      width: "100%",
      [theme.breakpoints.up("sm")]: {
        width: 120,
        "&:focus": {
          width: 200
        }
      }
    }
  }));
  
  // Example 6
  const useStyles6 = makeStyles(theme => ({
    root: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2)
    }
  }));
  
  export default function AppBarExamplesPage(props) {
    // Example 1
    const classes1 = useStyles1();
  
    // Example 2
    const classes2 = useStyles2();
  
    // Example 3
    const classes3 = useStyles3();
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
  
    const isMenuOpen = Boolean(anchorEl);
    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
  
    function handleProfileMenuOpen(event) {
      setAnchorEl(event.currentTarget);
    }
  
    function handleMobileMenuClose() {
      setMobileMoreAnchorEl(null);
    }
  
    function handleMenuClose() {
      setAnchorEl(null);
      handleMobileMenuClose();
    }
  
    function handleMobileMenuOpen(event) {
      setMobileMoreAnchorEl(event.currentTarget);
    }
  
    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={handleMenuClose}>Profile</MenuItem>
        <MenuItem onClick={handleMenuClose}>My account</MenuItem>
      </Menu>
    );
  
    const mobileMenuId = "primary-search-account-menu-mobile";
    const renderMobileMenu = (
      <Menu
        anchorEl={mobileMoreAnchorEl}
        anchorOrigin={{ vertical: "top", horizontal: "right" }}
        id={mobileMenuId}
        keepMounted
        transformOrigin={{ vertical: "top", horizontal: "right" }}
        open={isMobileMenuOpen}
        onClose={handleMobileMenuClose}
      >
        <MenuItem>
          <IconButton aria-label="Show 4 new mails" color="inherit">
            <Badge badgeContent={4} color="secondary">
              <MailIcon />
            </Badge>
          </IconButton>
          <p>Messages</p>
        </MenuItem>
        <MenuItem>
          <IconButton aria-label="Show 11 new notifications" color="inherit">
            <Badge badgeContent={11} color="secondary">
              <NotificationsIcon />
            </Badge>
          </IconButton>
          <p>Notifications</p>
        </MenuItem>
        <MenuItem onClick={handleProfileMenuOpen}>
          <IconButton
            aria-label="Account of current user"
            aria-controls="primary-search-account-menu"
            aria-haspopup="true"
            color="inherit"
          >
            <AccountCircle />
          </IconButton>
          <p>Profile</p>
        </MenuItem>
      </Menu>
    );
  
    // Example 4
    const classes4 = useStyles4();
    const [auth4, setAuth4] = React.useState(true);
    const [anchorEl4, setAnchorEl4] = React.useState(null);
    const open4 = Boolean(anchorEl4);
  
    function handleChange4(event) {
      setAuth4(event.target.checked);
    }
  
    function handleMenu4(event) {
      setAnchorEl4(event.currentTarget);
    }
  
    function handleClose4() {
      setAnchorEl4(null);
    }
  
    // Example 5
    const classes5 = useStyles5();
  
    // Example 6
    const classes6 = useStyles6();
  
    return (
      <>
        <Notice icon="flaticon-warning kt-font-primary">
          <p>
            The App Bar displays information and actions relating to the current
            screen.
          </p>
          <p>
            For more info please check the components's official{" "}
            <a
              target="_blank"
              className="kt-link"
              rel="noopener noreferrer"
              href="https://material-ui.com/components/app-bar/"
            >
              demos & documentation
            </a>
          </p>
        </Notice>
  
        <div className="row">
          <div className="col-md-6">
            <CodeExample jsCode={jsCode1} beforeCodeTitle="App Bar with buttons">
              <div className="kt-section">
                <span className="kt-section__sub"></span>
                <div className="kt-section__content">
                  <div className={classes1.root}>
                    <AppBar position="static">
                      <Toolbar>
                        <IconButton
                          edge="start"
                          className={classes1.menuButton}
                          color="inherit"
                          aria-label="Menu"
                        >
                          <MenuIcon />
                        </IconButton>
                        <Typography variant="h6" className={classes1.title}>
                          News
                        </Typography>
                        <Button color="inherit">Login</Button>
                      </Toolbar>
                    </AppBar>
                  </div>
                </div>
              </div>
            </CodeExample>
          </div>
          <div className="col-md-6">
            <CodeExample jsCode={jsCode2} beforeCodeTitle="Simple App Bar">
              <div className="kt-section">
                <span className="kt-section__sub"></span>
                <div className="kt-section__content">
                  <div className={classes2.root}>
                    <AppBar position="static" color="default">
                      <Toolbar>
                        <Typography variant="h6" color="inherit">
                          Photos
                        </Typography>
                      </Toolbar>
                    </AppBar>
                  </div>
                </div>
              </div>
            </CodeExample>
          </div>
        </div>
  
        <div className="row">
          <div className="col-md-6">
            <CodeExample
              jsCode={jsCode3}
              beforeCodeTitle="App Bar with a primary search field"
            >
              <div className="kt-section">
                <span className="kt-section__sub">A primary searchbar.</span>
                <div className="kt-separator kt-separator--dashed"></div>
                <div className="kt-section__content">
                  <div className={classes3.grow}>
                    <AppBar position="static">
                      <Toolbar>
                        <IconButton
                          edge="start"
                          className={classes3.menuButton}
                          color="inherit"
                          aria-label="Open drawer"
                        >
                          <MenuIcon />
                        </IconButton>
                        <Typography
                          className={classes3.title}
                          variant="h6"
                          noWrap
                        >
                          Material-UI
                        </Typography>
                        <div className={classes3.search}>
                          <div className={classes3.searchIcon}>
                            <SearchIcon />
                          </div>
                          <InputBase
                            placeholder="Search…"
                            classes={{
                              root: classes3.inputRoot,
                              input: classes3.inputInput
                            }}
                            inputProps={{ "aria-label": "Search" }}
                          />
                        </div>
                        <div className={classes3.grow} />
                        <div className={classes3.sectionDesktop}>
                          <IconButton
                            aria-label="Show 4 new mails"
                            color="inherit"
                          >
                            <Badge badgeContent={4} color="secondary">
                              <MailIcon />
                            </Badge>
                          </IconButton>
                          <IconButton
                            aria-label="Show 17 new notifications"
                            color="inherit"
                          >
                            <Badge badgeContent={17} color="secondary">
                              <NotificationsIcon />
                            </Badge>
                          </IconButton>
                          <IconButton
                            edge="end"
                            aria-label="Account of current user"
                            aria-controls={menuId}
                            aria-haspopup="true"
                            onClick={handleProfileMenuOpen}
                            color="inherit"
                          >
                            <AccountCircle />
                          </IconButton>
                        </div>
                        <div className={classes3.sectionMobile}>
                          <IconButton
                            aria-label="Show more"
                            aria-controls={mobileMenuId}
                            aria-haspopup="true"
                            onClick={handleMobileMenuOpen}
                            color="inherit"
                          >
                            <MoreIcon />
                          </IconButton>
                        </div>
                      </Toolbar>
                    </AppBar>
                    {renderMobileMenu}
                    {renderMenu}
                  </div>
                </div>
              </div>
            </CodeExample>
          </div>
          <div className="col-md-6">
            <CodeExample jsCode={jsCode4} beforeCodeTitle="App Bar with menu">
              <div className="kt-section">
                <span className="kt-section__sub"></span>
                <div className="kt-separator kt-separator--dashed"></div>
                <div className="kt-section__content">
                  <div className={classes4.root}>
                    <FormGroup>
                      <FormControlLabel
                        control={
                          <Switch
                            checked={auth4}
                            onChange={handleChange4}
                            aria-label="LoginSwitch"
                          />
                        }
                        label={auth4 ? "Logout" : "Login"}
                      />
                    </FormGroup>
                    <AppBar position="static">
                      <Toolbar>
                        <IconButton
                          edge="start"
                          className={classes4.menuButton}
                          color="inherit"
                          aria-label="Menu"
                        >
                          <MenuIcon />
                        </IconButton>
                        <Typography variant="h6" className={classes4.title}>
                          Photos
                        </Typography>
                        {auth4 && (
                          <div>
                            <IconButton
                              aria-label="Account of current user"
                              aria-controls="menu-appbar"
                              aria-haspopup="true"
                              onClick={handleMenu4}
                              color="inherit"
                            >
                              <AccountCircle />
                            </IconButton>
                            <Menu
                              id="menu-appbar"
                              anchorEl={anchorEl4}
                              anchorOrigin={{
                                vertical: "top",
                                horizontal: "right"
                              }}
                              keepMounted
                              transformOrigin={{
                                vertical: "top",
                                horizontal: "right"
                              }}
                              open={open4}
                              onClose={handleClose4}
                            >
                              <MenuItem onClick={handleClose4}>Profile</MenuItem>
                              <MenuItem onClick={handleClose4}>
                                My account
                              </MenuItem>
                            </Menu>
                          </div>
                        )}
                      </Toolbar>
                    </AppBar>
                  </div>
                </div>
              </div>
            </CodeExample>
          </div>
        </div>
  
        <div className="row">
          <div className="col-md-6">
            <CodeExample
              jsCode={jsCode5}
              beforeCodeTitle="App Bar with search field"
            >
              <div className="kt-section">
                <span className="kt-section__sub">A side searchbar.</span>
                <div className="kt-separator kt-separator--dashed"></div>
                <div className="kt-section__content">
                  <div className={classes5.root}>
                    <AppBar position="static">
                      <Toolbar>
                        <IconButton
                          edge="start"
                          className={classes5.menuButton}
                          color="inherit"
                          aria-label="Open drawer"
                        >
                          <MenuIcon />
                        </IconButton>
                        <Typography
                          className={classes5.title}
                          variant="h6"
                          noWrap
                        >
                          Material-UI
                        </Typography>
                        <div className={classes5.search}>
                          <div className={classes5.searchIcon}>
                            <SearchIcon />
                          </div>
                          <InputBase
                            placeholder="Search…"
                            classes={{
                              root: classes5.inputRoot,
                              input: classes5.inputInput
                            }}
                            inputProps={{ "aria-label": "Search" }}
                          />
                        </div>
                      </Toolbar>
                    </AppBar>
                  </div>
                </div>
              </div>
            </CodeExample>
          </div>
          <div className="col-md-6">
            <CodeExample jsCode={jsCode6} beforeCodeTitle="Dense (desktop only)">
              <div className="kt-section">
                <span className="kt-section__sub"></span>
                <div className="kt-section__content">
                  <div className={classes6.root}>
                    <AppBar position="static">
                      <Toolbar variant="dense">
                        <IconButton
                          edge="start"
                          className={classes6.menuButton}
                          color="inherit"
                          aria-label="Menu"
                        >
                          <MenuIcon />
                        </IconButton>
                        <Typography variant="h6" color="inherit">
                          Photos
                        </Typography>
                      </Toolbar>
                    </AppBar>
                  </div>
                </div>
              </div>
            </CodeExample>
          </div>
        </div>
      </>
    );
  }
  
  const jsCode1 = `
  import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import Button from '@material-ui/core/Button';
  import IconButton from '@material-ui/core/IconButton';
  import MenuIcon from '@material-ui/icons/Menu';
  
  const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }));
  
  export default function ButtonAppBar() {
    const classes = useStyles();
  
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
  `;
  const jsCode2 = `
  import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  
  const useStyles = makeStyles({
    root: {
      flexGrow: 1,
    },
  });
  
  export default function SimpleAppBar() {
    const classes = useStyles();
  
    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Toolbar>
            <Typography variant="h6" color="inherit">
              Photos
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
  `;
  const jsCode3 = `
  import React from 'react';
  import { fade, makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import IconButton from '@material-ui/core/IconButton';
  import Typography from '@material-ui/core/Typography';
  import InputBase from '@material-ui/core/InputBase';
  import Badge from '@material-ui/core/Badge';
  import MenuItem from '@material-ui/core/MenuItem';
  import Menu from '@material-ui/core/Menu';
  import MenuIcon from '@material-ui/icons/Menu';
  import SearchIcon from '@material-ui/icons/Search';
  import AccountCircle from '@material-ui/icons/AccountCircle';
  import MailIcon from '@material-ui/icons/Mail';
  import NotificationsIcon from '@material-ui/icons/Notifications';
  import MoreIcon from '@material-ui/icons/MoreVert';
  
  const useStyles = makeStyles(theme => ({
    grow: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginRight: theme.spacing(2),
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
      },
    },
    searchIcon: {
      width: theme.spacing(7),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 7),
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: 200,
      },
    },
    sectionDesktop: {
      display: 'none',
      [theme.breakpoints.up('md')]: {
        display: 'flex',
      },
    },
    sectionMobile: {
      display: 'flex',
      [theme.breakpoints.up('md')]: {
        display: 'none',
      },
    },
  }));
  
  export default function PrimarySearchAppBar() {
    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
  
    const isMenuOpen = Boolean(anchorEl);
    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
  
    function handleProfileMenuOpen(event) {
      setAnchorEl(event.currentTarget);
    }
  
    function handleMobileMenuClose() {
      setMobileMoreAnchorEl(null);
    }
  
    function handleMenuClose() {
      setAnchorEl(null);
      handleMobileMenuClose();
    }
  
    function handleMobileMenuOpen(event) {
      setMobileMoreAnchorEl(event.currentTarget);
    }
  
    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={handleMenuClose}>Profile</MenuItem>
        <MenuItem onClick={handleMenuClose}>My account</MenuItem>
      </Menu>
    );
  
    const mobileMenuId = 'primary-search-account-menu-mobile';
    const renderMobileMenu = (
      <Menu
        anchorEl={mobileMoreAnchorEl}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        id={mobileMenuId}
        keepMounted
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={isMobileMenuOpen}
        onClose={handleMobileMenuClose}
      >
        <MenuItem>
          <IconButton aria-label="Show 4 new mails" color="inherit">
            <Badge badgeContent={4} color="secondary">
              <MailIcon />
            </Badge>
          </IconButton>
          <p>Messages</p>
        </MenuItem>
        <MenuItem>
          <IconButton aria-label="Show 11 new notifications" color="inherit">
            <Badge badgeContent={11} color="secondary">
              <NotificationsIcon />
            </Badge>
          </IconButton>
          <p>Notifications</p>
        </MenuItem>
        <MenuItem onClick={handleProfileMenuOpen}>
          <IconButton
            aria-label="Account of current user"
            aria-controls="primary-search-account-menu"
            aria-haspopup="true"
            color="inherit"
          >
            <AccountCircle />
          </IconButton>
          <p>Profile</p>
        </MenuItem>
      </Menu>
    );
  
    return (
      <div className={classes.grow}>
        <AppBar position="static">
          <Toolbar>
            <IconButton
              edge="start"
              className={classes.menuButton}
              color="inherit"
              aria-label="Open drawer"
            >
              <MenuIcon />
            </IconButton>
            <Typography className={classes.title} variant="h6" noWrap>
              Material-UI
            </Typography>
            <div className={classes.search}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
              <InputBase
                placeholder="Search…"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'Search' }}
              />
            </div>
            <div className={classes.grow} />
            <div className={classes.sectionDesktop}>
              <IconButton aria-label="Show 4 new mails" color="inherit">
                <Badge badgeContent={4} color="secondary">
                  <MailIcon />
                </Badge>
              </IconButton>
              <IconButton aria-label="Show 17 new notifications" color="inherit">
                <Badge badgeContent={17} color="secondary">
                  <NotificationsIcon />
                </Badge>
              </IconButton>
              <IconButton
                edge="end"
                aria-label="Account of current user"
                aria-controls={menuId}
                aria-haspopup="true"
                onClick={handleProfileMenuOpen}
                color="inherit"
              >
                <AccountCircle />
              </IconButton>
            </div>
            <div className={classes.sectionMobile}>
              <IconButton
                aria-label="Show more"
                aria-controls={mobileMenuId}
                aria-haspopup="true"
                onClick={handleMobileMenuOpen}
                color="inherit"
              >
                <MoreIcon />
              </IconButton>
            </div>
          </Toolbar>
        </AppBar>
        {renderMobileMenu}
        {renderMenu}
      </div>
    );
  }
  `;
  const jsCode4 = `
  import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import IconButton from '@material-ui/core/IconButton';
  import MenuIcon from '@material-ui/icons/Menu';
  import AccountCircle from '@material-ui/icons/AccountCircle';
  import Switch from '@material-ui/core/Switch';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import FormGroup from '@material-ui/core/FormGroup';
  import MenuItem from '@material-ui/core/MenuItem';
  import Menu from '@material-ui/core/Menu';
  
  const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }));
  
  export default function MenuAppBar() {
    const classes = useStyles();
    const [auth, setAuth] = React.useState(true);
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
  
    function handleChange(event) {
      setAuth(event.target.checked);
    }
  
    function handleMenu(event) {
      setAnchorEl(event.currentTarget);
    }
  
    function handleClose() {
      setAnchorEl(null);
    }
  
    return (
      <div className={classes.root}>
        <FormGroup>
          <FormControlLabel
            control={<Switch checked={auth} onChange={handleChange} aria-label="LoginSwitch" />}
            label={auth ? 'Logout' : 'Login'}
          />
        </FormGroup>
        <AppBar position="static">
          <Toolbar>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" className={classes.title}>
              Photos
            </Typography>
            {auth && (
              <div>
                <IconButton
                  aria-label="Account of current user"
                  aria-controls="menu-appbar"
                  aria-haspopup="true"
                  onClick={handleMenu}
                  color="inherit"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={anchorEl}
                  anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  keepMounted
                  transformOrigin={{
                    vertical: 'top',
                    horizontal: 'right',
                  }}
                  open={open}
                  onClose={handleClose}
                >
                  <MenuItem onClick={handleClose}>Profile</MenuItem>
                  <MenuItem onClick={handleClose}>My account</MenuItem>
                </Menu>
              </div>
            )}
          </Toolbar>
        </AppBar>
      </div>
    );
  }
  `;
  const jsCode5 = `
  import React from 'react';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import IconButton from '@material-ui/core/IconButton';
  import Typography from '@material-ui/core/Typography';
  import InputBase from '@material-ui/core/InputBase';
  import { fade, makeStyles } from '@material-ui/core/styles';
  import MenuIcon from '@material-ui/icons/Menu';
  import SearchIcon from '@material-ui/icons/Search';
  
  const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(1),
        width: 'auto',
      },
    },
    searchIcon: {
      width: theme.spacing(7),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 7),
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        width: 120,
        '&:focus': {
          width: 200,
        },
      },
    },
  }));
  
  export default function SearchAppBar() {
    const classes = useStyles();
  
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <IconButton
              edge="start"
              className={classes.menuButton}
              color="inherit"
              aria-label="Open drawer"
            >
              <MenuIcon />
            </IconButton>
            <Typography className={classes.title} variant="h6" noWrap>
              Material-UI
            </Typography>
            <div className={classes.search}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
              <InputBase
                placeholder="Search…"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'Search' }}
              />
            </div>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
  `;
  const jsCode6 = `
  import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import Typography from '@material-ui/core/Typography';
  import IconButton from '@material-ui/core/IconButton';
  import MenuIcon from '@material-ui/icons/Menu';
  
  const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
  }));
  
  export default function DenseAppBar() {
    const classes = useStyles();
  
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar variant="dense">
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" color="inherit">
              Photos
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
  `;
  