Appearance

Header Component ​

File Information ​

  • Path: app/components/global/Header.vue
  • Purpose: Main application header with brand logo, search bar, notifications, user menu, and workspace switching
  • Type: Global Component

Overview ​

The Header component is the main application header that appears at the top of every page. It includes brand logo, search functionality, notifications, user profile menu, and workspace switching capabilities.

Features ​

  • Brand Logo: Displays brand logo image or brand name text
  • Search Bar: Integrated SearchBar component for asset search
  • Notifications: Notification component with announcement support
  • User Profile: User avatar with profile menu
  • Workspace Switching: Switch between accessible workspaces
  • User Menu: Account, support, and logout options
  • Loading States: Skeleton loaders during initial content load
  • Responsive: Adapts to mobile and desktop screens

Props ​

PropTypeDefaultEffect
hideSearchbooleanfalseWhen true, <SearchBar> is not rendered (v-if="!hideSearch") and .headerRight gets justify-end so notifications and the avatar stay right-aligned.

Added in ee26b58 / c5704db for the error-auth layout, which passes hideSearch = route.name !== "brand_name-search". collage-layout does not pass it, so the search bar shows everywhere else.

Composables Used ​

  • useHeader() - Header logic and state management
  • useSearchBar() - Search bar state and functionality
  • useCollageSidebar() - Sidebar state (mini mode)

Key Functionality ​

  • Displays brand logo image if available
  • Falls back to brand name text if no logo
  • Skeleton loader during loading
  • Integrated SearchBar component, hidden when hideSearch is true
  • Search class applied for styling
  • Closes search bar when profile menu opens

Notifications ​

  • Notification component with announcement icon
  • Not rendered when user.email is [email protected] (public portal visitor)
  • Badge indicator for unread announcements

User Profile Menu ​

  • User avatar with profile image or initials
  • Tooltip showing user name
  • Dropdown menu with:
    • Workspace list with active indicator
    • My Account link
    • Support link
    • Logout option

Workspace Switching ​

  • Lists all accessible workspaces
  • Shows checkmark for active workspace
  • Click to switch workspace

Usage Example ​

vue
<template>
  <Header />
</template>

<script setup lang="ts">
// Header is auto-imported in Nuxt
// No explicit import needed
</script>

Styling ​

Uses global SCSS classes:

  • .collage-header - Main header container
  • .brandLogo - Brand logo container
  • .headerRight - Right side container
  • .profileImage - User avatar
  • .user-avatar - Avatar with initials