react-dynamic-sidenavbar v1.0.5

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