feat: render CMS-driven public redesign

src/components/Navbar.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react";
 import { useMemo } from "react";
+import Image from "next/image";
 import { LayoutDashboard, LogOut, RotateCcw, UserRound } from "lucide-react";
 import { Link, NavLink } from "@/lib/router";
 import { useAuth } from "@/contexts/AuthContext";
@@ -18,16 +19,17 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
+import type { SiteContent } from "@/lib/content-cms";
 
 const NavItem = ({ to, children }: { to: string; children: ReactNode }) => (
   <NavLink
     to={to}
     className={({ isActive }) =>
       cn(
-        "rounded-full px-3 py-2 text-sm font-medium transition-colors",
+        "rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         isActive
-          ? "bg-primary text-primary-foreground"
-          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          ? "bg-secondary text-primary"
+          : "text-muted-foreground hover:bg-secondary hover:text-foreground",
       )
     }
   >
@@ -115,34 +117,42 @@ function ProfileAvatarMenu() {
   );
 }
 
-export default function Navbar() {
+export default function Navbar({ siteContent }: { siteContent: SiteContent }) {
   const { isAuthenticated } = useAuth();
 
   return (
     <nav
-      className="sticky top-0 z-40 border-b bg-background/75 backdrop-blur-xl supports-[backdrop-filter]:bg-background/55"
+      aria-label="ناوبری اصلی"
+      className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/85"
       dir="rtl"
     >
-      <div className="container mx-auto px-4 py-3">
-        <div className="flex items-center justify-between gap-4">
-          <Link to="/" className="flex min-w-0 items-center gap-3">
-            <div className="hidden rounded-2xl sm:flex">
-              <img src="/favicon.ico" alt="لوگوی انجمن" className="h-10 w-10 object-contain" />
+      <div className="container mx-auto px-4 py-2">
+        <div className="flex min-h-14 items-center justify-between gap-4">
+          <Link to="/" className="flex min-w-0 items-center gap-3 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <div className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-brand-wash p-1.5">
+              <Image
+                src={siteContent.logo?.url || "/favicon.ico"}
+                alt={siteContent.logo?.alt || siteContent.short_name || "لوگوی انجمن"}
+                width={44}
+                height={44}
+                unoptimized
+                className="h-full w-full object-contain"
+              />
             </div>
             <div className="min-w-0 text-right">
               <p className="truncate text-sm font-semibold text-foreground sm:text-base">
-                انجمن علمی مهندسی کامپیوتر
+                {siteContent.short_name || siteContent.official_name}
               </p>
               <p className="hidden text-xs text-muted-foreground sm:block">
-                دانشکده‌ی فنی و مهندسی شرق گیلان
+                {siteContent.faculty_subline}
               </p>
             </div>
           </Link>
 
-          <div className="hidden items-center gap-2 md:flex">
-            <NavItem to="/">خانه</NavItem>
-            <NavItem to="/blog">بلاگ</NavItem>
-            <NavItem to="/events">رویدادها</NavItem>
+          <div className="hidden items-center gap-1 md:flex">
+            <NavItem to="/">{siteContent.navigation.home}</NavItem>
+            <NavItem to="/events">{siteContent.navigation.events}</NavItem>
+            <NavItem to="/blog">{siteContent.navigation.blog}</NavItem>
             <ModeToggle />
             {isAuthenticated ? <NotificationsBell /> : null}
             <ProfileAvatarMenu />