administrator/clinica-veterinaria-formiginese
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aggiorna menu della clinica

Browse Source
This commit is contained in:
allebonvi
2026-04-20 15:13:43 +02:00
parent c73efb7680
commit b9a5d7f36f
1 changed files with 97 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
clinica-app/client/src/components/Navbar.tsx
View File

@@ -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) => (
<div key={link.label} className="relative group py-7">
<a
key={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" }}
>
{link.label}
{link.children && (
<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) => (
<div key={link.label} className="border-b border-gray-50 pb-2">
<a
key={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)}
>
{link.label}
{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