@gewaer/gw-header NPM

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).