HeaderBar Component

A React re-usable Naviagtion Bar component






View on NPM »

About

HeaderBar component is a react re-usable react component for the top navigation bar of a website. HeaderBar component accepts some props through which we can customize & dynamic navigation bar for a website.

Invite People modal component interact with the application, but without jumping to a new page and interrupting the user's workflow.

Usage

Storybook

Dependencies

Install react fontawsome using the following command:

``
npm i --save @fortawesome/fontawesome-svg-core

npm install --save @fortawesome/free-regular-svg-icons
`

Setup

1. Install the HeaderBar component.

`
npm install hc-nav-bar --save
`

2. Import the HeaderBar.

`javascript
import HeaderBar from "hc-nav-bar";
`

3. Mount the HeaderBar component on the DOM

`javascript
ReactDOM.render(, document.getElementById("root"));
`

4. Run the App

`
npm start
`

Setup for running the development version

1. Open the index.js file & Uncomment the "Development code" part & comment on the "Production Code" part.

2. Run npm start.

Command for running the test cases

`shell
npm test -- --coverage
``

Props of HeaderBar component

| Props | Type | Description |
| ------------------- | -------- | ------------------------------------------------------------------------------------------------------ |
| isHeaderSticky | boolean | Set the header sticky |
| domainName | string | Domain Name of your website like cankart, boxkit, xyz, etc |
| globalQuery | string | Value of Global search bar |
| profileImageSrc | string | Image source link of profile image |
| statusColor | string | Color which indicates the status of the profile where status can be online, offline, away, etc |
| isGlobalSearchAllow | boolean | Enable the global search bar for searching the whole website |
| isSettingsBtnAllow | boolean | Enable the dedicated settings button |
| pageName | string | Name of the current page |
| allowPageHeader | boolean | Toogle the Page Header's display of HeaderBar component |
| onGlobalQueryChange | function | Function for handling the search query. It provides the value of the globalQuery through its parameter |