Header

Import

import Header from "@components/Layout/Header";
import HeaderPrepend from "@components/Layout/Header/HeaderPrepend";
import HeaderAppend from "@components/Layout/Header/HeaderAppend";

Header Type

Onomis dashboard comes with two types of headers: sticky and static.

The sticky header remains visible and fixed as the user scrolls down a webpage.

The default value of header.type in the app.config.js is set to 'sticky'. Additionally, we've created a changeHeaderTypeaction in src/store/headerSlice, allowing you to change the value dynamically.

// Redux Imports
import { useDispatch, useSelector } from "react-redux"

// Actions
import {HeaderType, changeHeaderType} from "@/store/headerSlice"

// Custom Components Imports
import EBtn from "@components/Elements/EBtn"

export const HeaderTypeToggler = () => {
    // Hooks
    const dispatch = useDispatch()
    
    // This is how you get the current headerType value
    const headerType = useSelector(HeaderType);
    
    const toggleHeaderType = () => {
        // @possible-values: sticky, static
    }
        if(headerType === 'sticky') dispatch(changeHeaderType("static"))
        else dispatch(changeHeaderType("sticky"))
    }
    
    return (
        <EBtn onClick={toggleHeaderType}>
            Tap to change the header type!
        </EBtn>
    )
}

Note

We also auto store the header-type in local storage for later usage.

Props

For Header component, the following props are available:

Prop	Type	Default	Note
className	String	-	Overrides or extends the component's styles.
hamburgerMenu	Boolean	true	Displays hamburger menu.
hamburgerIcon	Object	-	Specify custom icon for hamburger menu, More Info about icons here.

Children

The Header component provides a children props that enable you to customize the content.

Children	Description
HeaderPrepend	Adds contents at the start of the header.
HeaderAppend	Adds contents at the end of the header.