Keiron Sidebar

This library provides a sidebar component useful for all the suites

Setup

• In your front proyect run yarn add keiron-sidebar

Example of use

import { Content, SideBar } from "keiron-sidebar"
import { Grid } from "@mui/material"
import { useRouter } from "next/router"
import { useAuth } from "common/context"
import { publicRoutes } from "common/config/constants"

export default function Layout({
  children,
}: {
  children: JSX.Element
}): JSX.Element {
  const router = useRouter()
  const { user, isLoading, logOut } = useAuth()

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const route: any = []
  const configRoutes = [
    {
      title: `Configuración`,
      icon: `settings`,
      path: ``,
      subroutes: [
        {
          title: `Usuarios`,
          icon: `person`,
          path: `/users`,
        },
        {
          title: `Aplicaciones`,
          icon: `settings`,
          path: `/applications`,
        },
      ],
    },
  ]
  const configUserMenuList = [
    {
      icon: `settings`,
      name: `Mi perfil`,
      onClick: () => {
        router.push(`/profile`)
      },
    },
  ]

  const navigateFunction = (path: string): void => {
    router.push(path)
  }
  if (!isLoading) {
    if (user === null || publicRoutes.includes(router.pathname)) {
      return children
    }
  }

  const userInfo = {
    firstName: user?.firstName || ``,
    lastName: user?.lastName || ``,
    roleName: user?.roles[0]?.name || ``,
    photoUrl: user?.photoUrl || ``,
  }

  return (
    <Grid container bgcolor={`background.common`}>
      <SideBar
        routes={route}
        user={userInfo}
        configRoutes={configRoutes}
        navigateFunction={navigateFunction}
        logoutFunction={logOut}
        userMenuList={configUserMenuList}
      />
      <Content>{children}</Content>
    </Grid>
  )
}