# @kata-kit/layout

> Layout components for Wicara.

Latest version **0.7.5** (published 2019-08-21) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @kata-kit/layout
pnpm add @kata-kit/layout
yarn add @kata-kit/layout
bun add @kata-kit/layout
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.7.5 |
| Published | 2019-08-21 |
| First published | 2018-10-02 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 138.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 192 |
| Author | Kata.ai |
| Maintainers | computecoholic, resir014, ybdev |

## Links

- npm: https://www.npmjs.com/package/@kata-kit/layout
- Repository: https://github.com/kata-ai/wicara
- Homepage: https://github.com/kata-ai/wicara#readme
- Issues: https://github.com/kata-ai/wicara/issues
- npm.io page: https://npm.io/package/@kata-kit/layout

## Dependencies (4)

- [polished](https://npm.io/package/polished.md) ^2.3.3
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@kata-kit/theme](https://npm.io/package/@kata-kit/theme.md) ^0.7.2
- [react-custom-scrollbars](https://npm.io/package/react-custom-scrollbars.md) ^4.2.1

## Recent versions

- 0.7.5 (latest) — 2019-08-21
- 0.7.5-canary.1 (next) — 2019-08-20
- 0.7.5-canary.0 — 2019-08-19
- 0.7.4 — 2019-07-22
- 0.7.3 — 2019-07-05
- 0.7.2 — 2019-07-02
- 0.7.1 — 2019-05-21
- 0.7.1-canary.0 — 2019-05-10
- 0.7.0 — 2019-02-15
- 0.7.0-beta.6 — 2019-02-08
- 0.7.0-beta.5 — 2019-01-29
- 0.7.0-beta.4 — 2018-12-18
- 0.7.0-beta.3 — 2018-12-18
- 0.7.0-beta.2 — 2018-12-17
- 0.7.0-beta.1 — 2018-12-15
- … 7 more at https://npm.io/package/@kata-kit/layout/versions

## README

# @kata-kit/layout

> Layout components for Wicara.

## Install

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

```sh
# 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:

```jsx
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>
);
```

---
_Source: https://npm.io/package/@kata-kit/layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._