From ed61d8c8e69cc806b3f5a7f21754d0e3d0874a48 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 27 Sep 2024 19:49:08 +0100
Subject: [PATCH] fix navbar buttons

---
 src/components/navbar/navbar.tsx         | 16 ++++++++--------
 src/components/navbar/profile-button.tsx | 16 +++++-----------
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
index 57e17e0..f562938 100644
--- a/src/components/navbar/navbar.tsx
+++ b/src/components/navbar/navbar.tsx
@@ -33,6 +33,8 @@ const renderNavbarItem = (item: NavbarItem) => (
 );
 
 export default function Navbar() {
+  const rightItem = items[items.length - 1];
+
   return (
     <div className="w-full sticky top-0 z-[999]">
       <div className="h-10 items-center flex justify-between bg-secondary/95">
@@ -41,18 +43,16 @@ export default function Navbar() {
           <ProfileButton />
 
           {items.slice(0, -1).map((item, index) => (
-            <NavbarButton key={index}>
-              <Link href={item.link}>{renderNavbarItem(item)}</Link>
-            </NavbarButton>
+            <Link href={item.link} key={index} className="h-full">
+              <NavbarButton key={index}>{renderNavbarItem(item)}</NavbarButton>
+            </Link>
           ))}
         </div>
 
         {/* Right-aligned item */}
-        <NavbarButton>
-          <Link href={items[items.length - 1].link}>
-            {renderNavbarItem(items[items.length - 1])}
-          </Link>
-        </NavbarButton>
+        <Link href={rightItem.link} className="h-full">
+          <NavbarButton>{renderNavbarItem(rightItem)}</NavbarButton>
+        </Link>
       </div>
     </div>
   );
diff --git a/src/components/navbar/profile-button.tsx b/src/components/navbar/profile-button.tsx
index c224fa3..3b22f56 100644
--- a/src/components/navbar/profile-button.tsx
+++ b/src/components/navbar/profile-button.tsx
@@ -19,19 +19,13 @@ export default function ProfileButton() {
   }
 
   return (
-    <NavbarButton>
-      <Link
-        href={`/player/${settings.playerId}`}
-        className="flex items-center gap-2"
-      >
+    <Link href={`/player/${settings.playerId}`} className="flex items-center gap-2 h-full">
+      <NavbarButton>
         <Avatar className="w-6 h-6">
-          <AvatarImage
-            alt="Profile Picture"
-            src={`https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`}
-          />
+          <AvatarImage alt="Profile Picture" src={`https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`} />
         </Avatar>
         <p>You</p>
-      </Link>
-    </NavbarButton>
+      </NavbarButton>
+    </Link>
   );
 }