From ca168b6d0c582f0d049375ab63563a3ea759ccb7 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 11 Feb 2026 18:53:44 +0100
Subject: [PATCH] A more featured navbar

---
 src/app/globals.css              |  2 +-
 src/components/layout/Navbar.tsx | 44 +++++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 7e80476..307df89 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,7 +48,7 @@
 }
 
 :root {
-  --radius: 0.325rem;
+  --radius: 0.425rem;
 
   /* Base surfaces */
   --background: oklch(0.13 0.01 260);          /* deep charcoal */
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 44e6f0b..b61d6e1 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -1,5 +1,12 @@
 import Link from "next/link";
 import { Button } from "../ui/button";
+import {
+  BellIcon,
+  ChevronDownIcon,
+  StarIcon,
+  UserIcon,
+  WalletIcon,
+} from "lucide-react";
 
 const links = [
   {
@@ -25,7 +32,7 @@ export default function Navbar() {
             <li key={l.path}>
               <Link
                 href={l.path}
-                className="px-3 py-2 rounded-sm hover:bg-primary/20 hover:text-primary transition-colors duration-300"
+                className="px-3 py-2 rounded-lg hover:bg-primary/20 hover:text-primary transition-colors duration-300"
               >
                 {l.name}
               </Link>
@@ -33,6 +40,41 @@ export default function Navbar() {
           ))}
         </ul>
       </div>
+      <div className="ml-auto flex gap-4">
+        <Button
+          variant="outline"
+          className="rounded-full bg-card p-2! aspect-square"
+        >
+          <StarIcon />
+        </Button>
+        <Button
+          variant="outline"
+          className="rounded-full bg-card p-2! aspect-square"
+        >
+          <BellIcon />
+        </Button>
+      </div>
+      <div className="flex gap-4">
+        <Button
+          variant="outline"
+          className="rounded-full bg-card p-2! aspect-square group"
+        >
+          <div className="flex gap-1 items-center h-full">
+            <WalletIcon />
+            3.13
+            <span className="w-[1.5px] h-full ml-1 mr-1 bg-border group-hover:bg-accent-foreground animate-colors duration-300" />
+            $248
+            <ChevronDownIcon />
+          </div>
+        </Button>
+
+        <Button
+          variant="outline"
+          className="rounded-full bg-card p-2! aspect-square"
+        >
+          <UserIcon />
+        </Button>
+      </div>
     </nav>
   );
 }