tbg-ecomm-nextjs/components/Header/HeaderHome.js

/*eslint-disable*/
import React from "react";
import Link from "next/link";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Icon from "@material-ui/core/Icon";
// import People from "@material-ui/core/People";
import Chart from "@material-ui/icons/LocalGroceryStore";

// @material-ui/icons
import { Apps, ShareTwoTone } from "@material-ui/icons";

// core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-kit/components/headerLinksStyle.js";

import Image from "assets/img/Blue.png";
const useStyles = makeStyles(styles);

export default function HeaderHome(props) {
    const classes = useStyles();
    return (
    <div align="left">
        <List className={classes.list}>
        <ListItem className={classes.listItem}>
        <Link href="#">
        <Button color="transparent" className={classes.navLink}>
            <img
                src={Image} width="180px"
            />
            </Button>
        </Link>
        </ListItem>
        <ListItem className={classes.listItem}>
            <Link href="#">
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <Icon className={classes.icons}>home</Icon> Home
            </Button>
            </Link>
        </ListItem>
        <ListItem className={classes.listItem}>
            <Link href='#section1'>
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <Icon className={classes.icons}>card_travel</Icon> Core Value
            </Button>
            </Link>
        </ListItem>
        <ListItem className={classes.listItem}>
            <Link href="#">
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <Icon className={classes.icons}>business</Icon> Businees Partner
            </Button>
            </Link>
        </ListItem>
        <ListItem className={classes.listItem}>
            <Link href="#">
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <Icon className={classes.icons}>perm_identity</Icon> About Us
            </Button>
            </Link>
        </ListItem>
        <ListItem className={classes.listItem}>
            <Link href="#">
            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
                <Icon className={classes.icons}>dashboard</Icon> Gallery
            </Button>
            </Link>
        </ListItem>
        </List>
        </div>
    );
}