2.0.115 • Published 2 years ago

@kano/kbc-navbar v2.0.115

Weekly downloads
301
License
ISC
Repository
github
Last release
2 years ago

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
2.0.109

2 years ago

2.0.115

2 years ago

2.0.114

2 years ago

2.0.113

2 years ago

2.0.112

2 years ago

2.0.111

2 years ago

2.0.110

2 years ago

2.0.108

2 years ago

2.0.107

2 years ago

2.0.106

2 years ago

2.0.105

2 years ago

2.0.104

2 years ago

2.0.103

2 years ago

2.0.102

2 years ago

2.0.101

2 years ago

2.0.100

3 years ago

2.0.99

3 years ago

2.0.97

3 years ago

2.0.98

3 years ago

2.0.95

3 years ago

2.0.96

3 years ago

2.0.94

3 years ago

2.0.89

4 years ago

2.0.93

4 years ago

2.0.91

4 years ago

2.0.92

4 years ago

2.0.90

4 years ago

2.0.88

4 years ago

2.0.87

4 years ago

2.0.86

4 years ago

2.0.85

4 years ago

2.0.84

4 years ago

2.0.83

4 years ago

2.0.82

4 years ago

2.0.80

4 years ago

2.0.81

4 years ago

2.0.79

4 years ago

2.0.77

4 years ago

2.0.78

4 years ago

2.0.75

4 years ago

2.0.76

4 years ago

2.0.73

4 years ago

2.0.74

4 years ago

2.0.71

4 years ago

2.0.72

4 years ago

2.0.59

4 years ago

2.0.57

4 years ago

2.0.58

4 years ago

2.0.55

4 years ago

2.0.56

4 years ago

2.0.68

4 years ago

2.0.69

4 years ago

2.0.66

4 years ago

2.0.67

4 years ago

2.0.64

4 years ago

2.0.65

4 years ago

2.0.62

4 years ago

2.0.63

4 years ago

2.0.60

4 years ago

2.0.61

4 years ago

2.0.70

4 years ago

2.0.54

4 years ago

2.0.53

4 years ago

2.0.51

4 years ago

2.0.52

4 years ago

2.0.50

4 years ago

2.0.48

4 years ago

2.0.49

4 years ago

2.0.46

4 years ago

2.0.47

4 years ago

2.0.44

4 years ago

2.0.45

4 years ago

2.0.43

4 years ago

2.0.42

4 years ago

2.0.40

4 years ago

2.0.41

4 years ago

2.0.37

4 years ago

2.0.38

4 years ago

2.0.35

4 years ago

2.0.36

4 years ago

2.0.39

4 years ago

2.0.34

4 years ago

2.0.33

4 years ago

2.0.32

4 years ago

2.0.31

4 years ago

2.0.19

4 years ago

2.0.17

4 years ago

2.0.18

4 years ago

2.0.26

4 years ago

2.0.27

4 years ago

2.0.24

4 years ago

2.0.25

4 years ago

2.0.22

4 years ago

2.0.23

4 years ago

2.0.20

4 years ago

2.0.21

4 years ago

2.0.28

4 years ago

2.0.29

4 years ago

2.0.30

4 years ago

2.0.15

4 years ago

2.0.16

4 years ago

2.0.13

4 years ago

2.0.14

4 years ago

2.0.11

4 years ago

2.0.12

4 years ago

2.0.10

4 years ago

2.0.9

4 years ago

2.0.8

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

2.0.0-pre.3

5 years ago

2.0.0-pre.2

5 years ago

2.0.0-pre.1

5 years ago

2.0.0-pre.0

5 years ago

1.11.30

5 years ago

1.11.28

5 years ago

1.11.29

5 years ago

1.11.27

5 years ago

1.11.25

5 years ago

1.11.26

5 years ago

1.11.24

5 years ago

1.11.23

5 years ago

1.11.18

5 years ago

1.11.19

5 years ago

1.11.20

5 years ago

1.11.21

5 years ago

1.11.22

5 years ago

1.11.16

5 years ago

1.11.17

5 years ago

1.11.15

5 years ago

1.11.14

5 years ago

1.11.13

5 years ago

1.11.12

5 years ago

1.11.11

5 years ago

1.11.10

5 years ago

1.11.8

5 years ago

1.11.9

5 years ago

1.11.7

5 years ago

1.11.6

5 years ago

1.11.5

5 years ago

1.11.4

5 years ago

1.11.3

5 years ago

1.11.2

5 years ago

1.11.1

5 years ago

1.11.0

5 years ago

1.10.8

5 years ago

1.10.7

5 years ago

1.10.6

5 years ago

1.10.5

5 years ago

1.10.4

5 years ago

1.10.3

5 years ago

1.10.2

5 years ago

1.10.1

5 years ago

1.10.0

5 years ago

1.9.16

5 years ago

1.9.15

5 years ago

1.9.14

5 years ago

1.9.13

5 years ago

1.9.12

5 years ago

1.9.11

5 years ago

1.9.10

5 years ago

1.9.9

5 years ago

1.9.8

5 years ago

1.9.7

5 years ago

1.9.6

