From d111d0e88af7927b495063e652ecf2e1b4455e01 Mon Sep 17 00:00:00 2001
From: skunichetty <skunich@umich.edu>
Date: Tue, 2 Jul 2024 17:06:09 -0400
Subject: [PATCH 1/4] Refactored custom components + switched to gray-matter

---
 app/layout.tsx        |   2 +-
 app/posts/page.tsx    |  24 +++-------
 components/navbar.tsx |   8 ++--
 components/post.tsx   |   1 -
 mdx-components.tsx    |   7 +++
 package-lock.json     | 109 ++++++++++++++++++++++++++++++++++++++++++
 package.json          |   1 +
 7 files changed, 128 insertions(+), 24 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index f5f6042..b8d72e5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={`${inter_tight.className} flex flex-col min-h-screen`}>
         <Navbar links={links} />
-        <div className="content my-6">{children}</div>
+        <main className="content my-6">{children}</main>
         <Footer />
       </body>
     </html>
diff --git a/app/posts/page.tsx b/app/posts/page.tsx
index 91d9f60..62f0a19 100644
--- a/app/posts/page.tsx
+++ b/app/posts/page.tsx
@@ -3,13 +3,12 @@ import path from "path";
 import Link from "next/link";
 import { dateComparator } from "@/app/utils";
 import { PostMetadata } from "@/components/post";
