Appearance

useHeader Composable ​

File Information ​

  • Path: app/composables/core/components/useHeader.ts
  • Purpose: Header component logic, workspace switching, and user menu
  • Type: Core Component Composable

Overview ​

The useHeader composable provides logic for the main application header component. It handles workspace switching, user menu, brand logo, and header state management.

Features ​

  • Workspace Switching: Switch between accessible workspaces
  • User Menu: User profile menu with workspace list
  • Brand Logo: Brand logo and name display
  • Content Loading: Loading state management
  • Avatar Management: User avatar with key for reactivity

Return Type ​

typescript
{
  logo: ComputedRef<string | null>
  brandName: ComputedRef<string>
  contentLoading: Ref<boolean>
  user: ComputedRef<User>
  authInstanceId: ComputedRef<string>
  accessibleWorkspaces: ComputedRef<Workspace[]>
  avatarKey: Ref<number>
  closeSearchBar: () => void
  changeWorkspace: (workspace: Workspace) => Promise<void>
  getBrandName: () => string
  logoutApp: () => Promise<void>
}

Key Functions ​

changeWorkspace(workspace) ​

Switches to a different workspace. Handles domain and non-domain workspace switching.

typescript
const { changeWorkspace } = useHeader()
await changeWorkspace(workspace)

closeSearchBar() ​

Closes the search bar by emitting a close event.

typescript
const { closeSearchBar } = useHeader()
closeSearchBar()

logoutApp() ​

Logs out the current user.

typescript
const { logoutApp } = useHeader()
await logoutApp()

Usage Example ​

typescript
import { useHeader } from '~/composables/core/components/useHeader'

const {
  logo,
  brandName,
  user,
  accessibleWorkspaces,
  changeWorkspace,
  logoutApp
} = useHeader()

// Switch workspace
const handleWorkspaceChange = async (workspace: Workspace) => {
  await changeWorkspace(workspace)
}

Dependencies ​

  • useAuthStore() - Authentication store
  • useAppDataStore() - App data store
  • useWorkspaceApi() - Workspace API
  • useHelpers() - Helper functions