Header navigation

The header component (app/components/header/MainHeader.vue) includes navigation, logo, language/theme switchers, and user menu.

Navigation structure

Navigation items are defined in the navigationItems array with support for nested children:

const navigationItems = [
  {
    label: 'Dashboard',
    icon: Home,
    to: '/app/dashboard',
    requiresAuth: true,
  },
  {
    label: 'AI',
    icon: Sparkles,
    to: '/ai',
    requiresAuth: true,
  },
  {
    label: 'Templates',       // Item with navigation submenu
    icon: LayoutTemplate,
    requiresAuth: true,
    children: [               // Children array creates submenu
      {
        label: 'Examples',
        icon: Drill,
        to: '/examples',
        requiresAuth: true,
      },
      {
        label: 'Landing',
        icon: Origami,
        to: '/samples',
        requiresAuth: true,
      },
      {
        label: 'Pricing',
        icon: HandCoins,
        to: '/pricing',
      },
    ],
  },
  {
    label: 'Blog',
    icon: Newspaper,
    to: '/blog',
  },
]

Item properties:

• label - Menu text
• icon - Lucide icon component
• to - Route path (optional for items with children)
• requiresAuth - Controls header visibility only - hides item from unauthenticated users (optional)
• children - Array of child items for submenu (optional)

Adding menu items

Simple link:

import { Settings } from 'lucide-vue-next'

const navigationItems = [
  // ... existing items
  {
    label: 'Settings',
    icon: Settings,
    to: '/app/settings',
    requiresAuth: true,
  },
]

Navigation menu with children:

import { FolderOpen, FileText, Image } from 'lucide-vue-next'

const navigationItems = [
  // ... existing items
  {
    label: 'Resources',
    icon: FolderOpen,
    children: [
      { label: 'Docs', icon: FileText, to: '/docs' },
      { label: 'Media', icon: Image, to: '/media' },
    ],
  },
]

Removing/reordering items

Simply edit the array - remove, comment out, or reorder items as needed:

const navigationItems = [
  { label: 'Blog', icon: Newspaper, to: '/blog' },      // Moved to first
  // { label: 'AI', icon: Sparkles, to: '/ai' },        // Commented out
  { label: 'Dashboard', icon: Home, to: '/app/dashboard' }, // Reordered
]

How it works

Desktop: Items with children use the NavigationMenu component from shadcn-nuxt
Mobile: Items with children display as Collapsible sections in the Sheet drawer

Authentication filtering: Items with requiresAuth: true are automatically hidden from the header when users aren't logged in. This applies to both parent items and their children. However, this only controls UI visibility - users can still access these routes directly if you haven't protected them with middleware.

Sticky header: The header has sticky positioning and a backdrop blur effect.

What's included

The header (app/components/header/MainHeader.vue) contains:

• Navigation items - Edit the navigationItems array to customize.
• Logo - Links to /app/dashboard when authenticated, / otherwise (configured in logoTo).
• Mobile menu button - Hamburger icon on small screens, opens Sheet drawer from right.
• Language switcher - LanguageSwitcher.vue component (i18n support).
• Theme switcher - ThemeSwitcher.vue component (dark/light mode toggle).
• User menu - Dropdown with user actions, only visible when authenticated.

To customize: Edit MainHeader.vue directly for layout changes, or modify child components for specific features.

Reference

• Lucide icons browser - Find icons to use
• Nuxt Link - Router link component