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.

Default

import { Navbar } from "react-hartan"

function App() {

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

export default App

With Custom Props

// App.css

.my-class{
   font-size: 2rem;
   background-color: red;
   padding: 1rem;
}

.bg-red{
   padding: 2rem;
   background-color: red;
}

.bg-pink{
   background-color: pink;
}

 
// App.jsx
import { Navbar } from "react-hartan"

function App() {

const imgSrc = "/hartan.png";

  return (
    <>
  <Navbar userNavListStyle={"my-class"} userNavListItemStyle={"bg-pink"}   userSideBarStyle={"bg-pink"} logoImgSrc={imgSrc}></Navbar>
    </>
  )
}

export default App

Component Code

This is the code for the Navbar component.

Navbar.jsx

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
};

Navbar.module.css

/* Navbar CSS Module */

/* Header styles */
.headerStyle {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2rem 0;
    background-color: #f5f5f5;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/* All Button styles  */
button {
    outline: none;
    border: none;
    background: transparent;
}

/* Open Menu Button Style */
.openMenuBtn {
    display: none;
    cursor: pointer;
}

/* Open & close button of navbar */
.navButtonSvgColor {
    fill: #000000;
}

/* Close Menu Button Style */
.closeMenuBtn {
    display: none;
    cursor: pointer;
}

/* Hartan Logo Styling */
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.logo img {
    height: 3rem;
    border-radius: 50%;
}

.logo span {
    font-size: 1.75rem;
    font-weight: 600;
}

/* NavLinks Style */
nav ul {
    text-decoration: none;
    list-style: none;
    display: flex;
    gap: 2rem;
}

nav ul li {
    cursor: pointer;
    font-size: 1.75rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul li a {
    text-decoration: none;
    color: black;
}

nav ul li:hover {
    color: #1e90ff;
    border-bottom: 0.2rem solid #1e90ff;
}

/* Responsive Design */
@media (max-width: 1024px) {

    .navbar {
        display: none;
    }

    .openMenuBtn {
        display: block;
    }

    .closeMenuBtn {
        display: block;
        margin-left: 1rem;
    }

    /* Sidebar styles */
    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgb(245, 245, 245);
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
        min-height: 100vh;
        padding: 3rem 1rem;
        width: 25%;

    }

    .sidebar ul {
        flex-direction: column;
        padding: 3rem 0 0 3rem;
        align-items: start;
    }

    .sidebar ul li:hover {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 50%;
    }
}