# @graffft-waggle/kopf

> graffft-waggle: a kopf component

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

## Install

```sh
npm install @graffft-waggle/kopf
pnpm add @graffft-waggle/kopf
yarn add @graffft-waggle/kopf
bun add @graffft-waggle/kopf
```

## 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.15 |
| Published | 2022-06-05 |
| First published | 2020-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 74.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dan Kreiger |
| Maintainers | dankreiger |
| Keywords | kopf |

## Links

- npm: https://www.npmjs.com/package/@graffft-waggle/kopf
- 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/kopf

## Dependencies (3)

- [@graffft-waggle/burger](https://npm.io/package/@graffft-waggle/burger.md) ^0.0.4-alpha.8
- [@graffft-waggle/container](https://npm.io/package/@graffft-waggle/container.md) ^0.0.4-alpha.14
- [@graffft-waggle/expandable-side-nav](https://npm.io/package/@graffft-waggle/expandable-side-nav.md) ^0.0.4-alpha.13

## Recent versions

- 0.0.4-alpha.15 (latest) — 2022-06-05
- 0.0.4-alpha.0 (next) — 2021-01-03
- 0.0.4-alpha.14 — 2022-06-05
- 0.0.4-alpha.13 — 2022-06-05
- 0.0.4-alpha.12 — 2022-06-05
- 0.0.4-alpha.11 — 2022-06-05
- 0.0.4-alpha.10 — 2022-06-05
- 0.0.4-alpha.9 — 2022-06-05
- 0.0.4-alpha.8 — 2022-06-05
- 0.0.4-alpha.7 — 2022-06-05
- 0.0.4-alpha.6 — 2022-06-05
- 0.0.4-alpha.5 — 2022-06-05
- 0.0.4-alpha.4 — 2022-06-04
- 0.0.4-alpha.3 — 2022-06-04
- 0.0.4-alpha.2 — 2022-06-04
- … 2 more at https://npm.io/package/@graffft-waggle/kopf/versions

## README

---
filename: /packages/organisms/Kopf.tsx
---

# Kopf API

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

## Import

```js
import { Kopf } from '@graffft-waggle/kopf';
```

## Kopf

## Required Props

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

| Name           | Type                          | Description         |
| :------------- | :---------------------------- | :------------------ |
| headerLogo     | `string\|number\|JSX.Element` | Main header logo    |
| headerNavItems | `KopfHeaderNavItem[]`         | Nav items in header |

```ts
export enum KopfHeaderLogoPostion {
  LEFT = 'left',
  RIGHT = 'right',
}
```

## Optional Props

| Name                           | Type                          | Default                                                               | Description                         |
| :----------------------------- | :---------------------------- | :-------------------------------------------------------------------- | :---------------------------------- |
| isFixed                        | `boolean`                     | `true`                                                                | if true, header is fixed to the top |
| headerMaxWidth                 | `string`                      | `1800px`                                                              | max width for header                |
| sideNavDisabled                | `boolean`                     | `false`                                                               | Logo needed to enable sidenav       |
| sideNavLogo                    | `string\|number\|JSX.Element` | `undefined`                                                           | Logo needed to enable sidenav       |
| desktopMinWidth                | `number`                      | `768`                                                                 | Min-width for non-mobile devices    |
| headerBackgroundColor          | `string`                      | `#fff`                                                                | Header background color             |
| headerBoxShadow                | `string`                      | `'0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15)'` | Header box shadow                   |
| headerBurgerColor              | `string`                      | `#000`                                                                | Header burger color                 |
| headerHeight                   | `string`                      | `60px`                                                                | Header height                       |
| headerLogoPosition             | `KopfHeaderLogoPostion`       | `left`                                                                | Header logo position                |
| headerNavItemHorizontalPadding | `string`                      | `0px 16px`                                                            | Padding around each nav item        |
| headerMobilePadding            | `string`                      | `0px 16px`                                                            | Header mobile padding               |
| headerPadding                  | `string`                      | `0px 24px`                                                            | Header padding                      |
| headerZIndex                   | `number`                      | `200`                                                                 | Header z-index                      |
| mobileMenuOpen                 | `boolean`                     | `false`                                                               | mobile menu open state              |
| handleToggleMobileMenu         | `() => void`                  | `() => {}`                                                            | callback for toggling mobile menu   |
| handleCloseMobileMenu          | `() => void`                  | `() => {}`                                                            | callback for closing mobile menu    |
| customScss                     | `string`                      | `''`                                                                  | custom scss for wrapper element     |

## Demos

- TODO

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