ts-sidemenu v1.0.7

ts-sidemenu

Package to render sidebar(side menu)

Installation

ts-sidemenu

ts sidemenu is available as an npm package.

npm:

npm i ts-sidemenu

yarn:

yarn add ts-sidemenu

Getting started with ts Sidemenu

Example

import React, { useState } from "react";
import Sidebar from "ts-sidemenu/dist/Sidebar";
import FavoriteIcon from "@mui/icons-material/Favorite";
import sidelogo from "../src/logo2.png";
import Home from "./Home";
import About from "./About";

function App() {
  const [activeTab, setActiveTab] = React.useState(0);

  const myTabs = [
    {
      title: "Home",

      index: 0,

      icon: <FavoriteIcon />,

      component: <Home />,
    },

    {
      title: "About",

      index: 1,

      icon: <FavoriteIcon />,

      component: <About />,
    },
  ];

  const logo = {
    title: "logo",
    icon: sidelogo,
  };

  const profileLogo = {
    title: "logo",
    icon: sidelogo,
  };

  const tabStyles = {
    activeIconColor: "yellow",
    activeIndicatorColor: "yellow",
    scrollButtonColor: "green",
    menusBackgroundColor: "white",
  };
  const handleLogoClick = (e) => {
    console.log(e);
  };

  const handleProfileLogoClick = (e) => {
    console.log(e);
  };

  return (
    <>
      <Sidebar
        tabs={myTabs}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        tabStyles={tabStyles}
        logo={logo}
        profileLogo={profileLogo}
        handleLogoClick={handleLogoClick}
        handleProfileLogoClick={handleLogoClick}
      />
    </>
  );
}

export default App;

tabs must be a list of Object in a array with index (Unique Id for optimum rendering), title (Title to be displayed for menu), component (Component that should be mapped to the menu) and icon (icon that should be mapped to the menu).

tabStyles must be a list of Object with activeIconColor (Color code or color name) activeIndicatorColor (Color code or color name) scrollButtonColor (Color code or color name) menusBackgroundColor (Color for menus background)

logo must be a list of Object with title (title for logo) icon (imported image or icon)

profileLogo must be a list of Object with title (title for logo) icon (imported image or icon)

activeTab & setActiveTab is the react state which holds the default tab number, which also allows you to update the tab number whenever requried.

handleLogoClick, handleProfileLogoClick are handler function for onclick of logo and profileLogo

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.