From 3fb06c523d61719a2e183b22dac313457194baf7 Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk <palid@phoelid.me>
Date: Wed, 29 Jan 2025 21:02:12 +0100
Subject: [PATCH] feat: beautify nav

---
 src/components/mobile-nav.tsx | 11 ++++++++---
 src/components/nav.tsx        | 10 ++++++----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 1553e6f..b5cdaf1 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -2,15 +2,18 @@
 
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
-import type { translations } from "@/i18n/translations"
+import type { Sections, translations } from "@/i18n/translations"
+import { cn } from "@/lib/utils"
 import { Menu } from "lucide-react"
 
 export function MobileNav({
   t,
   linksOrder,
+  activeSection
 }: {
   t: typeof translations.pl
-  linksOrder: Array<keyof (typeof translations.pl)["nav"]>
+  linksOrder: Array<Sections>
+  activeSection: Sections
 }) {
   return (
     <Sheet>
@@ -26,7 +29,9 @@ export function MobileNav({
         </SheetHeader>
         <nav className="flex flex-col gap-4 mt-8">
           {linksOrder.map((value) => (
-            <a key={value} href={`#${value}`} className="text-lg hover:text-primary transition-colors">
+            <a key={value} href={`#${value}`} className={cn("text-lg hover:text-primary transition-colors", {
+              'text-primary': activeSection === value
+            })}>
               {t.nav[value]}
             </a>
           ))}
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index bf4c092..1808893 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -80,7 +80,7 @@ export function Nav({
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
           <a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
-            CEBULACAMP
+            {t.siteTitle}
           </a>
           <div className="flex items-center">
             {/* Desktop Navigation */}
@@ -89,12 +89,14 @@ export function Nav({
                 <a
                   key={value}
                   href={`#${value}`}
-                  className={cn("text-sm hover:text-primary transition-colors relative group", {
+                  className={cn("text-sm md:text-md hover:text-primary transition-colors relative group", {
                     'text-primary': activeSection === value
                   })}
                 >
                   {t.nav[value]}
-                  <span className="absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform" />
+                  <span className={cn("absolute inset-x-0 -bottom-1 h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform", {
+                    'scale-x-100': activeSection === value
+                  })} />
                 </a>
               ))}
             </div>
@@ -111,7 +113,7 @@ export function Nav({
 
             {/* Mobile Navigation */}
             <div className="md:hidden ml-2">
-              <MobileNav t={t} linksOrder={linksOrder} />
+              <MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />
             </div>
           </div>
         </div>