-import { parse } from "yaml";
+import matter from "gray-matter";
 
 interface RawPostMetadata {
   title: string;
   date: string;
   editDate?: string;
-  author: string;
   keywords: string[];
   description: string;
   slug: string;
@@ -29,21 +28,11 @@ async function getPosts() {
   const raw_metadata: RawPostMetadata[] = await Promise.all(
     folders.map(async ({fullpath, slug}) => {
       const filename = `${fullpath}/page.mdx`;
-      const main = await readFile(filename);
-      const content = main.toString().split("\n");
-
-      let index = 0;
-      if (content[index++] !== "---") {
-        console.error(`Invalid MDX file "${filename}": no frontmatter found`);
-      } else {
-        while (index < content.length && content[index] != "---") {
-          ++index;
-        }
-        return {
-          slug, 
-          ...parse(content.slice(1, index).join("\n"))
-        };
-      }
+      const contents = matter(await readFile(filename));
+      return {
+        ...contents.data,
+        slug
+      };
     })
   );
 
@@ -68,7 +57,6 @@ function PostInfo({
   title,
   date,
   editDate,
-  author,
   slug,
   description,
 }: PostMetadata) {
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 12337f1..c00ce43 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -98,8 +98,8 @@ export default function Navbar({ links }: NavbarProps) {
   const [dropdownActive, setDropdownActive] = useState(false);
 
   return (
-    <div className="px-10 pt-10">
-      <nav className={`flex flex-row items-center justify-between`}>
+    <nav className="px-10 pt-10">
+      <div className="flex flex-row items-center justify-between">
         <Logo />
         <NavbarRow links={links} pathname={pathname} />
         <button
@@ -109,10 +109,10 @@ export default function Navbar({ links }: NavbarProps) {
         >
           <Icon name="menu" />
         </button>
-      </nav>
+      </div>
       {dropdownActive ? (
         <NavbarDropdown links={links} pathname={pathname} />
       ) : null}
-    </div>
+    </nav>
   );
 }
diff --git a/components/post.tsx b/components/post.tsx
index 4ff85b1..3e7b364 100644
--- a/components/post.tsx
+++ b/components/post.tsx
@@ -7,7 +7,6 @@ export interface PostMetadata {
   title: string;
   date: Date;
   editDate?: Date;
-  author: string;
   slug: string;
   keywords: string[];
   description: string;
diff --git a/mdx-components.tsx b/mdx-components.tsx
index d81c88f..96ed8cd 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,5 +1,6 @@
 import type { MDXComponents } from "mdx/types";
 import Link from "next/link";
+import { PostHeader, Callout, BlockEquation, Example, Definition, ImageWithCaption } from "@/components/post";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -39,6 +40,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         {children}
       </blockquote>
     ),
+    PostHeader,
+    Callout,
+    BlockEquation,
+    Example,
+    Definition,
+    ImageWithCaption,
     ...components,
   };
 }
diff --git a/package-lock.json b/package-lock.json
index 59bf6d0..c5aecdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@mdx-js/react": "^3.0.1",
         "@next/mdx": "^14.2.3",
         "@types/mdx": "^2.0.13",
+        "gray-matter": "^4.0.3",
         "gsap": "^3.12.5",
         "katex": "^0.16.10",
         "next": "14.2.3",
@@ -2729,6 +2730,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
@@ -2879,6 +2893,18 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3312,6 +3338,43 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/gsap": {
       "version": "3.12.5",
       "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
@@ -3861,6 +3924,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4351,6 +4423,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -6613,6 +6694,19 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "license": "MIT",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/semver": {
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
@@ -6784,6 +6878,12 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -6992,6 +7092,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
diff --git a/package.json b/package.json
index 6368af8..3522cfe 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.3",
     "@types/mdx": "^2.0.13",
+    "gray-matter": "^4.0.3",
     "gsap": "^3.12.5",
     "katex": "^0.16.10",
     "next": "14.2.3",

From 2692be7a2e4b692d9d48ddd4f5cd60eb01f03342 Mon Sep 17 00:00:00 2001
From: skunichetty <skunich@umich.edu>
Date: Sun, 7 Jul 2024 16:03:02 -0400
Subject: [PATCH 2/4] Fixed some type issues

---
 app/posts/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/posts/page.tsx b/app/posts/page.tsx
index 62f0a19..d11e1d9 100644
--- a/app/posts/page.tsx
+++ b/app/posts/page.tsx
@@ -28,11 +28,11 @@ async function getPosts() {
   const raw_metadata: RawPostMetadata[] = await Promise.all(
     folders.map(async ({fullpath, slug}) => {
       const filename = `${fullpath}/page.mdx`;
-      const contents = matter(await readFile(filename));
-      return {
-        ...contents.data,
+      const contents = {
+        ...matter(await readFile(filename)).data,
         slug
-      };
+      } as RawPostMetadata;
+      return contents; 
     })
   );
 

From f5318c0d7ea1c1c3a08843d75305decc36c71bf5 Mon Sep 17 00:00:00 2001
From: skunichetty <skunich@umich.edu>
Date: Mon, 8 Jul 2024 19:05:39 -0400
Subject: [PATCH 3/4] Animated dropdown

---
 components/dropdown.tsx | 75 +++++++++++++++++++++++++++++++++++------
 1 file changed, 64 insertions(+), 11 deletions(-)

diff --git a/components/dropdown.tsx b/components/dropdown.tsx
index 87f5ad3..b366afe 100644
--- a/components/dropdown.tsx
+++ b/components/dropdown.tsx
@@ -1,5 +1,7 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import Icon from "./icon";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 
 interface DropdownProps {
   icon: string;
@@ -9,23 +11,74 @@ interface DropdownProps {
 
 export default function Dropdown({ icon, title, children }: DropdownProps) {
   const [contentVisible, setContentVisibility] = useState(false);
+  const [visibleAnim, setVisibleAnim] = useState<gsap.core.Timeline | null>(
+    null
+  );
+
+  const dropdown = useRef<HTMLDivElement>(null);
+  const content = useRef<HTMLDivElement>(null);
+  const arrow = useRef<HTMLDivElement>(null);
+
+  const { contextSafe } = useGSAP(
+    () => {
+      let tl = gsap.timeline({ paused: true });
+      tl.fromTo(
+        content.current,
+        {
+          yPercent: -100,
+          opacity: 0,
+        },
+        {
+          yPercent: 0,
+          duration: 1,
+          opacity: 1,
+          onStart: () => setContentVisibility(true),
+          onReverseComplete: () => setContentVisibility(false),
+          ease: "power3.out",
+        }
+      );
+      tl.to(
+        arrow.current,
+        {
+          rotate: 180,
+          duration: 1,
+          ease: "power3.out",
+        },
+        0
+      );
+      setVisibleAnim(tl);
+    },
+    { scope: dropdown }
+  );
+
+  const toggle = contextSafe(() => {
+    if (contentVisible) {
+      visibleAnim?.timeScale(2).reverse();
+    } else {
+      visibleAnim?.play();
+    }
+  });
 
   return (
-    <div>
+    <div ref={dropdown}>
       <button
         type="button"
-        onClick={() => setContentVisibility(!contentVisible)}
-        className="hover:text-blue-500 transition"
+        onClick={toggle}
+        className="hover:text-blue-500 flex flex-row items-center gap-2"
       >
-        <div className="flex flex-row items-center gap-2">
-          <Icon name={contentVisible ? "caret_up" : "caret_down"} />
-          <h1>{title}</h1>
-          <Icon name={icon} />
+        <div ref={arrow}>
+          <Icon name="caret_up" />
         </div>
+        <h1>{title}</h1>
+        <Icon name={icon} />
       </button>
-      {contentVisible ? (
-        <div className="flex flex-col ml-6 my-2 items-left">{children}</div>
-      ) : null}
+      <div className="overflow-hidden">
+        <div ref={content}>
+          {contentVisible && (
+            <div className="flex flex-col ml-6 my-2 items-left">{children}</div>
+          )}
+        </div>
+      </div>
     </div>
   );
 }

From 99ae597500e128447b22fe7b052b88c6d957f30f Mon Sep 17 00:00:00 2001
From: skunichetty <skunich@umich.edu>
Date: Mon, 8 Jul 2024 20:22:37 -0400
Subject: [PATCH 4/4] Added dropdown animation to navbar

---
 components/navbar.tsx | 166 ++++++++++++++++++++++++++++--------------
 1 file changed, 111 insertions(+), 55 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index c00ce43..52ef6ad 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,8 +1,12 @@
 "use client";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import Icon from "./icon";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+
+const DELAY_FACTOR = 0.2;
 
 interface NavbarItemProps {
   title: string;
@@ -10,18 +14,21 @@ interface NavbarItemProps {
   active: boolean;
 }
 
-export interface NavbarItem {
+interface NavbarItemDropdownProps {
   title: string;
   href: string;
+  active: boolean;
+  timeline: gsap.core.Timeline | null;
+  index: number;
 }
 
-interface NavbarProps {
-  links: NavbarItem[];
+export interface NavbarItem {
+  title: string;
+  href: string;
 }
 
-interface NavbarSubtypeProps {
+interface NavbarProps {
   links: NavbarItem[];
-  pathname: string;
 }
 
 function NavbarRowItem({ title, href, active }: NavbarItemProps) {
@@ -37,48 +44,37 @@ function NavbarRowItem({ title, href, active }: NavbarItemProps) {
   );
 }
 
-function NavbarDropdownItem({ title, href, active }: NavbarItemProps) {
-  return (
-    <Link
-      className={`block w-full ${
-        active ? "font-bold" : "font-normal text-gray-600 dark:text-gray-400"
-      } hover:text-blue-500 py-2 pl-3 transition flex flew-row items-center gap-2`}
-      href={href}
-    >
-      {active ? <Icon name="arrow-right-sharp" /> : <></>} {title}
-    </Link>
-  );
-}
+function NavbarDropdownItem({
+  title,
+  href,
+  active,
+  timeline,
+  index,
+}: NavbarItemDropdownProps) {
+  const linkRef = useRef<HTMLAnchorElement>(null);
 
-function NavbarRow({ links, pathname }: NavbarSubtypeProps) {
-  return (
-    <ul className="flex-row sm:flex hidden divide-x-2 divide-gray-400 text-gray-600 dark:text-gray-400">
-      {links.map((item) => (
-        <li key={item.title} className="px-3 my-1">
-          <NavbarRowItem
-            title={item.title}
-            href={item.href}
-            active={pathname === item.href}
-          />
-        </li>
-      ))}
-    </ul>
-  );
-}
+  useGSAP(() => {
+    timeline &&
+      timeline.fromTo(
+        linkRef.current,
+        { opacity: 0, xPercent: -10 },
+        { opacity: 1, duration: 0.75, xPercent: 0 },
+        index * DELAY_FACTOR
+      );
+  });
 
-function NavbarDropdown({ links, pathname }: NavbarSubtypeProps) {
   return (
-    <ul className="flex-col sm:hidden visible mt-6 divide-y-2 divide-gray-400 border-y-2 text-gray-600 dark:text-gray-400">
-      {links.map((item) => (
-        <li key={item.title}>
-          <NavbarDropdownItem
-            title={item.title}
-            href={item.href}
-            active={pathname === item.href}
-          />
-        </li>
-      ))}
-    </ul>
+    <div className="flex flex-row items-center">
+      <Link
+        ref={linkRef}
+        className={`block w-full ${
+          active ? "font-bold" : "font-normal text-gray-600 dark:text-gray-400"
+        } hover:text-blue-500 transition flex flew-row items-center gap-2 py-1 opacity-0`}
+        href={href}
+      >
+        <Icon name="arrow-right-sharp" /> {title}
+      </Link>
+    </div>
   );
 }
 
@@ -96,23 +92,83 @@ function Logo() {
 export default function Navbar({ links }: NavbarProps) {
   const pathname = usePathname();
   const [dropdownActive, setDropdownActive] = useState(false);
+  const [dropAnim, setDropAnim] = useState<gsap.core.Timeline | null>(null);
+
+  const navbar = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const { contextSafe } = useGSAP(
+    () => {
+      let tl = gsap.timeline({ paused: true });
+      tl.fromTo(
+        dropdownRef.current,
+        { opacity: 0 },
+        {
+          opacity: 1,
+          duration: links.length * DELAY_FACTOR,
+          onStart: () => setDropdownActive(true),
+          onReverseComplete: () => setDropdownActive(false),
+        }
+      );
+      setDropAnim(tl);
+    },
+    { scope: navbar }
+  );
+  const toggle = contextSafe(() => {
+    if (dropdownActive) {
+      dropAnim?.timeScale(2).reverse();
+    } else {
+      dropAnim?.play();
+    }
+  });
+
+  const row = (
+    <ul className="flex-row sm:flex hidden divide-x-2 divide-gray-400 text-gray-600 dark:text-gray-400">
+      {links.map((item) => (
+        <li key={item.title} className="px-3">
+          <NavbarRowItem
+            title={item.title}
+            href={item.href}
+            active={pathname === item.href}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+
+  const dropdown = (
+    <div ref={dropdownRef}>
+      {dropdownActive ? (
+        <div className="mt-6 border-y-2 py-2 sm:hidden visible">
+          <h4 className="mb-1">Navigation</h4>
+          <ul className="flex-col  text-gray-600 dark:text-gray-400">
+            {links.map((item, index) => (
+              <li key={item.title}>
+                <NavbarDropdownItem
+                  title={item.title}
+                  href={item.href}
+                  active={pathname === item.href}
+                  timeline={dropAnim!}
+                  index={index}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
 
   return (
-    <nav className="px-10 pt-10">
+    <nav ref={navbar} className="px-10 pt-10">
       <div className="flex flex-row items-center justify-between">
         <Logo />
-        <NavbarRow links={links} pathname={pathname} />
-        <button
-          type="button"
-          className="sm:hidden visible"
-          onClick={() => setDropdownActive(!dropdownActive)}
-        >
+        {row}
+        <button type="button" className="sm:hidden visible" onClick={toggle}>
           <Icon name="menu" />
         </button>
       </div>
-      {dropdownActive ? (
-        <NavbarDropdown links={links} pathname={pathname} />
-      ) : null}
+      {dropdown}
     </nav>
   );
 }
