ballistic-builder/app/components/GB_Header/index.tsx

import React, { Component } from 'react';
import PropTypes from 'prop-types'; //ES6
import styles from './styles.module.css';
import Link from 'next/link';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material//ListItemText';
// import TypoGraphy from '@mui/material/Typography';
import Button from '@mui/material//Button';
import { infoLinks } from '@/app/lib/linkList/infoLinks';
import  sectionLinks  from '@/app/lib/linkList/sectionLinks';

export default class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
    }
  }

  render() {
    return (
      (<div>
        <div className="topheader">
          <Link href="/" legacyBehavior><a className="logo">Gun Builder</a>
          </Link>
        </div>
        <AppBar position="static">
        <Toolbar>
            <List component="nav">
              <ListItem component="div" className="nav-item">
                <ListItemText inset>
                    <Link href={sectionLinks.UPPERS.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.UPPERS.TEXT}</a></Link>
                </ListItemText>

                  <ListItemText inset>
                      <Link href={sectionLinks.PARTSLIST.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.PARTSLIST.TEXT}</a></Link>
                  </ListItemText>

                  <ListItemText inset>
                      <Link href={sectionLinks.BUILDS.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.BUILDS.TEXT}</a></Link>
                  </ListItemText>

                  <ListItemText inset>
                      <Link href={sectionLinks.BLOG.URL} legacyBehavior><a className={styles.navLinks}>{sectionLinks.BLOG.TEXT}</a></Link>
                  </ListItemText>

               {/*    <ListItemText inset>
                      <Link href="/admin"><a className={styles.navLinks}>Admin</a></Link>
                  </ListItemText> */}
                </ListItem>
                
              </List>
          </Toolbar>
        </AppBar>
        <style jsx>{`
                  header {
                    background:#101010;
                    color:#fff;
                  }
                   .topheader {
                    background:#111;
                    height: 4em;
                    color: #000;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                  }
          
                   .topheader a {
                      color:#fff;
                      padding-left: 15px;
                      text-transform: uppercase;
                      font-weight: bold;
                      letter-spacing: 2px;
                  }
                   .nav {
                    display: flex;
                    background: #4c5d34;
                  }
                   ul {
                    list-style: none;
                    padding: 0;
                    display: flex;
                    margin: 0;
                    height: 100%;
                  }
                   ul li {
                    margin-right: 10px;
                    padding:1em 1.5em;
                    border-right:2px solid rgba(0,0,0,.3);
                    text-transform: uppercase;
                    font-weight:bold;
                    letter-spacing:2px;
                  }
                `}</style>
      </div>)
    );
  }
}


Header.propTypes = {

};