tbg-ecomm-nextjs/components/Header/HeaderLinks.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 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";

const useStyles = makeStyles(styles);

export default function HeaderLinks(props) {
  const classes = useStyles();
  return (
    <List className={classes.list}>
      <ListItem className={classes.listItem}>
      <Link href="/home">
      <Button color="transparent" className={classes.navLink}>
          <img
            src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="180px"
          />
          </Button>
      </Link>
      </ListItem>
      <ListItem className={classes.listItem}>
        <Link href="/home">
          <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
            <Icon className={classes.icons}>home</Icon> Home
          </Button>
        </Link>
      </ListItem>
      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
        <CustomDropdown
          noLiPadding
          navDropdown
          buttonText="Product"
          buttonProps={{
            className: classes.navLink,
            color: "transparent",
          }}
          buttonIcon={Apps}
          dropdownList={[
            <Link href="/product/product">
              <a className={classes.dropdownLink}>Motor</a>
            </Link>,
            <Link href="/product/ygp">
              <a className={classes.dropdownLink}>YGP</a>
            </Link>,
            <Link href="/product/yamalube">
              <a className={classes.dropdownLink}>Yamalube</a>
            </Link>,
            <Link href="/product/helmet">
              <a className={classes.dropdownLink}>Helmet</a>
            </Link>,
            <Link href="/product/apparel">
              <a className={classes.dropdownLink}>Apparel</a>
            </Link>,
            <Link href="/product/accessories">
              <a className={classes.dropdownLink}>Accessories</a>
            </Link>,
            <Link href="https://booking.thamrin.co.id/">
              <a className={classes.dropdownLink}>Service</a>
            </Link>,
            <Link href="/dealers">
            <a className={classes.dropdownLink}>Dealers</a>
          </Link>,
          ]}
        />
      </ListItem>
      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
        <Link href="/latestnews">
          <Button color="transparent" className={classes.navLink}>
            <Icon className={classes.icons}>event</Icon> Latest News
          </Button>
        </Link>
      </ListItem>
      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
        <Button href="/carrer" color="transparent" className={classes.navLink}>
          <Icon className={classes.icons}>wallet_travel</Icon> Career
        </Button>
      </ListItem>
      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
        <CustomDropdown
          noLiPadding
          navDropdown
          buttonText="Partner"
          buttonProps={{
            className: classes.navLink,
            color: "transparent",
          }}
          buttonIcon={ShareTwoTone}
          dropdownList={[
            <Link href="https://www.yamaha-motor.co.id/">
              <a className={classes.dropdownLink}>Yamaha</a>
            </Link>,
            <Link href="https://www.suzuki.co.id/">
              <a className={classes.dropdownLink}>Suzuki</a>
            </Link>,
            <Link href="https://www.honda-indonesia.com/">
              <a className={classes.dropdownLink}>Honda</a>
            </Link>,
            <Link href="https://www.hino.co.id/">
              <a className={classes.dropdownLink}>Hino</a>
            </Link>,
            <Link href="https://www.mercedes-benz.co.id/passengercars.html">
              <a className={classes.dropdownLink}>Mercedes-Benz</a>
            </Link>,
            <Link href="http://bprberkatsejati.com/">
              <a className={classes.dropdownLink}>BPR Berkat Sejati</a>
            </Link>,
            <Link href="https://www.hino.co.id/">
              <a className={classes.dropdownLink}>Palembang Indah Mall</a>
            </Link>,
            <Link href="http://www.emilia-hotel.com/">
              <a className={classes.dropdownLink}>Hotel Emilia</a>
            </Link>,
            <Link href="http://homes.thamrin.xyz/">
              <a className={classes.dropdownLink}>Thamrin Home</a>
            </Link>,
            <Link href="https://www.hino.co.id/">
              <a className={classes.dropdownLink}>Ketty Resto</a>
            </Link>,
          ]}
        />
      </ListItem>
      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
        <Button
          href="abous_us/aboutus"
          color="transparent"
          className={classes.navLink}
        >
          <Icon className={classes.icons}>account_balance</Icon> About Us
        </Button>
      </ListItem>
      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
        <Button href="/chart" color="transparent" className={classes.navLink}>
          <Chart className={classes.icons} />
        </Button>
      </ListItem>
      <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
        <Button
          href="/login"
          className={classes.registerNavLink}
          color="info"
          round
        >
          <Icon className={classes.icons}>input</Icon> Login
        </Button>
      </ListItem>
    </List>
  );
}