Fixed Image Loading

components/navbar.jsx

@@ -7,6 +7,14 @@ import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";
 import Link from "next/link";
 
 import Logo from "./media/logo.jsx";
+import laserteileImg from './images/fertigungsverfahren/laserteile.svg'
+import stanzteileImg from './images/fertigungsverfahren/stanzteile.svg'
+import biegeteileImg from './images/fertigungsverfahren/biegeteile.svg'
+import lasergravurImg from './images/fertigungsverfahren/lasergravur.svg'
+import blechkonstruktionImg from './images/fertigungsverfahren/blechkonstruktion.svg'
+import baugruppenImg from './images/fertigungsverfahren/baugruppen.svg'
+import fuegeverfahrenImg from './images/fertigungsverfahren/fuegeverfahren.svg'
+import entgrattechnikImg from './images/fertigungsverfahren/entgrattechnik.svg'
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -51,73 +59,7 @@ class Navbar extends React.Component {
           name: "Kontakt",
           link: "/kontakt",
         },
-      ],
-      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",
-        },
-      ],
+      ]
     };
   }
 
@@ -238,25 +180,151 @@ class Navbar extends React.Component {
           </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 className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/laserteile"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={laserteileImg}
+                    alt="Laserteile Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Laserteile</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/stanzteile"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={stanzteileImg}
+                    alt="Stanzteile Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Stanzteile</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/biegeteile"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={biegeteileImg}
+                    alt="Biegeteile Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Biegeteile</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/lasergravur"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={lasergravurImg}
+                    alt="Lasergravur Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Lasergravur</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/blechkonstruktionen"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={blechkonstruktionImg}
+                    alt="Blechkonstruktionen Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Blechkonstruktionen</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/baugruppen"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={baugruppenImg}
+                    alt="Baugruppen Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Baugruppen</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/fuegeverfahren"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={fuegeverfahrenImg}
+                    alt="Fügeverfahren Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Fügeverfahren</div>
+                </a>
+              </Link>
+            </div>
+
+            <div className="nav-subitem">
+              <Link
+                href={"/fertigungsverfahren/entgrattechnik"}
+                className="nav-link"
+              >
+                <a>
+                  <Image
+                    src={entgrattechnikImg}
+                    alt="Entgrattechnik Icon"
+                    layout="intrinsic"
+                    width={50}
+                    height={50}
+                  />
+                  <div>Entgrattechnik</div>
+                </a>
+              </Link>
+            </div>
+
+
           </div>
         </nav>
       </>