text: /* Imports needed by the file */
  import React from "react";
  import PropTypes from "prop-types";
  import clsx from "clsx";
  import { withStyles } from "@material-ui/core/styles";
  import Link from "@material-ui/core/Link";
  import AppBar from "../../Components/Landing/Header";
  import Toolbar, {
    styles as toolbarStyles,
  } from "../../Components/Landing/Toolbar";
  
  AppAppBar.propTypes = {
    classes: PropTypes.object.isRequired,
  }; // Properties of the app bar
  
  const styles = (theme) => ({
    title: {
      fontSize: 30,
    },
    placeholder: toolbarStyles(theme).root,
    toolbar: {
      justifyContent: "space-between",
    },
    left: {
      flex: 1,
    },
    leftLinkActive: {
      color: theme.palette.common.white,
    },
    right: {
      flex: 1,
      display: "flex",
      justifyContent: "flex-end",
    },
    rightLink: {
      fontSize: 15,
      color: theme.palette.common.white,
      marginLeft: theme.spacing(3),
    },
    linkSecondary: {
      color: theme.palette.secondary.main,
    },
  }); // Styles needed for this file
  
  /**
   * Method to display the application bar
   * @param {*} props parameter for the style to use
   */
  function AppAppBar(props) {
    const { classes } = props;
  
    return (
      <div>
        <AppBar position="fixed">
          <Toolbar className={classes.toolbar}>
            <div className={classes.left} />
            <Link
              variant="h6"
              underline="none"
              color="inherit"
              className={classes.title}
              href="/"
            >
              {"Google Library Manager"}
            </Link>
            <div className={classes.right}>
              <Link
                color="inherit"
                variant="h6"
                underline="none"
                className={classes.rightLink}
                href="/signin"
              >
                {"Sign In"}
              </Link>
              <Link
                variant="h6"
                underline="none"
                className={clsx(classes.rightLink, classes.linkSecondary)}
                href="/signup"
              >
                {"Sign Up"}
              </Link>
            </div>
          </Toolbar>
        </AppBar>
        <div className={classes.placeholder} />
      </div>
    );
  }
  
  export default withStyles(styles)(AppAppBar); // Exports the default function
  