Sidemenu

The SideMenu is a component for displaying a vertical menu with a collapsible menu.

Preview

Usage

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

function App() {

  return (
    <>
      <Sidemenu></Sidemenu>
    </>
  )
}

export default App

Customization With Props

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

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

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

  • logoName -> Accepts a string/node value, used inside sidemenu as heading.

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

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

  • userNavToggleStyle -> Accepts the class name(s) as string, custom styling prop for container for toggling sidemenu checkbox.

  • userNavHeaderStyle -> Accepts the class name(s) as string, custom styling prop for container containing title and arrow.

  • userNavTitleStyle -> Accepts the class name(s) as string, custom styling prop for the logo name.

  • userNavContentStyle -> Accepts the class name(s) as string, custom styling prop for the container containing the sidemenu item list.

  • userNavButtonStyle -> Accepts class name(s) as string, custom styling prop for the container containing each sidemenu item.

import { Sidemenu } from "react-hartan"

function App() {

  return (
    <>
      <Sidemenu></Sidemenu>
    </>
  )
}

export default App

Component Code

This is the code for the Popup component.

import sidemenuStyle from "./Sidemenu.module.css"
import PropTypes from "prop-types"

const list = [
    {
        logo: <a><img src="https://dummyimage.com/50x50" /></a>,
        elem: <a>Home</a>,
    },
    {
        logo: <a><img src="https://dummyimage.com/50x50" /></a>,
        elem: <a>About</a>,
    },
    {
        logo: <a><img src="https://dummyimage.com/50x50" /></a>,
        elem: <a>Contact</a>,
    },
    {
        logo: <a><img src="https://dummyimage.com/50x50" /></a>,
        elem: <a>Services</a>,
    },
];

export default function Sidemenu({ navList = list, logoName = "Hartan", id, userNavbarStyle, userNavToggleStyle, userNavHeaderStyle, userNavTitleStyle, userNavContentStyle, userNavButtonStyle }) {

    return (
        <div className={`${sidemenuStyle.navBar} ${userNavbarStyle}`}>
            <input id="navToggle" className={`${sidemenuStyle.navToggle} ${userNavToggleStyle}`} type="checkbox" />
            <div className={`${sidemenuStyle.navHeader} ${userNavHeaderStyle}`}>
                <span id={`${sidemenuStyle.navTitle}`} className={`${sidemenuStyle.navTitle} ${userNavTitleStyle}`}>{logoName}</span>
                <label htmlFor="navToggle" className={`${sidemenuStyle.lableTag}`}>
                    <span>&lt;</span>
                </label>
            </div>
            <div className={`${sidemenuStyle.navContent} ${userNavContentStyle}`}>
                {
                    navList.map((item, id) => {
                        return (
                            <div className={`${sidemenuStyle.navButton} ${userNavButtonStyle}`} key={id}>
                                {item.logo}
                                <span> {item.elem}</span>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

Sidemenu.propTypes = {
    navList: PropTypes.arrayOf(PropTypes.shape(
        {
            logo: PropTypes.node,
            elem: PropTypes.node
        }
    )),
    logoName: PropTypes.node,
    id: PropTypes.string,
    userNavbarStyle: PropTypes.string,
    userNavToggleStyle: PropTypes.string,
    userNavHeaderStyle: PropTypes.string,
    userNavTitleStyle: PropTypes.string,
    userNavContentStyle: PropTypes.string,
    userNavButtonStyle: PropTypes.string
};
PreviousPopupNextSnippet

Last updated