## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/restaurant-header.json ``` ## Usage ```tsx import RestaurantHeader from "@/components/ui/layout/restaurant-header"; export function App() { return ( console.log("Sign in clicked")} onLogoClick={() => console.log("Logo clicked")} /> ); } ``` ## Features - **Sticky positioning** - Stays at the top when scrolling - **Responsive design** - Works on mobile and desktop - **Logo display** - Shows restaurant logo with proper sizing - **Store branding** - Displays restaurant name and tagline - **Authentication** - Sign in/Sign up button - **Interactive elements** - Clickable logo and buttons - **Accessibility** - Screen reader friendly with proper ARIA labels ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `storeName` | `string` | `"Sakura & Stone"` | Restaurant name | | `logoUrl` | `string` | `"/images/logos/sakura-stone-logo.png"` | Logo image URL | | `onSignIn` | `() => void` | - | Sign in button click handler | | `onLogoClick` | `() => void` | - | Logo click handler | ## Examples ### Basic Usage ```tsx ``` ### Custom Restaurant ```tsx openSignInModal()} onLogoClick={() => navigateToHome()} /> ``` ### With Navigation ```tsx function AppLayout() { const handleSignIn = () => { // Open sign in modal or navigate to sign in page router.push('/auth/signin') } const handleLogoClick = () => { // Navigate to homepage router.push('/') } return (

{/* Your page content */}

) } ``` ## Styling The component uses Tailwind CSS classes and can be customized: - **Sticky header** - Uses `sticky top-0 z-50` - **Backdrop blur** - Modern glass morphism effect - **Border bottom** - Subtle separation from content - **Container spacing** - Responsive padding and max-width ## Accessibility - Uses semantic `

` element - Includes `sr-only` h1 for screen readers - Proper ARIA labels for interactive elements - Keyboard navigation support - Focus management ## Related Components - [Mobile Navigation](/docs/components/navigation/mobile-nav) - For mobile menu - [User Menu](/docs/components/navigation/user-menu) - For authenticated users - [Store Selector](/docs/components/navigation/store-selector) - For multi-location brands

Restaurant Header