| import React from 'react'; |
| import { Link, useLocation } from 'react-router-dom'; |
| import { Zap } from 'lucide-react'; |
| import { Button } from "@/components/ui/button"; |
| import { APP_NAME, APP_TAGLINE } from '@/lib/branding'; |
|
|
| const MENU_ITEMS = [ |
| { label: 'Campaigns', href: '/' }, |
| { label: 'Contacts', href: '/contacts' }, |
| { label: 'Leads', href: '/leads' }, |
| { label: 'Deals', href: '/deals' }, |
| ]; |
|
|
| function pathMatches(locationPath, href) { |
| if (href === '/') return locationPath === '/'; |
| return locationPath === href || locationPath.startsWith(`${href}/`); |
| } |
|
|
| export default function AppHeader({ rightContent }) { |
| const location = useLocation(); |
|
|
| return ( |
| <header className="border-b border-slate-100 bg-white/80 backdrop-blur-sm sticky top-0 z-50"> |
| <div className="mx-auto w-full max-w-none px-4 sm:px-5 md:px-6 lg:px-8 xl:px-10 2xl:px-12 py-4"> |
| <div className="flex items-center justify-between gap-4"> |
| <div className="flex items-center gap-6"> |
| <div className="flex items-center gap-3"> |
| <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center shadow-lg shadow-violet-200"> |
| <Zap className="h-5 w-5 text-white" /> |
| </div> |
| <div> |
| <h1 className="font-bold text-slate-800 text-lg">{APP_NAME}</h1> |
| <p className="text-xs text-slate-500">{APP_TAGLINE}</p> |
| </div> |
| </div> |
| <nav className="hidden md:flex items-center gap-2"> |
| {MENU_ITEMS.map((item) => { |
| const isActive = pathMatches(location.pathname, item.href); |
| return ( |
| <Button |
| key={item.href} |
| asChild |
| variant={isActive ? "default" : "ghost"} |
| size="sm" |
| className={isActive ? "bg-violet-600 hover:bg-violet-700" : "text-slate-600"} |
| > |
| <Link to={item.href}>{item.label}</Link> |
| </Button> |
| ); |
| })} |
| </nav> |
| </div> |
| <div className="flex items-center gap-2"> |
| {rightContent} |
| </div> |
| </div> |
| <nav className="md:hidden flex items-center gap-2 mt-3"> |
| {MENU_ITEMS.map((item) => { |
| const isActive = pathMatches(location.pathname, item.href); |
| return ( |
| <Button |
| key={item.href} |
| asChild |
| variant={isActive ? "default" : "outline"} |
| size="sm" |
| className={isActive ? "bg-violet-600 hover:bg-violet-700" : ""} |
| > |
| <Link to={item.href}>{item.label}</Link> |
| </Button> |
| ); |
| })} |
| </nav> |
| </div> |
| </header> |
| ); |
| } |
|
|
