Hc-inbox-navigation 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

Install the HeaderBar component.

npm install hc-nav-bar --save

Import the HeaderBar.

import HeaderBar from "hc-nav-bar";

Mount the HeaderBar component on the DOM

ReactDOM.render(<HeaderBar />, document.getElementById("root"));

Run the App

npm start

Setup for running the development version

Open the index.js file & Uncomment the "Development code" part & comment on the "Production Code" part.
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