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 ​

This component does not accept props. It uses composables to access data and state.

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
  • Search class applied for styling
  • Closes search bar when profile menu opens

Notifications ​

  • Notification component with announcement icon
  • Only shown for authenticated, non-backend users
  • 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