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