Header Component

The main navigation component for ClawPlate applications. Provides responsive navigation with mobile menu, language switching, and user authentication states.

Overview

The Header component is a fixed navigation bar that includes:

• Brand logo and title
• Desktop navigation menu
• Mobile hamburger menu
• Language switcher
• User authentication state
• Responsive design with backdrop blur

Preview

Basic Usage

<template>
  <div>
    <Header />
    <main class="pt-16">
      <!-- Your page content -->
      <!-- pt-16 accounts for fixed header height -->
    </main>
  </div>
</template>

Features

🔗 Navigation Links

• Internationalized navigation links
• Smooth scrolling to page sections
• Active state management
• Hover animations

📱 Mobile Responsive

• Collapsible mobile menu
• Touch-friendly interactions
• Animated transitions
• Backdrop blur effects

🌍 Language Support

• Built-in language switcher
• Uses Nuxt i18n for translations
• Persistent language preference

🔐 Authentication Integration

• User state awareness via Supabase
• Conditional rendering based on auth state
• Direct dashboard access for logged-in users

Component API

Props

This component doesn't accept any props. All configuration is handled internally through composables and global state.

Events

No custom events are emitted from this component.

Slots

No slots are available. The navigation structure is predefined.

Composables Used

useSupabaseUser()

Manages user authentication state and provides user information.

const user = useSupabaseUser()
// Returns reactive user object or null

useLocalePath()

Provides localized route paths for internationalization.

const localePath = useLocalePath()
// Usage: localePath('/dashboard') -> '/en/dashboard'

ref() - Vue Reactivity

Manages component reactive state.

const isFeaturesOpen = ref(false)
const isMobileMenuOpen = ref(false)

Styling

Tailwind Classes

The component uses utility classes for styling:

• fixed top-0 left-0 w-full - Fixed positioning
• bg-gray-50 backdrop-blur-md - Background with blur effect
• z-[100] - High z-index for overlay
• border-b - Bottom border

Dark Mode Support

Includes dark mode variants:

• dark:bg-gray-900 - Dark background
• dark:text-gray-50 - Dark text color
• dark:border-gray-50 - Dark borders

Mobile Menu

The mobile menu features:

Animation

Uses Vue transitions for smooth open/close animations:

<Transition
  enter-active-class="transition-all duration-300 ease-out"
  enter-from-class="opacity-0 -translate-y-2"
  enter-to-class="opacity-100 translate-y-0"
  leave-active-class="transition-all duration-200 ease-in"
  leave-from-class="opacity-100 translate-y-0"
  leave-to-class="opacity-0 -translate-y-2"
>

Functionality

• Toggle button with icon change
• Auto-close on navigation
• Touch-friendly navigation links

Internationalization

Navigation links use i18n translation keys:

{{ $t('navigation.title_1') }}
{{ $t('navigation.title_2') }}
<!-- etc. -->

Configure your translation files in /i18n/locales/:

{
  "navigation": {
    "title_1": "Services",
    "title_2": "Projects", 
    "title_3": "Pricing",
    "title_4": "Team",
    "title_5": "Contact"
  }
}

Customization

Brand Logo

Update the icon and brand name:

<Icon name="game-icons:monster-grasp" class="w-6 h-6" />
<span class="text-2xl font-bold">Clawplate</span>

Navigation Items

Modify the navigation structure in the template:

<NuxtLink :to="localePath('/#services')">
  {{ $t('navigation.title_1') }}
</NuxtLink>

Styling

Override default styles by modifying Tailwind classes or adding custom CSS.

Accessibility

The component includes accessibility features:

• Semantic HTML navigation structure
• Keyboard navigation support
• ARIA labels for screen readers
• Focus management for mobile menu

Dependencies

• Nuxt Icons - For UI icons
• Nuxt i18n - For internationalization
• Supabase - For user authentication
• Tailwind CSS - For styling

Related Components

• SwitchLanguage - Language switcher
• Footer - Site footer