@kata-kit/layout

@kata-kit/layout

Layout components for Wicara.

Install

@kata-kit/layout requires react-router. To install, use:

# yarn
yarn add @kata-kit/layout react-router-dom
# npm
npm install @kata-kit/layout react-router-dom

Usage

To use this component within your React app, import as follows:

import {
  Wrapper,
  SidebarAndContent,
  Content,
  Sidebar,
  SidebarMain,
  SidebarMainMenu,
  SidebarSub,
  SidebarSubMenu
} from '@kata-kit/layout';

const Component = ({ children, isSidebarCollapsed }) => (
  <Wrapper>
    <SidebarAndContent>
      <Sidebar collapsed={isSidebarCollapsed}>
        <SidebarMain logo={Logo}>
          <SidebarMainMenu asNavLink exact to="/" icon="bot">
            Demo
          </SidebarMainMenu>
          <SidebarMainMenu asNavLink to="/docs" icon="docs">
            Docs
          </SidebarMainMenu>
          <SidebarMainMenu asNavLink to="/components" icon="method">
            Components
          </SidebarMainMenu>
        </SidebarMain>
        <SidebarSub titleElement={<SidebarSubTitle>Docs</SidebarSubTitle>}>
          <SidebarSubMenu asNavLink exact to="/docs">
            Index
          </SidebarSubMenu>
          <SidebarSubMenu asNavLink exact to="/docs/page">
            Page
          </SidebarSubMenu>
        </SidebarSub>
      </Sidebar>
      <Content>{children}</Content>
    </SidebarAndContent>
  </Wrapper>
);