@kano/kbc-navbar NPM

`kbc-navbar`

A basic navbar with dropdown option plus action and link components, injectable into Kano boilerplate apps.

Exported Components

KbcNavbar: wrapper component for navbar, with dropdown menu
NavLink: generic menu link button
NavAction: generic menu action (non-routing) button
ExportAction: menu action button for exporting current etc.
ImportAction: menu action button for importing current etc.
Logo: image and text to show the branding of a particular app

KbcNavbar

Props

user?: current user
modifier?: string with app name for CSS class names
menuText?: string with translation of title for dropdown toggle
logo: app logo, as a React component
logoText?: visible app name
logoLink?: link for when user clicks on the app name/logo
children?: NavLinks and NavActions to include in menu bar
dropdownChildren?: NavLinks and NavActions to include in dropdown menu

Usage

import React, { Component } from 'react';
import { NavLink, NavAction, ExportAction, KbcNavbar } from '@kano/kbc-navbar'

render() {
       <KbcNavbar
              user={user}
              modifier={modifier}
              brand={
                     [[React component with logo and title]]
              }
              menuText={intl.formatMessage({...messages.menu})}
              children={
                     <>
                            [[ child components, eg:
                                   <NavAction text={intl.formatMessage({...messages.clearEditor})} action={() => editor.reset()} icon="delete22" />
                            ...
                            ]]
                     </>
              }
              dropdownChildren={
                     <>
                            [[ child components, eg:
                                   <ExportAction
                                   action={() => editor.workspaceToolbar.export()}
                                   text={intl.formatMessage({...messages.export})}
                                   />
                                   ...
                            ]]
                     </>

              }
              />
}

NavLink

Props

text: visible string
link
icon?: kbc-icon icon key
dropdown?: boolean, toggles different size icon for menus

Usage

       <KbcNavbar
       ...
       children= {
              <>
                     <NavLink text={text} link="/wherever" icon="bolt22" />
              </>
       }
       />

NavAction

Props

text: visible string
action
icon?: kbc-icons key
dropdown?: boolean, toggles different size icon for menus
active?: boolean, toggles different style for button 'in use'

Usage

       <KbcNavbar
       ...
       children= {
              <>
                     <NavAction text={intl.formatMessage({...messages.clearEditor})} action={() => editor.reset()} icon="delete22" />
              </>
       }
       />

ExportAction / ImportAction

Props

text: string;
action: () => void;

Usage

       <KbcNavbar
       ...
       dropdownChildren= {
              <>
                     <ExportAction
                            action={() => editor.workspaceToolbar.export()}
                            text={intl.formatMessage({...messages.export})}
                        />
              </>
       }
       />

Logo

Props

img: a React component containing the app logo
modifier?: string for updated CSS classes
text?: the text for the visible app name

@kano/kbc-intl @kano/kbc-icons @kano/kbc-tokens react-router-dom @kano/kbc-activity @kano/kbc-telemetry @kano/kbc-challenges @kano-world/kw-clients @kano-world/kbc-clients @types/react-router-dom @kano-world/kw-integrated-components

@infinitebrahmanuniverse/nolb-_kan @everything-registry/sub-chunk-509

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago