From 65cfe58557db82f92389e12123a818a91eb6d508 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sun, 5 Nov 2023 13:29:34 +0000
Subject: [PATCH] fix navbar on mobile

---
 src/components/Footer.tsx | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2fa3b82..e11abe4 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -22,7 +22,7 @@ export default function Footer() {
   return (
     <footer className="p-3">
       <Card className="mb-2 mt-2 flex flex-col items-center justify-center gap-1 !pb-1 !pt-0">
-        <div className="flex flex-row gap-3">
+        <div className="flex flex-col items-center gap-1 md:flex-row md:items-start md:gap-3">
           <a
             className="transform-gpu transition-all hover:text-blue-500"
             href="https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2"
@@ -30,22 +30,23 @@ export default function Footer() {
             {ssrSettings.siteName}
           </a>
 
-          {buttons.map((button, index) => {
-            return (
-              <div
-                key={index}
-                className="flex flex-row items-center justify-center gap-3"
-              >
-                <div className="h-4 w-[1px] bg-neutral-100"></div>
-                <a
-                  href={button.url}
-                  className="transform-gpu transition-all hover:text-blue-500"
+          <div className="flex divide-x divide-solid divide-neutral-500">
+            {buttons.map((button, index) => {
+              return (
+                <div
+                  key={index}
+                  className="flex flex-row items-center justify-center gap-3 pl-2 pr-2"
                 >
-                  {button.name}
-                </a>
-              </div>
-            );
-          })}
+                  <a
+                    href={button.url}
+                    className="transform-gpu transition-all hover:text-blue-500"
+                  >
+                    {button.name}
+                  </a>
+                </div>
+              );
+            })}
+          </div>
         </div>
 
         <div className="text-sm text-gray-400">Build ID: {buildId}</div>