From 8161abfc7abf252f2777902993add71885a24b12 Mon Sep 17 00:00:00 2001
From: Zack Harley <zackharley@gmail.com>
Date: Fri, 16 Aug 2024 14:26:09 -0400
Subject: [PATCH] Add merch link

---
 src/app/contact/page.tsx  |  2 +-
 src/components/Header.tsx | 29 ++++++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 0b4ab9a..fef022c 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -11,7 +11,7 @@ export default function ContactPage() {
       <Header />
       <div className="py-6 md:py-20">
         <PageSection title="Contact">
-          <div className="mt-4 md:mt-10 mx-4 flex flex-col items-center md:items-start md:flex-row gap-4 md:gap-8 text-center">
+          <div className="mt-4 md:mt-10 mx-4 flex flex-col items-center gap-4 md:gap-8 text-center">
             <Image
               src={contactImage}
               placeholder="blur"
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 31ef094..0140759 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -27,6 +27,10 @@ const navItems: NavItem[] = [
     href: '/#shows',
     label: 'Shows',
   },
+  {
+    href: 'https://merch.thedirtynelsons.com',
+    label: 'Store',
+  },
   {
     href: '/#music',
     label: 'Music',
@@ -43,6 +47,10 @@ const navItems: NavItem[] = [
 
 export default function Header() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const navItemsToDisplay = navItems.filter(
+    ({ showOnDesktop }) =>
+      showOnDesktop === undefined || showOnDesktop === true,
+  );
   return (
     <>
       <header className="hidden md:flex flex-row items-center px-16 absolute top-0 h-16 w-full bg-[#211c1c9e] z-[1000]">
@@ -56,19 +64,14 @@ export default function Header() {
         </Link>
         <div className="w-6 h-[1px] bg-[#F1ECC7] mx-4" />
         <nav className="flex flex-row gap-x-3 mt-2">
-          {navItems
-            .filter(
-              ({ showOnDesktop }) =>
-                showOnDesktop === undefined || showOnDesktop === true,
-            )
-            .map(({ href, label }, index) => (
-              <Fragment key={label}>
-                <Link href={href} className="hover:underline decoration-dashed">
-                  {label}
-                </Link>
-                {index < navItems.length - 1 && <span>•</span>}
-              </Fragment>
-            ))}
+          {navItemsToDisplay.map(({ href, label }, index) => (
+            <Fragment key={label}>
+              <Link href={href} className="hover:underline decoration-dashed">
+                {label}
+              </Link>
+              {index < navItemsToDisplay.length - 1 && <span>•</span>}
+            </Fragment>
+          ))}
         </nav>
         <div className="flex-grow h-[1px] bg-[#F1ECC7] mx-4" />
         <div className="max-w-5xl flex flex-row gap-x-4">