Appearance

Core Header Component ​

File Information ​

  • Path: components/theme/global/CoreHeader.vue
  • Purpose: Simple header component for basic page headers
  • Type: Global Theme Component

Overview ​

The Core Header component provides a minimal header structure for pages that need a simple header without the full Collage Header functionality. It's a lightweight alternative to the Collage Header.

Key Features ​

  1. Simple Structure

    • Minimal header markup
    • Basic styling
    • Workspace context support

  2. Workspace Integration

    • Uses currentWorkspace mixin
    • Access to workspace data

Props ​

This component does not accept props.

Mixins Used ​

currentWorkspace ​

Provides workspace management functionality:

  • Workspace ID access
  • Workspace data
  • Workspace switching

Template Structure ​

vue
<template>
  <header class="header bg-gray">
  </header>
</template>

Styling ​

Uses CSS classes:

  • .header - Main header container
  • .bg-gray - Gray background

Usage Examples ​

Basic Usage ​

vue
<template>
  <CoreHeader />
</template>

<script>
import CoreHeader from '~/components/theme/global/CoreHeader.vue'

export default {
  components: {
    CoreHeader
  }
}
</script>

In Page ​

vue
<template>
  <div>
    <CoreHeader />
    <div class="content">
      <!-- Page content -->
    </div>
  </div>
</template>

Integration Points ​

  • Pages: Used in pages requiring simple headers
  • Current Workspace Mixin: Provides workspace context
  • Layouts: Can be used in custom layouts

Notes for Development ​

  • Minimal component with basic structure
  • Can be extended with additional content
  • Uses workspace mixin for context
  • Lightweight alternative to CollageHeader