react-custom-sidebar

React Custom Sidebar

React Custom Sidebar is a fully customizable sidebar component for React.

• Can be used a docked or over content.
• Docked version has open and close state.
• Fully customizabe light and dark theme option.
• User profile section.
• Dedicated logout button
• Auto adjusted on mobile devices to 'Over content' mode
• Custom styles supported

Screenshots

desktop view

desktop view menu closed

mobile view menu opened

light theme

Installation

npm install react-custom-sidebar

Getting started

import { Sidebar } from "react-custom-sidebar";

const themeColors = {
  light: {
    bgColor: "#e4e4e6",
    textColor: "#0f0f1f",
    highlights: "#cfcfcf",
  },
  dark: {
    bgColor: "#0f0f1f",
    textColor: "#ffffff",
    highlights: "#21213d",
  },
};

function App() {
  // sidebar toggle status
  const [isMenuOpen, setIsMenuOpened] = useState(false);

  // menu list
  const menuItems = [
    {
      title: "Home",
      link: "/",
      icon: <FontAwesomeIcon icon={faHome} />,
    },
    {
      title: "Mails",
      link: "/mails",
      icon: <FontAwesomeIcon icon={faEnvelope} />,
    },
    {
      title: "Services",
      link: "/services",
      icon: <FontAwesomeIcon icon={faList} />,
    },
    {
      title: "Contacts",
      link: "/contacts",
      icon: <FontAwesomeIcon icon={faContactCard} />,
    },
  ];

  // logout click handler
  const handleLogout = () => {
    console.log("logout clicked");
  };

  return (
    <div className="App">
      <BrowserRouter>
        <Sidebar
          menuItems={menuItems}
          theme="light"
          logoUrl="add logo url here"
          logoSmallUrl="add small logo url here which will be visible in closed state"
          themeColors={defaultThemeColors}
          showLogout={true}
          handleLogout={handleLogout}
          userDetails={{
            name: "User name",
            description: "designation",
            avatar: "add user avatart url here",
          }}
          closeOnLinkClick={false}
          closeOnOutsideClick={false}
          isSidebarOpened={isMenuOpen}
          handleSidebarToggle={setIsMenuOpened}
          showToggleButton={true}
        >
          // main content here
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="mails" element={<Mails />} />
            <Route path="contacts" element={<Contacts />} />
            <Route path="services" element={<Services />} />
          </Routes>
        </Sidebar>
      </BrowserRouter>
    </div>
  );
}

export default App;

Supported props

Property name	Type	Default	Description
docked	boolean	true for desktop/tablet and false for mobiles	If the sidebar is docked with main content or float over it
menuItems	array of objects	Empty array	The list of menu items to be rendered
logoUrl	string	NULL	Logo url
logoSmallUrl	string	NULL	Small Logo for closed state, only visible if showToggleButton is false url
theme	string	dark	light/dark
themeColors	object	default colors	Theme colors
showLogout	boolean	false	To show/hide logout button
handleLogout	function	NULL	Logout button click listener
userDetails	object	NULL	User details to be shown in sidebar.
closeOnLinkClick	boolean	false	To close the sidebar on menu item click
closeOnOutsideClick	boolean	false	To close the sidebar on outside click on docked state or mobile view
isSidebarOpened	boolean	true	If the sidebar should be open
showToggleButton	boolean	true	If hamburger menu icon visible
handleSidebarToggle	function	n/a	Callback called when the sidebar status changed from hamburger menu icon
showTooltipOnClose	boolean	true	If tooltip visible in closed state.
styles	object	empty object	Custom styles.

Default theme colors

{
  light: {
    bgColor: "#e4e4e6", // sidebar background color
    textColor: "#0f0f1f", // text color
    highlights: "#cfcfcf", // bg color of active/hover link item
  },
  dark: {
    bgColor: "#0f0f1f",
    textColor: "#ffffff",
    highlights: "#21213d",
  },
}

Menu items

[
    {
        title: "Home",
        link: "/home",
        icon: "" //  component or img,
    },
    ...
]

userDetails

{
    name: "",
    description: "",
    avatar: ""
}

Styles

Custom styles can be passed as an object with these keys:

{
    sidebar : { /* for main container */},
    logoContainer: {/* for logo container */},
    logo: { /* for logo icon */},
    logoSmall: { /* for small logo icon */},
    toggleIcon: { /* for hamburger menu icon */},
    menuItem: { /* for menu logo and text container */},
    menuItemIcon: { /* for menu item logo */},
    menuItemText: { /* for menu item text */},
    userContainer: { /* for  user details container */},
    username: { /* for username text */},
    avatar: { /* for user avatar */},
    userDescription: { /* for user description text */},
    logout: { /* for logout icon */},
    mainContentContainer: { /* for main content outside the sidebar */}
}