Gewaer Header Component

Gewaer Header Component comprises the header part for the Gewaer Frontend Kanvas application.

Usage

npm install @gewaer/gw-header --save

Documentation

Here is an implementation example of the component:

<app-header
    :apps-list="appsList"
    :companies-list="companiesList"
    :company-branch-data="companyBranchData"
    :company-data="companyData"
    :notifications-count="notificationsCount"
    :show-notifications="showNotifications"
    :show-sidebar="showSidebar"
    :sidebar-state="sidebarState"
    :user-data="userData"
    @handle-sidebar="handleSidebar(!showSidebar)"
    @toggle-notifications="toggleNotifications"
    @selected-company="switchCompany"
/>

import GwHeader from "@gewaer/gw-header";

export default {
    name: "MyLayout",
    components: {
        GwHeader
    }
}

Customize

This package also provides exports for the inner components, in case you want to fancy your own header while still using some of what's already here.

import { GwAppSwitcher, GwCompaniesSwitcher, GwNotifications } from "@gewaer/gw-header";

export default {
    name: "MyHeader",
    components: {
        GwAppSwitcher,
        GwCompaniesSwitcher,
        GwNotifications
    }
}

Props

apps-list

• type: Array

• default: [] (empty array)

• usage:

  Define a list of apps that the current user has access to.

company-branch-data

• type: Object

• default: none

• required: true

• usage:

  Company branch data in which the user is currently working in.

company-data

• type: Object

• default: none

• required: true

• usage:

  Company data in which the user is currently working in.

companies-list

• type: Array

• default: [] (empty array)

• usage:

  List of companies to which the user can access. Feeds the Companies Switcher component.

notifications-count

• type: Number

• default: none

• required: true

• usage:

  Show the count for new unread notifications for the current user.

show-notifications

• type: Boolean

• default: true

• usage:

  Show or hide the notifications bell. Remember: this will render the user unable to open the notifictions panel.

sidebar-state

• type: String

• default: hover

• usage:

  Controls the user interaction with the sidebar. It allows the sidebar to remain visible (opened) or to show when the user moves the mouse over it (hover).

user-data

• type: Object

• default: none

• required: true

• usage:

  Data for the currently logged in user.

License

Gewaer Header Component is open-sourced software licensed under the MIT license.