Installation

npm install noyan-layout

yarn add noyan-layout

Available Props in Header component

| | Props | Types | Default | | | :-: | :----------- | :------------------------------------------------------------ | :-------- | :------: | | 1 | user | User, null, undefined | undefined | Optional | | 2 | profileItems | Array<{ title: string; icon?: string; onClick?: () => void }> | -------- | Optional | | 3 | onProfile | function | -------- | Optional | | 4 | onLogout | function | -------- | Optional | | 5 | onLegalLogin | function | -------- | Required | | 6 | onRealLogin | function | -------- | Required |

• user is undefined, this means the login button is in loading mode.

• user is null, show login button.

• if user exist, open dropdown and show user firstName and user lastName and logout button.

Simple Usage

// Add this in the component you want to use
import { NoyanHeader, NoyanFooter } from "noyan-layout";
import "noyan-layout/dist/style.css";

import MessageIcon from "/images/message.png";

const App = () => {
    return (
        <>
            <NoyanHeader
                user={null} // optional
                profileItems={[{ title: "آیتم مورد نظر", icon: MessageIcon, onClick: "your function" }]} // optional
                onLegalLogin={() => console.log("legal")} // required
                onRealLogin={() => console.log("real")} // required
                onProfile={() => console.log("click profile")} // optional
                onLogout={() => console.log("click logout")} // optional
            />

            <NoyanFooter />
        </>
    );
};