5 years ago

1.9.5

5 years ago

1.9.4

5 years ago

1.9.3

5 years ago

1.9.1

5 years ago

1.9.2

5 years ago

1.9.0

5 years ago

1.8.14

5 years ago

1.8.13

5 years ago

1.8.12

5 years ago

1.8.11

5 years ago

1.8.10

5 years ago

1.8.9

5 years ago

1.8.8

5 years ago

1.8.7

5 years ago

1.8.6

5 years ago

1.8.5

5 years ago

1.8.4-alpha.0

5 years ago

1.8.3

5 years ago

1.8.2

5 years ago

1.8.1

5 years ago

1.8.0

5 years ago

1.7.2

5 years ago

1.7.1

5 years ago

1.7.0

5 years ago

1.6.3

5 years ago

1.6.2

5 years ago

1.6.0

5 years ago

1.5.6

5 years ago

1.5.5

5 years ago

1.5.4

5 years ago

1.5.3

5 years ago

1.5.2

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.6

5 years ago

1.4.5

5 years ago

1.4.4

5 years ago

1.4.3

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.4

5 years ago

1.3.3

5 years ago

1.3.2

5 years ago

1.3.1

5 years ago

1.3.0

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.13

5 years ago

1.1.12

5 years ago

1.1.11

5 years ago

1.1.9

5 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.10

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.4

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.3

5 years ago

4.26.12-alpha.0

5 years ago

4.26.11-alpha.0

5 years ago

4.26.10-alpha.0

5 years ago

4.26.9-alpha.0

5 years ago

4.26.8-alpha.0

5 years ago

4.26.4-alpha.0

5 years ago

4.26.3-alpha.0

5 years ago

4.26.2-alpha.0

5 years ago

4.26.1-alpha.0

5 years ago

4.26.0-alpha.0

5 years ago

4.25.4-alpha.0

5 years ago

4.25.2-alpha.0

5 years ago

4.25.0-alpha.1

5 years ago

4.25.0-alpha.0

5 years ago

4.24.2-alpha.0

5 years ago

4.24.0-alpha.0

5 years ago

4.23.1-alpha.0

5 years ago

4.23.0-alpha.0

5 years ago

4.22.24-alpha.0

5 years ago

4.22.25-alpha.0

5 years ago

4.22.23-alpha.0

5 years ago

4.22.22-alpha.0

5 years ago

4.22.21-alpha.0

5 years ago

4.22.19-alpha.0

5 years ago

4.22.20-alpha.0

5 years ago

4.22.18-alpha.0

5 years ago

4.22.17-alpha.0

5 years ago

4.22.13-alpha.0

5 years ago

4.22.14-alpha.0

5 years ago

4.22.12-alpha.0

5 years ago

4.22.11-alpha.0

5 years ago

4.22.10-alpha.0

5 years ago

4.22.9-alpha.0

5 years ago

4.22.7-alpha.0

5 years ago

4.22.6-alpha.0

5 years ago

4.22.4-alpha.0

5 years ago

4.22.5-alpha.0

5 years ago

4.22.1-alpha.0

5 years ago

4.21.6-alpha.0

5 years ago

4.22.0-alpha.0

5 years ago

4.21.4-alpha.0

5 years ago

4.21.3-alpha.0

5 years ago

4.21.1-alpha.0

5 years ago

4.21.0-alpha.0

5 years ago

4.20.4-alpha.0

5 years ago

4.20.0-alpha.0

5 years ago

4.20.1-alpha.0

5 years ago

4.19.3-alpha.0

5 years ago

4.19.1-alpha.0

5 years ago

4.19.2-alpha.0

5 years ago

4.19.0-alpha.0

5 years ago

4.18.0-alpha.0

5 years ago

4.17.1-alpha.0

5 years ago

4.16.4-alpha.0

5 years ago

4.16.3-alpha.0

5 years ago

4.15.0

5 years ago

4.14.12-alpha.0

5 years ago

4.14.13-alpha.0

5 years ago

4.14.10-alpha.0

5 years ago

4.14.8-alpha.0

5 years ago

4.14.9-alpha.0

5 years ago

4.14.5-alpha.0

5 years ago

4.14.3-alpha.0

5 years ago

4.14.1-alpha.0

5 years ago

4.14.2-alpha.0

5 years ago

4.13.6-alpha.0

5 years ago

4.13.5-alpha.0

5 years ago

4.13.1-alpha.0

5 years ago

4.13.0-alpha.0

5 years ago

4.12.0-alpha.0

5 years ago

4.13.2-alpha.0

5 years ago

4.11.5-alpha.0

5 years ago

4.11.4-alpha.0

5 years ago

4.11.3-alpha.0

5 years ago

4.11.2-alpha.0

5 years ago

4.11.1-alpha.0

5 years ago

4.10.5-alpha.0

5 years ago

4.10.4-alpha.0

5 years ago

4.10.3-alpha.0

5 years ago

4.10.2-alpha.0

5 years ago

4.10.1-alpha.0

5 years ago

4.0.0-alpha.1

5 years ago

4.0.0-alpha.0

5 years ago