CodeCraft Kit

Chakra-UI ReactJs Next.JS

@codecraftkit

Documentation

SideBar

Description#

The SideBar is used to have a menu in the left side of the screen.

Import#

it can be imported from the core.

Code Example

import { SideBar  } from "@codecraftkit/core";

or alone.

Code Example

import SideBar  from "@codecraftkit/sidebar";

Usage#

Code Example

function MyApp() {
const options = {
      head: {
        title: '@codecraftkit',
        description: 'Documentation',
        img: '/images/avatars/code/negro.jpg'
      },
      menu: [{
        title: 'General'
      }, {
        route: '/',
        label: 'Getting Started',
      }, {
        route: '/custom-templates',
        label: 'Custom Templates',
      },{
        label: 'DataTable',
        subItems: [
          {
            route: '/data-table',
            label: 'DataTable'
          }, {
            route: '/data-table/head-types',
            label: 'DataTable Head Types'
          }, {
            route: '/data-table/styles',
            label: 'DataTable Styles'
          }
        ]
      },{
        route: '/menu',
        label: 'Menu',
      }]
    }

  return <SideBar
    head={options.head}
    menu={options.menu}
    menuSearch
  />
}

The props isResizable and isCollapsible doesn't work as expected in this environment

Custom Components#

Code Example

function MyApp(){
  const options = {
      menu: [{
        title: 'General'
      }, {
        route: '/',
        label: 'Getting Started',
      }, {
        route: '/custom-templates',
        label: 'Custom Templates',
      },{
        label: 'DataTable',
        subItems: [
          {
            route: '/data-table',
            label: 'DataTable'
          }, {
            route: '/data-table/head-types',
            label: 'DataTable Head Types'
          }, {
            route: '/data-table/styles',
            label: 'DataTable Styles'
          }
        ]
      },{
        route: '/menu',
        label: 'Menu',
      }]
    }

  return <SideBar
    menu={options.menu}
    header={<Grid placeItems='center'h='136px' templateRows='1fr auto'>
     header
     <Divider />
    </Grid>}
    body={<Grid placeItems='center'  h='156px' >body</Grid>}
    footer={<Grid placeItems='center'  h='50px' >footer</Grid>}
    menuItemsBodySpace='206px'
  />
}

Props#

name

type

required

default

description

head

object

object that contains title, description, img to customize the sidebar header

array<objects>

Items inside the sidebar menu

isResizable

Boolean

Make the sidebar resizable

isCollapsible

Boolean

Make the sidebar collapsible

menuItemActiveColor

Color

blue.500

Current route item color

header

Component

Custom header component

body

Component

Custom body component, above the menu items

footer

Object

Custom footer component

menuSearch

Boolean

Show a search box for the menu items

menuItemsBodySpace

height

Height og the body component to handle menu items height