christian/www.prothmann.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial

Browse Source
This commit is contained in:
Christian Anetzberger
2022-01-29 20:48:35 +01:00
commit 01907eb338
144 changed files with 11275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
components/navbar.jsx Normal file
View File

@@ -0,0 +1,272 @@
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);