Navbar Link Activation

src/components/navbar-links.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from 'react'
+import { Button } from './ui/button'
+import Link from 'next/link'
+import { Home } from 'lucide-react'
+import { usePathname } from 'next/navigation';
+
+function NavbarLinks() {
+  const pathname = usePathname()
+  return (    
+    <><Button asChild {...(pathname === '/' ? { variant: 'rounded' } : { variant: 'ghost' })}>
+      <Link href="/">
+        <Home className="size-4" />
+        <span>Home</span>
+      </Link>
+    </Button>
+    <Button asChild {...(pathname === '/lobby' ? { variant: 'rounded' } : { variant: 'ghost' })}>
+        <Link href="/lobby">Lobbies</Link>
+      </Button>
+      <Button asChild {...(pathname === '/games' ? { variant: 'rounded' } : { variant: 'ghost' })}>
+        <Link href="/games">Games</Link>
+        </Button>
+      </>
+  )
+}
+
+export default NavbarLinks

src/components/navbar.tsx

@@ -4,36 +4,25 @@ import Avatar from "./avatar";
 import { Button } from "./ui/button";
 import Link from "next/link";
 import { Home } from "lucide-react";
+import NavbarLinks from "./navbar-links";
 
 async function Navbar() {
   const session = await auth();
+
   return (
     <nav className="absolute top-0 left-0 flex h-max w-full items-center justify-center p-4">
       <div className="bg-background flex w-max items-center gap-2 rounded-full border-2">
+        <NavbarLinks />
+        {/* Login Button or Profile Avatar */}
         {session ? (
-          <Link href="/me">
+          <Link href={`/profile/${session.user.id}`}>
             <Avatar src={session.user.image!} fb={session.user.name!} />
           </Link>
         ) : (
-          <Button asChild>
+          <Button asChild variant={"rounded"} className="bg-red-800">
             <Link href="/api/auth/signin">Sign In</Link>
           </Button>
         )}
-        <Button asChild variant="ghost">
-          <Link href="/lobby">Lobbies</Link>
-        </Button>
-        <Button asChild variant="ghost">
-          <Link href="/games">Games</Link>
-        </Button>
-        <Button asChild variant="ghost">
-          <Link href="/me/friend">Friends</Link>
-        </Button>
-        <Button asChild className="rounded-full">
-          <Link href="/">
-            <Home className="size-4" />
-            <span>Home</span>
-          </Link>
-        </Button>
       </div>
     </nav>
   );

src/components/ui/button.tsx

@@ -11,6 +11,8 @@ const buttonVariants = cva(
       variant: {
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        rounded:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 rounded-full",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
@@ -18,7 +20,7 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 rounded-full",
         link: "text-primary underline-offset-4 hover:underline",
         party:
           "bg-primary text-primary-foreground rounded-xl border-b-4 shadow-lg text-lg font-bold hover:translate-y-1 hover:border-b-2 ",