React Drawer Component

A flexible and customizable React drawer component for creating slide-out menus with ease.

Installation

You can install the react-drawercomponent package using npm or yarn:

npm install react-drawercomponent
# or
yarn add react-drawercomponent

usage

Import the Drawer component and use it within your React application:

import React from "react";
import Drawer from "react-drawercomponent";

//btnIcon is optional
import HomeIcon from "@mui/icons-material/Home";

// ...

function App() {
  // Define your button data, styles, and slide direction
  const btnsData = [
    { btnIcon: HomeIcon, btnText: "Home", btnLink: "/" },
    { btnIcon: "", btnText: "About", btnLink: "/about" },
    // Add more buttons as needed
  ];

  const drawerContainerStyles = {
    // Define your container styles here
    /**
     * eg:
     * width: "300px",
     * height: "100vh",
     * backgroundColor: "#fff",
     * position: "fixed",
     * @media (max-width: 768px) {
     *  width: "100vw",
     * height: "300px",
     * }
     */
  };

  const drawerBtnStyles = {
    // Define your button styles here
    /**
     * eg:
     * backgroundColor: "#fff",
     * color: "#000",
     * fontSize: "1.5rem",
     * padding: "1rem",
     * margin: "1rem",
     * border: "none",
     * borderRadius: "5px",
     * cursor: "pointer",
     * @media (max-width: 768px) {
     *  width: "100vw",
     * height: "300px",
     * }
     */
  };

  return (
    <div>
      {/* Your other components */}
      <Drawer
        btnsData={btnsData}
        drawerContainerStyles={drawerContainerStyles}
        drawerBtnStyles={drawerBtnStyles}
        slideDirection="left" // You can specify 'left' || 'right` || `top` || `bottom'
      />
      {/* Your other components */}
    </div>
  );
}

export default App;