Navbar

A navigation bar (or navigation system) is a section of a graphical user interface intended to aid visitors in accessing information.

Preview

Usage

The navbar uses a custom hook useSidebar for the side menu on mobile devices.

npm i react-hartan
import { Navbar } from "react-hartan"

function App() {

  return (
    <>
      <Navbar></Navbar>
    </>
  )
}

export default App

Customization With Props

  • navList -> Accepts an array, where each element is an object of the structure:

{
    elem: <></>, // element
}

// By default it is an HTML <a></a> element with no attributes specified.

// This prop will be helpful in case you want to add <Link></Link> or <NavLink></NavLink> component from react-router and if you want anchor only you will still need to specify the attributes like href (basically declare the full element and pass it).

NOTE: Keep the name of the keys same as above.

  • statesObj -> Used to show/hide various parts of Navbar, accepts an object of the structure:

{
    logo: {
        full: true, // boolean
        img: true, // boolean
        name: true, // boolean
    },
    buttonState: true, // boolean
}

// above are default values for this object and can be changed

NOTE: Keep the keys of the object same as above.

  • onClickFunction -> Accepts a function, written by the user, for handling on Click logic on button.

  • buttonText -> Accepts a string/node value, used as the button name.

  • logoImgSrc -> Accepts a string value, the image source link used as logo in Navbar.

  • logoName -> Accepts a string/node value, used as the text beside the logo image.

  • id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

  • imgLoad -> The imgLoad prop is mapped to the loading attribute in HTML img tag. It allows to provide overall the value for loading attribute, "lazy" | "eager".

  • userHeaderStyle -> Accepts the class name(s) as string, custom styling prop for the full navbar container.

  • userNavListStyle -> Accepts the class name(s) as string, custom styling prop for container for list items shown.

  • userNavListItemStyle -> Accepts the class name(s) as string, custom styling prop for each list item inside the list container.

  • userLogoStyle -> Accepts the class name(s) as string, custom styling prop for the container having the logo image and logo text.

  • userSideBarStyle -> Accepts the class name(s) as string, custom styling prop for the sidebar shown only on mobile devices.

  • userButtonStyle -> Accepts the class names(s) as string, custom styling prop for the button.

  • userNavButtonSvgColor -> Accepts class name as string, mainly the fill color property to change the color of menu button shown on mobile devices.

import { Navbar } from "react-hartan"

function App() {

  return (
    <>
      <Navbar></Navbar>
    </>
  )
}

export default App

Component Code

This is the code for the Navbar component.

import navbarStyles from "./Navbar.module.css"
import useSidebar from "../../Hooks/Sidebar"
import Button from "../Button/Button"
import PropTypes from "prop-types"


const list = [
    {
        elem: <a>Home</a>,
    },
    {
        elem: <a>About</a>,
    },
    {
        elem: <a>Contact</a>,
    },
    {
        elem: <a>Services</a>,
    }
];

const states = {
    logo: {
        full: true,
        img: true,
        name: true,
    },
    buttonState: true,
};

export default function Navbar({ navList = list, statesObj = states, onClickFunction, buttonText = "Light / Dark", logoImgSrc = "https://dummyimage.com/374x416", logoName = "Hartan", id, imgLoad, userHeaderStyle, userSideBarStyle, userNavListStyle, userNavListItemStyle, userLogoStyle, userButtonStyle, userNavButtonSvgColor }) {

    const [sidebarStatus, openSidebar, closeSidebar] = useSidebar(false);

    return (
        <header className={`${navbarStyles.headerStyle} ${userHeaderStyle}`}>
            <button className={`${navbarStyles.openMenuBtn} `} onClick={openSidebar}>
                <svg xmlns="http://www.w3.org/2000/svg" height="20" width="17.5" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" className={`${navbarStyles.navButtonSvgColor} ${userNavButtonSvgColor}`} /></svg>
            </button>

            {
                statesObj.logo.full && (
                    <div className={`${navbarStyles.logo} ${userLogoStyle}`}>
                        {statesObj.logo.img && <img src={logoImgSrc} alt="hartan-logo" loading={imgLoad}/>}
                        {statesObj.logo.name && <span>{logoName}</span>}
                    </div>
                )
            }


            {
                sidebarStatus ?
                    (
                        <nav className={`${navbarStyles.sidebar} ${userSideBarStyle}`}>
                            <button className={navbarStyles.closeMenuBtn} onClick={closeSidebar}>
                                <svg xmlns="http://www.w3.org/2000/svg" height="20" width="15" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" className={`${navbarStyles.navButtonSvgColor} ${userNavButtonSvgColor}`} /></svg>
                            </button>
                            <ul>
                                {
                                    navList?.map((listItem, id) => {
                                        return <li key={id} onClick={closeSidebar} className={`${userNavListItemStyle}`}>
                                            {
                                                listItem.elem
                                            }
                                        </li>
                                    })
                                }
                            </ul>
                        </nav>
                    ) : (
                        <nav className={`${navbarStyles.navbar} ${userNavListStyle}`}>
                            <ul>
                                {
                                    navList?.map((listItem, id) => {
                                        return <li key={id} className={`${userNavListItemStyle}`}>
                                            {
                                                listItem.elem
                                            }
                                        </li>
                                    })
                                }
                            </ul>
                        </nav>
                    )
            }

            {
                statesObj.buttonState &&
                <Button userButtonStyle={`${userButtonStyle}`} buttonText={buttonText} onClickFunction={onClickFunction}></Button>
            }
        </header>
    )
}


Navbar.propTypes = {
    navList: PropTypes.arrayOf(PropTypes.shape({
        elem: PropTypes.element
    })),
    logoImgSrc: PropTypes.string,
    logoName: PropTypes.node,
    buttonText: PropTypes.node,
    onClickFunction: PropTypes.func,
    statesObj: PropTypes.shape({
        logo: PropTypes.shape({
            full: PropTypes.bool,
            img: PropTypes.bool,
            name: PropTypes.bool
        }),
        buttonState: PropTypes.bool
    }),
    id: PropTypes.string,
    userHeaderStyle: PropTypes.string,
    userSideBarStyle: PropTypes.string,
    userNavListStyle: PropTypes.string,
    userNavListItemStyle: PropTypes.string,
    userLogoStyle: PropTypes.string,
    userButtonStyle: PropTypes.string,
    userNavButtonSvgColor: PropTypes.string
};
PreviousHeroNextPopup

Last updated