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:

Parameter	Type	Description
name	string	Required
path	string	Optional
icon	string	Required
suffix	string	Optional
subItems	string	Optional
id	string	Optional
action	string	Optional

Nav List:

Parameter	Type	Description
paths	Array of strings	Required. Id of item to fetch

example: ["/path1","/path2"]

Other Props:

Parameter	Type	Description
expanded	boolean	Optional Default false
collapsed	boolean	Optional Default false
toggled	boolean	Optional Default false
broken	boolean	Optional Default false
rtl	boolean	Optional Default false
theme	string	Optional light or dark
open	boolean	Optional Default true
navItems	NavItem[]	Required
navList	string[]	Required
setOpen()	(e:boolean)=>any	Optional
setToggled()	(e:boolean)=>any	Optional
setBroken()	(e:boolean)=>any	Optional
setExpanded()	(e:boolean)=>any	Optional
sidebarHeader	React.JSX.Element	Optional
handleLogout()	()=>any	Optional
FooterItems	NavItem[]	Required
path	string	Required "/path"
params	any	Optional useParams() from nextJs
searchParams	any	Optional useSearchParams
id	string	Required id from the current route
handleRouteChange()	(e:string)=>any	Required
menuItemStyles	MenuItemStyles	Required
themes	any	Required

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>
  );
}