# @graffft-waggle/expandable-side-nav

> graffft-waggle: a expandable-side-nav component

Latest version **0.0.4-alpha.13** (published 2022-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @graffft-waggle/expandable-side-nav
pnpm add @graffft-waggle/expandable-side-nav
yarn add @graffft-waggle/expandable-side-nav
bun add @graffft-waggle/expandable-side-nav
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4-alpha.13 |
| Published | 2022-06-05 |
| First published | 2020-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 33.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dan Kreiger |
| Maintainers | dankreiger |
| Keywords | expandable-side-nav |

## Links

- npm: https://www.npmjs.com/package/@graffft-waggle/expandable-side-nav
- Repository: https://github.com/dankreiger/graffft-waggle
- Homepage: https://github.com/dankreiger/graffft-waggle#readme
- Issues: https://github.com/dankreiger/graffft-waggle/issues
- npm.io page: https://npm.io/package/@graffft-waggle/expandable-side-nav

## Dependencies (2)

- [use-onclickoutside](https://npm.io/package/use-onclickoutside.md) 0.4.0
- [@graffft-waggle/burger](https://npm.io/package/@graffft-waggle/burger.md) ^0.0.4-alpha.8

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.4-alpha.13 (latest) — 2022-06-05
- 0.0.4-alpha.12 — 2022-06-05
- 0.0.4-alpha.9 — 2022-06-05
- 0.0.4-alpha.8 — 2022-06-05
- 0.0.4-alpha.3 — 2022-06-04
- 0.0.4-alpha.1 — 2022-06-04
- 0.0.3-alpha.0 — 2020-07-24

## README

---
filename: /packages/molecules/ExpandableSideNav/ExpandableSideNav.tsx
---

# ExpandableSideNav API

The API documentation of the ExpandableSideNav `Graffft Waggle` component.

## Import

```js
import { ExpandableSideNav } from '@graffft-waggle/expandable-side-nav';
```

## ExpandableSideNav

```ts
interface NavItem {
  key: string;
  navItem: string | number | JSX.Element;
  navItemColor?: string;
  navItemHoverColor?: string;
  navItemBgHoverColor?: string;
}
```

## Optional Props

| Name                              | Type                          | Default              | Description                                          |
| :-------------------------------- | :---------------------------- | :------------------- | :--------------------------------------------------- |
| `sideNavLogo`                     | `string\|number\|JSX.Element` | `undefined`          | a logo for the side nav header                       |
| `sideNavItems`                    | `NavItem[]`                   | `[]`                 | items in side nav                                    |
| `isExpanded`                      | `boolean`                     | `false`              | Expanded state for sidenav                           |
| `expandableSideNavZIndex`         | `number`                      | `300`                | z-index for expandable side nav                      |
| `expandableSideNavBgOverlayColor` | `string`                      | `rgba(0, 0, 0, 0.4)` | expanded state background overlay color              |
| `handleCloseSideNav`              | `() => void`                  | `() => {}`           | callback function to close side nav                  |
| `isSetToTheLeftSide`              | `boolean`                     | `false`              | true if nav should expand from left side of viewport |
| `sideNavHeaderHeight`             | `string`                      | `77px`               | height of side nav header item                       |
| `sideNavItemHeight`               | `string`                      | `54px`               | height of each side nav item                         |
| `sideNavItemPadding`              | `string`                      | `24px`               | padding separating text from side nav border         |
| `sideNavBurgerColor`              | `string`                      | `#000`               | burger color in side nav                             |

## Demos

- TODO

---
_Source: https://npm.io/package/@graffft-waggle/expandable-side-nav · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._