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.

import HeaderBar from "hc-nav-bar";

3. Mount the HeaderBar component on the DOM

ReactDOM.render(<HeaderBar />, 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

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 | | organizationname | string | Name of the Organization | | organizationId | string | id of organization |