init

components/nav.tsx

@@ -1,14 +1,8 @@
 import Link from "next/link";
-import { Activity, Dumbbell, LayoutDashboard, Settings } from "lucide-react";
 import { auth, signOut } from "@/auth";
+import { NavLinks } from "./nav-links";
 import { SignOutButton } from "./sign-out-button";
-
-const links = [
-  { href: "/", label: "Panel", icon: LayoutDashboard },
-  { href: "/running", label: "Bieganie", icon: Activity },
-  { href: "/strength", label: "Siłownia", icon: Dumbbell },
-  { href: "/settings", label: "Ustawienia", icon: Settings },
-];
+import { Wordmark } from "./wordmark";
 
 export async function Nav() {
   const session = await auth();
@@ -19,33 +13,21 @@ export async function Nav() {
   };
 
   return (
-    <header className="border-b border-muted/40 bg-surface">
+    <header className="sticky top-0 z-50 border-b border-white/10 bg-surface/70 backdrop-blur-xl">
       <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3 sm:px-6">
-        <Link href="/" className="flex items-center gap-3 text-lg font-bold text-fg">
+        <Link href="/" className="flex items-center gap-2.5 text-lg font-bold text-fg">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
-            src="/logo-icon.svg"
-            alt=""
-            width={72}
-            height={72}
-            className="-mt-1 -mb-6 h-[72px] w-[72px] rounded-2xl shadow-lg ring-2 ring-surface"
+            src="/logo-bars.svg"
+            alt="KNUR.APP"
+            width={51}
+            height={48}
+            className="h-7 w-auto sm:h-8"
           />
-          <span className="hidden text-2xl tracking-tight text-white [font-family:var(--font-space-grotesk)] sm:block">
-            <span className="font-bold [-webkit-text-stroke:0.7px_white]">KNUR</span>
-            <span className="font-medium text-accent">.APP</span>
-          </span>
+          <Wordmark className="hidden text-2xl sm:block" />
         </Link>
         <nav className="flex items-center gap-1 sm:gap-2">
-          {links.map(({ href, label, icon: Icon }) => (
-            <Link
-              key={href}
-              href={href}
-              className="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium text-fg/80 transition-colors hover:bg-bg hover:text-accent sm:px-3"
-            >
-              <Icon size={16} />
-              <span className="hidden sm:inline">{label}</span>
-            </Link>
-          ))}
+          <NavLinks />
           {session?.user?.name && (
             <span className="hidden px-2 text-xs text-fg/40 sm:inline">
               {session.user.name}