React Dynamic Side Navbar

React Dynamic Side Navbar provides components for creating responsive, dynamic multi level dropdown and search facility with many more features.

Installation

yarn

yarn add react-dynamic-sidenavbar

npm

npm install react-dynamic-sidenavbar

Live Preview

• Demo

Screenshot

Usage

Essential Import

import React, { useState } from "react";
import NavBarComponent from "react-dynamic-sidenavbar";

const [openNav, setOpenNav] = useState(false);
const expandableTime = ".5s";

Dummy Data (kindly follow data carefully)

const data = [
  {
    id: 1, // id will increase in next object
    icon: <MdOutlineFastfood />,
    isHovering: false,
    visible: false,
    name: "Router Link Example",
    sub: [
      {
        isHovering: false, // no change
        visible: false, // no change
        name: "Blogs", // drop down text
        sub: [], // if any sub dropdown available, place the object here, its explain in next object, follow
        link: "/blogs", // to link
      },
      {
        isHovering: false,
        visible: false,
        name: "Contact",
        sub: [],
        link: "/contact",
      },
    ],
  },
  {
    id: 2,
    icon: <MdOutlineFastfood />,
    isHovering: false,
    visible: false,
    name: "Cuisine",
    sub: [
      {
        isHovering: false,
        visible: false,
        name: "Indian",
        sub: [
          {
            isHovering: false,
            visible: false,
            name: "Fast food",
            sub: [
              {
                isHovering: false,
                visible: false,
                name: "Chole Bhature",
                sub: [],
              },
              {
                isHovering: false,
                visible: false,
                name: "Samosas (Deep-Fried Potato/Veggie Dumpling)",
                sub: [],
              },
              {
                isHovering: false,
                visible: false,
                name: "Pav Bhaji",
                sub: [],
              },
              { isHovering: false, visible: false, name: "Pakora", sub: [] },
              { isHovering: false, visible: false, name: "Pasta", sub: [] },
            ],
          },
          {
            visible: false,
            name: "Main Course",
            sub: [
              {
                visible: false,
                name: "Chicken Makhani (Butter Chicken)",
                sub: [],
              },
              {
                visible: false,
                name: "Chana masala",
                sub: [],
              },
              {
                visible: false,
                name: "Aloo Gobi (Potato and Cauliflower)",
                sub: [],
              },
              {
                visible: false,
                name: "Naan (Flatbread)",
                sub: [],
              },
              {
                visible: false,
                name: "Matar Paneer (Peas and Cooked Cottage Cheese)",
                sub: [],
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 3,
    icon: <MdOutlineFastfood />,
    isHovering: false,
    visible: false,
    name: "Cuisine1",
    sub: [
      {
        isHovering: false,
        visible: false,
        name: "Indian",
        sub: [
          {
            isHovering: false,
            visible: false,
            name: "Fast food",
            sub: [
              {
                isHovering: false,
                visible: false,
                name: "Chole Bhature",
                sub: [],
              },
              {
                isHovering: false,
                visible: false,
                name: "Samosas (Deep-Fried Potato/Veggie Dumpling)",
                sub: [],
              },
              {
                isHovering: false,
                visible: false,
                name: "Pav Bhaji",
                sub: [],
              },
              { isHovering: false, visible: false, name: "Pakora", sub: [] },
              { isHovering: false, visible: false, name: "Pasta", sub: [] },
            ],
          },
          {
            visible: false,
            name: "Main Course",
            sub: [
              {
                visible: false,
                name: "Chicken Makhani (Butter Chicken)",
                sub: [],
              },
              {
                visible: false,
                name: "Chana masala",
                sub: [],
              },
              {
                visible: false,
                name: "Aloo Gobi (Potato and Cauliflower)",
                sub: [],
              },
              {
                visible: false,
                name: "Naan (Flatbread)",
                sub: [],
              },
              {
                visible: false,
                name: "Matar Paneer (Peas and Cooked Cottage Cheese)",
                sub: [],
              },
            ],
          },
        ],
      },
    ],
  },
];

Main Component

<NavBarComponent
  navbarType="slide_page" // For Slide The Main Page Content to The Right
  navbarType="fixed_page" // Open the Sidebar Navigation Over a Part of the Content
  header="normal" // to set default symbol
  header="logo" // to set logo
  logo={logo} // import image as your choice if `header="logo"`
  dropDownList={data} // * essential for multichild dropdown
  isOpenNav={setOpenNav} // from state
  openNav={openNav} // from state
  backgroundColor="#0d6efd"
  backgroundOpacity={0.9}
  itemColor="#d3d7db"
  hoverItemColor="white"
  expandIconColor="white"
  expandIconDeviderColor="white"
  searchIconColor="white"
  expandableTime={expandableTime}
  searchHighlightBackgroundColor="#eb0808"
/>

Shortcut keys

ctrl + alt + o --- to open
ctrl + alt + c --- to minimize

~~~ Example Usage ~~~

★ For Slide The Main Page Content to The Right

<div
  style={{
    display: "flex",
    width: "100vw",
    height: "100vh",
  }}
>
  <NavBarComponent
    navbarType="slide_page"
    header="logo"
    logo={logo}
    dropDownList={data}
    isOpenNav={setOpenNav}
    openNav={openNav}
    backgroundColor="#0d6efd"
    backgroundOpacity={0.9}
    itemColor="#d3d7db"
    hoverItemColor="white"
    expandIconColor="white"
    expandIconDeviderColor="white"
    searchIconColor="white"
    expandableTime={expandableTime}
    searchHighlightBackgroundColor="#eb0808"
  />
  <div
    className={openNav ? "openSidenavWidth1" : "closeSidenavWidth1"}
    style={
      openNav
        ? {
            width: "100%",
            padding: "5px 10px",
            transition: expandableTime,
          }
        : {
            width: "100%",
            padding: "5px 10px",
            transition: expandableTime,
          }
    }
  >
    \\ ............. your code .............. \\
  </div>
</div>

Essential css

.openSidenavWidth1 {
  width: calc(100vw - 150px) !important;
}

.closeSidenavWidth1 {
  width: calc(100vw - 30px) !important;
}

@media (min-width: 575px) {
  .openSidenavWidth1 {
    width: calc(100vw - 200px) !important;
  }
}

@media (min-width: 767px) {
  .openSidenavWidth1 {
    width: calc(100vw - 300px) !important;
  }

  .closeSidenavWidth1 {
    width: calc(100vw - 40px) !important;
  }
}

★ Open the Sidebar Navigation Over a Part of the Content

<div
  style={{
    width: "100%",
    height: "100vh",
  }}
>
  <NavBarComponent
    navbarType="fixed_page"
    header="normal"
    dropDownList={data}
    isOpenNav={setOpenNav}
    openNav={openNav}
    backgroundColor="black"
    backgroundOpacity={1}
    itemColor="#d3d7db"
    hoverItemColor="red"
    expandIconColor="red"
    expandIconDeviderColor="red"
    searchIconColor="white"
    expandableTime={expandableTime}
    searchHighlightBackgroundColor="#eb0808"
  />
  <div style={{ width: "100%", padding: "5px 10px", zIndex: 1 }}>
    \\ ............. your code .............. \\
  </div>
</div>

License

ISC © Sayan Pandab