digital-dojo-sidebar v1.0.3

Digital-dojo-sidebar

This is the sidebar with curves for the digital dojo company

Installation

Install digital-dojo-sidebar with npm

  npm install digital-dojo-sidebar 

Or using yarn

  yarn add digital-dojo-sidebar 

API Reference

The items to run

Consists of 3 parts : navItems and footer items and navLists and should be in the same order together

Nav items and Footer items props:

Nav List:

example: "/path1","/path2"

Other Props:

Usage/Example

  navItems = [
    {
      name: `Item 1`, // Random name
      path: `/path1`, // Random path
      icon: (props) => <SubItemIcon {...props} />,
      subItems: [], // Empty array for subItems
      id: "fdsfdsg", // Random id
    },
    {
      name: `Item 2`, // Random name
      path: `/path2`, // Random path
      icon: (props) => <SubItemIcon {...props} />,
      subItems: [], // Empty array for subItems
      id: "tyuktmtk", // Random id
    },
    {
      name: `Item 3`, // Random name
      path: `/path3`, // Random path
      icon: (props) => <SubItemIcon {...props} />,
      subItems: [
        {
          name: "Test 1",
          path: "test/test1",
          icon: SubItemIcon,
        },
        {
          name: "Test 2",
          path: "test/test2",
          icon: SubItemIcon,
        },
        {
          name: "Test 3",
          path: "test/test3",
          icon: SubItemIcon,
        },
      ],
      id: "luiolui;", // Random id
    },
  ]

navList = ["/path1", "/path2", "/path3"]

import { SidebarLayout } from "digital-dojo-sidebar/dist";

function App() {
    return (
    <div className="h-screen">
      <LogoutDialog />
      <SidebarLayout
        open={true}
        navItems={translatedNavItems}
        navList={navList}
        FooterItems={translatedFooterItems as any}
        path={path || "/"}
        params={param}
        id={(id as string) || ""}
        collapsed={collapsed}
        expanded={expanded}
        broken={broken}
        toggled={toggled}
        setBroken={(e: boolean) => {
          dispatch(setBroken(e));
        }}
        setExpanded={(e: boolean) => {
          dispatch(setExpanded(e));
        }}
        setOpen={(e: any) => {
          dispatch(setOpen(e));
        }}
        setToggled={(e: boolean) => {
          dispatch(setToggled(e));
        }}
        theme="light"
        rtl={rtl}
        handleLogout={() => {
          dispatch(setLogoutDialog(true));
        }}
        handleRouteChange={(path: string) => {
          router.push(path);
        }}
        sidebarHeader={<SidebarHeader />}
        menuItemStyles={menuItemStyles}
        themes={themes}
      />
    </div>
  );
}