feat: added more stuff to header and added dropdown menu

Cubyx-Network · Oct 19, 2022 · dccd335 · dccd335
1 parent ffeb536
commit dccd335
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 12 deletions.
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 import { NextSeo } from "next-seo";
 import Link from "next/link";
 import HeaderLink from "./HeaderLink";
+import HeaderDropdown from "./HeaderDropdown";
 
 const Header = ({
   title,
@@ -35,7 +36,15 @@ const Header = ({
         </Link>
         <div className="flex items-center gap-4">
           <HeaderLink link={"/"}>Home</HeaderLink>
-          <HeaderLink link={"/intern"}>Intern</HeaderLink>
+          <HeaderLink link={"/projekte"}>Projekte</HeaderLink>
+          <HeaderDropdown link={"Partner"}>
+            {[
+              { href: "/partner/tts-craft", name: "TTS-Craft" },
+              { href: "/partner/expansehost", name: "Expansehost" },
+              { href: "/partner/rareloot", name: "Rareloot" },
+            ]}
+          </HeaderDropdown>
+          <HeaderLink link={"/impressum"}>Impressum</HeaderLink>
         </div>
       </div>
     </>

diff --git a/src/components/header/HeaderDropdown.tsx b/src/components/header/HeaderDropdown.tsx
@@ -1,18 +1,59 @@
-import Link from "next/link";
 import { useRouter } from "next/router";
+import { useState } from "react";
+import Icon from "../icon/Icon";
 
-const HeaderLink = ({ link, children }: { link: string; children: any }) => {
-  const isCurrentSite = useRouter().pathname === link;
+const HeaderDropdown = ({
+  link,
+  children,
+}: {
+  link: string;
+  children: { name: string; href: string }[];
+}) => {
+  const currentSite = useRouter().pathname;
+
+  const [active, setActive] = useState(false);
+
+  function toggleActive() {
+    setActive(!active);
+  }
+
+  const isCurrentDropdown = children.some(
+    (child) => child.href === currentSite
+  );
 
   return (
-    <Link href={link}>
-      <a href={link}>
-        <h1 className={`m-0 text-xl ${isCurrentSite && "color-secondary"}`}>
-          {children}
-        </h1>
-      </a>
-    </Link>
+    <div>
+      <span
+        className={`m-0 flex items-center text-xl hover:cursor-pointer ${
+          isCurrentDropdown && "color-secondary"
+        }`}
+        onClick={toggleActive}
+      >
+        {link}
+        <Icon
+          name="arrow-drop-down-line"
+          className={`ri-2x transition-all ${active && "rotate-180"}`}
+        />
+      </span>
+
+      {active && (
+        <ul
+          className={`bg-secondary absolute mt-1 flex w-fit flex-col gap-2 rounded-lg p-4`}
+        >
+          {children.map((child) => (
+            <li key={child.href}>
+              <a
+                href={child.href}
+                className={currentSite === child.href ? "color-secondary" : ""}
+              >
+                {child.name}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
   );
 };
 
-export default HeaderLink;
+export default HeaderDropdown;