npm package: @licuido-ui/ui_header
Description: Headers are compositions that extend standard navbar functionalities.
Latest version: 0.0.4

# Header

Headers are compositions that extend standard navbar functionalities.

### Author

- @author Hariharan <hariharan@crayond.co>

## Link

[Story Book Link Header](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_header
```

## Import component

```jsx
import { Header } from '@licuido-ui/ui_header';
```

## Usage

```jsx
<Header headerComponentList={[]} subHeaderComponentList={[]} />
```

## Image

![alt text](./header.png)

## Sample Code

```jsx
<Layout
  appBarProps={{}}
  appBarStyle={{}}
  toolBarStyle={{}}
  toolBarProps={{}}
  mobileMenuIconStyle={{}}
  subHeaderStyle={{}}
  headerComponentList={
    [
      {
        order: 1,
        component: <>Logo</>,
        style: {},
        mobileScreenActive: true,
      },
      {
        order: 2,
        component: <>Profile</>,
        style: {},
      },
      {
        order: 3,
        component: <>Menu</>,
        style: {},
      },
    ]
  }
  subHeaderComponentList={
    [
      {
        order: 1,
        component: <>Secondary Logo</>,
        style: {},
        mobileScreenActive: true,
      },
      {
        order: 3,
        component: <>Secondary Profile</>,
        style: {},
      },
      {
        order: 2,
        component: <>Secondary Menu</>,
        style: {},
      },
    ]
  }
/>
```

## Props

| **Name**                  | **Description**                                                                                                                                                                                                                                                                                                                 | **Default** | **Control**                |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------- |
| **id**                    | string                                                                                                                                                                                                                                                                                                                          | string      | string                     |
| **headerComponentList\*** | order: number: component: React\.ReactNode: style?: SxProps; mobileScreenActive?: boolean;menuList\[\]                                                                                                                                                                                                                          | \-          | [ ]                        | \- | subHeaderComponentList : \[0 : \{\.\.\.\} 4 keys1 : \{\.\.\.\} 3 keys2 : \{\.\.\.\} 3 keys\] |
| **appBarProps**           | \{ classes?: Partial&lt;AppBarClasses&gt;; color?: "primary" \| "secondary" \| "inherit" \| "default" \| "transparent"; enableColorOnDark?: boolean; position?: "fixed" \| "absolute" \| "sticky" \| "static" \| "relative"; sx?: SxProps&lt;\.\.\.&gt;; \} &amp; Omit&lt;\.\.\.&gt; &amp; CommonProps &amp; Omit&lt;\.\.\.&gt; | \-          | appBarProps : \{\}         |
| **appBarStyle**           | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                                             | \-          | appBarStyle : \{\}         |
| **toolBarStyle**          | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                                             | \-          | toolBarStyle : \{\}        |
| **toolBarProps**          | \{ children?: ReactNode; classes?: Partial&lt;ToolbarClasses&gt;; disableGutters?: boolean; variant?: "dense" \| "regular"; sx?: SxProps&lt;Theme&gt;; \} &amp; CommonProps &amp; Omit&lt;\.\.\.&gt;                                                                                                                            | \-          | toolBarProps : \{\}        |
| **mobileMenuIconStyle**   | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                                             | \-          | mobileMenuIconStyle : \{\} |
| **subHeaderStyle**        | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                                             | \-          | subHeaderStyle : \{\}      |
| **className**             | string                                                                                                                                                                                                                                                                                                                          | \-          | Set string                 |
| **sx**                    | SxProps&lt;Theme&gt;                                                                                                                                                                                                                                                                                                            | \-          | Set object                 |