www.prothmann.com/components/navbar.jsx

import React from "react";
import Image from "next/image";
import { withRouter } from "next/router";
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";

import Link from "next/link";

import Logo from "./media/logo.jsx";

gsap.registerPlugin(ScrollTrigger);

class Navbar extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.toggleClose = this.toggleClose.bind(this);
    this.isLg = this.isLg.bind(this);

    this.state = {
      isOpen: false,
      menuitems: [
        {
          key: 0,
          name: "Home",
          link: "/",
        },
        {
          key: 1,
          name: "Fertigungsverfahren",
          link: "/fertigungsverfahren",
        },
        {
          key: 2,
          name: "Materialien",
          link: "/materialien",
        },
        {
          key: 3,
          name: "Qualität",
          link: "/qualitaet",
        },
        {
          key: 4,
          name: "Branchen",
          link: "/branchen",
        },
        {
          key: 5,
          name: "Kontakt",
          link: "/kontakt",
        },
        {
          key: 6,
          name: "eAnfrage",
          link: "/eanfrage",
        },
      ],
      submenuServices: [
        {
          key: 0,
          name: "Laserteile",
          link: "laserteile",
          isActive: false,
          icon: "/icons/fertigungsverfahren/laserteile.svg",
          alt: "Laserteile Icon",
        },
        {
          key: 1,
          name: "Stanzteile",
          link: "stanzteile",
          isActive: false,
          icon: "/icons/fertigungsverfahren/stanzteile.svg",
          alt: "Stanzteile Icon",
        },
        {
          key: 2,
          name: "Biegeteile",
          link: "biegeteile",
          isActive: false,
          icon: "/icons/fertigungsverfahren/biegeteile.svg",
          alt: "Biegeteile Icon",
        },
        {
          key: 3,
          name: "Lasergravur",
          link: "lasergravur",
          isActive: false,
          icon: "/icons/fertigungsverfahren/lasergravur.svg",
          alt: "Lasergravur Icon",
        },
        {
          key: 4,
          name: "Blechkonstruktionen",
          link: "blechkonstruktion",
          isActive: false,
          icon: "/icons/fertigungsverfahren/metallkonstruktion.svg",
          alt: "Blechkonstruktionen Icon",
        },
        {
          key: 5,
          name: "Baugruppen",
          link: "baugruppe",
          isActive: false,
          icon: "/icons/fertigungsverfahren/baugruppe.svg",
          alt: "Baugruppen Icon",
        },
        {
          key: 6,
          name: "Fügeverfahren",
          link: "fügeverfahren",
          isActive: false,
          icon: "/icons/fertigungsverfahren/fuegeverfahren.svg",
          alt: "Fügeverfahren Icon",
        },
        {
          key: 7,
          name: "Entgrattechnik",
          link: "entgraten",
          isActive: false,
          icon: "/icons/fertigungsverfahren/entgraten.svg",
          alt: "Entgrattechnik Icon",
        },
      ],
    };
  }

  componentDidUpdate(props, prevProps) {
    if (this.props.isOpen !== prevProps.isOpen) {
      if (this.state.isOpen) {
        gsap.to(".navbar-collapse", {
          height: "auto",
        });
      } else if (!this.state.isOpen) {
        if (!this.isLg()) {
          gsap.to(".navbar-collapse", {
            height: 0,
          });
        }
      }
    }
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }
  toggleClose() {
    this.setState({
      isOpen: false,
    });
  }

  isLg() {
    if (
      (self.innerWidth && self.innerWidth >= 992) ||
      (document.documentElement &&
        document.documentElement.clientWidth &&
        document.documentElement.clientWidth >= 992) ||
      (document.body && document.body.clientWidth >= 992)
    ) {
      return true;
    } else {
      return false;
    }
  }

  componentDidMount() {
    if (!this.isLg()) {
      gsap.set(".navbar-collapse", {
        height: 0,
      });
    }

    let targets = gsap.utils.toArray(".subnav-container div");

    gsap
      .timeline({
        scrollTrigger: {
          trigger: "body",
          start: "top+=200 top",
          end: "+=300",
          scrub: 0.1,
        },
      })
      .to(".subnav-container", {
        height: 0,
        ease: "power1.inOut",
      })
      .to(
        targets,
        {
          opacity: 0,
          ease: "power4.inOut",
        },
        0
      );
  }

  render() {
    const pathname = this.props.router.pathname;
    return (
      <>
        <nav
          className="noselect navbar navbar-expand-lg fixed-top"
          onToggle={this.toggle}
        >
          <Link href="/" onClick={this.toggleClose}>
            <a className="navbar-brand">
              <Logo />
            </a>
          </Link>
          <button
            onClick={this.toggle}
            className="navbar-toggler"
            type="button"
          >
            <div
              className={
                this.state.isOpen ? "animated-icon open" : "animated-icon"
              }
            >
              <span />
              <span />
              <span />
              <span />
            </div>
          </button>
          <div className="mainnav-container d-flex justify-content-around">
            <div className="navbar-collapse">
              <div className="navbar-nav">
                {this.state.menuitems.map((menuitem, index) => (
                  <div key={menuitem.key} className="nav-item">
                    <Link href={menuitem.link}>
                      <a onClick={this.toggleClose}>{menuitem.name}</a>
                    </Link>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="subnav-container d-flex flex-row flex-nowrap align-items-center">
            {this.state.submenuServices.map((menuitem, index) => (
              <div key={menuitem.key} className="nav-subitem">
                <Link
                  href={"/fertigungsverfahren/" + menuitem.link}
                  className="nav-link"
                >
                  <a>
                    <Image
                      src={menuitem.icon}
                      alt={menuitem.alt}
                      layout="intrinsic"
                      width={50}
                      height={50}
                    />
                    <div>{menuitem.name}</div>
                  </a>
                </Link>
              </div>
            ))}
          </div>
        </nav>
      </>
    );
  }
}

export default withRouter(Navbar);