📝 Table of Contents

• About
• Installing
• Usage
• Built Using
• Todo
• Author
• Acknowledgments

🧐 About

Navvy serves as a simple to use navbar/sidebar combo component. A fully featured navbar/sidebar is a common aspect of many dashboards and other websites; Navvy makes it easy to implement one on your own.

📦 Installing

NPM

npm install navvy

Yarn

yarn add navvy

🎈 Usage

import React from 'react'
import Navvy from 'navvy'

const App = () => {
  return (
    <Navvy
      logo="D A S H B O A R D"
      sections={[
        {
          heading: 'Navigation',
          links: [
            {
              collapsible: true,
              children: [
                {
                  icon: 'Cube',
                  title: 'Child 1'
                },
                {
                  icon: 'Cubes',
                  title: 'Child 2'
                }
              ],
              icon: 'Dashboard',
              title: 'Dashboard'
            },
            {
              icon: 'Template',
              title: 'Page layouts',
              handler: () => console.log('LOL')
            },
            { icon: 'Sidebar', title: 'Navigation' },
            { icon: 'Apps', title: 'Widget' }
          ]
        },
        {
          heading: 'UI Element',
          links: [
            { icon: 'Add', title: 'Basic' },
            { icon: 'Action', title: 'Advanced' },
            { icon: 'Ad', title: 'Extra' },
            { icon: 'ThreeD', title: 'Animations' },
            { icon: 'Cubes', title: 'Icons' }
          ]
        },
        {
          heading: 'Forms',
          links: [
            { icon: 'Document', title: 'Form' },
            { icon: 'FormAdd', title: 'Form Picker' },
            { icon: 'FormCheckmark', title: 'Form Select' },
            { icon: 'FormFolder', title: 'Form Masking' },
            { icon: 'Magic', title: 'Form Wizard' }
          ]
        }
      ]}
    >
      {Inner Content}
    </Navvy>
  )
}

export default App

⛏️ Built Using

• Grommet - UI Framework
• React - UI Framework
• react-custom-scrollbars - Sidebar Scrolling

✏️ TODO

• [x] Basic Skeleton.
• [x] Ability to collapse/expand sidebar.
• [x] Ability to make fullscreen.
• [x] Ability to render collapsible links.
• [x] Ability to render custom Logos.
• [ ] Dark/Light Modes.
• [ ] Ability to hook into Notifications.
• [ ] Ability to hook into Settings.

✍️ Author

• Alex Lee - Developer

🎉 Acknowledgements

• Icon made by Nikita Golubev from www.flaticon.com and is licensed by CC 3.0 BY.