@graffft-waggle/kopf NPM

filename: /packages/organisms/Kopf.tsx

The API documentation of the Kopf Graffft Waggle component.

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

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

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

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