Aggiorna menu della clinica

clinica-app/client/src/components/Navbar.tsx

@@ -5,11 +5,47 @@
  */
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Menu, X, Phone, MapPin } from "lucide-react";
+import { ChevronDown, Menu, X, Phone, MapPin } from "lucide-react";
 
-const navLinks = [
+type NavLink = {
+  label: string;
+  href: string;
+  children?: Array<{
+    label: string;
+    href: string;
+  }>;
+};
+
+const navLinks: NavLink[] = [
   { label: "Chi Siamo", href: "#chi-siamo" },
-  { label: "Servizi", href: "#servizi" },
+  {
+    label: "Servizi",
+    href: "#servizi",
+    children: [
+      { label: "Visite cliniche e medicina preventiva", href: "#servizi" },
+      { label: "Ecografia", href: "#servizi" },
+      { label: "Radiologia", href: "#servizi" },
+      { label: "Laboratorio", href: "#servizi" },
+      { label: "Ematologia", href: "#servizi" },
+      { label: "Biochimica", href: "#servizi" },
+      { label: "Urine", href: "#servizi" },
+      { label: "Citologia", href: "#servizi" },
+      { label: "Coagulazione", href: "#servizi" },
+      { label: "Endoscopia", href: "#servizi" },
+      { label: "Laparoscopia", href: "#servizi" },
+    ],
+  },
+  {
+    label: "Visite Specialistiche",
+    href: "#servizi",
+    children: [
+      { label: "Oncologia", href: "#servizi" },
+      { label: "Dermatologia", href: "#servizi" },
+      { label: "Oculistica", href: "#servizi" },
+      { label: "Nutrizione", href: "#servizi" },
+      { label: "Ortopedia", href: "#servizi" },
+    ],
+  },
   { label: "Il Team", href: "#team" },
   { label: "News", href: "#news" },
   { label: "Contatti", href: "#contatti" },
@@ -84,17 +120,41 @@ export default function Navbar() {
           </a>
 
           {/* Desktop menu */}
-          <div className="hidden md:flex items-center gap-8">
+          <div className="hidden md:flex items-center gap-6">
             {navLinks.map((link) => (
-              <a
+              <div key={link.label} className="relative group py-7">
-                key={link.href}
+                <a
-                href={link.href}
+                  href={link.href}
-                className="text-[#1B4F72] font-medium text-sm hover:text-[#4ECDC4] transition-colors duration-200 relative group"
+                  className="text-[#1B4F72] font-medium text-sm hover:text-[#4ECDC4] transition-colors duration-200 relative inline-flex items-center gap-1.5"
-                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-              >
+                >
-                {link.label}
+                  {link.label}
-                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#4ECDC4] transition-all duration-300 group-hover:w-full" />
+                  {link.children && (
-              </a>
+                    <ChevronDown
+                      size={14}
+                      className="transition-transform duration-200 group-hover:rotate-180"
+                    />
+                  )}
+                  <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-[#4ECDC4] transition-all duration-300 group-hover:w-full" />
+                </a>
+
+                {link.children && (
+                  <div className="absolute left-0 top-full w-72 rounded-2xl border border-gray-100 bg-white/95 p-3 shadow-xl backdrop-blur-md opacity-0 invisible translate-y-2 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 transition-all duration-200">
+                    <div className="grid gap-1">
+                      {link.children.map((child) => (
+                        <a
+                          key={child.label}
+                          href={child.href}
+                          className="rounded-xl px-3 py-2 text-sm text-[#1B4F72]/80 hover:bg-[#F5F0E8] hover:text-[#1B4F72] transition-colors"
+                          style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                        >
+                          {child.label}
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
             ))}
           </div>
 
@@ -131,14 +191,30 @@ export default function Navbar() {
         {mobileOpen && (
           <div className="md:hidden bg-white border-t border-gray-100 px-4 py-4 flex flex-col gap-4 shadow-lg">
             {navLinks.map((link) => (
-              <a
+              <div key={link.label} className="border-b border-gray-50 pb-2">
-                key={link.href}
+                <a
-                href={link.href}
+                  href={link.href}
-                className="text-[#1B4F72] font-medium py-2 border-b border-gray-50 hover:text-[#4ECDC4] transition-colors"
+                  className="text-[#1B4F72] font-medium py-2 hover:text-[#4ECDC4] transition-colors flex items-center justify-between"
-                onClick={() => setMobileOpen(false)}
+                  onClick={() => setMobileOpen(false)}
-              >
+                >
-                {link.label}
+                  {link.label}
-              </a>
+                  {link.children && <ChevronDown size={15} className="text-[#4ECDC4]" />}
+                </a>
+                {link.children && (
+                  <div className="grid gap-1 pl-3 pt-1">
+                    {link.children.map((child) => (
+                      <a
+                        key={child.label}
+                        href={child.href}
+                        className="rounded-lg px-3 py-1.5 text-sm text-[#1B4F72]/70 hover:bg-[#F5F0E8] hover:text-[#1B4F72] transition-colors"
+                        onClick={() => setMobileOpen(false)}
+                      >
+                        {child.label}
+                      </a>
+                    ))}
+                  </div>
+                )}
+              </div>
             ))}
             <div className="flex flex-col gap-2 pt-2">
               <Button