reactbar

Navigation bars for React applications.

Dependencies

react >= 16

Table of contents

• Project Name
  • Dependencies
  • Table of contents
  • Getting Started
  • Usage
  • Contributing
  • Built With
  • Versioning
  • Authors
  • License

Installation

npm

$ npm install @xal3xfx/reactbar

yarn

$ yarn add @xal3xfx/reactbar

Usage

SidebarOld

The SidebarOld is a wrapper for your application. Put all of your components inside the SidebarOld.

Recommended to have height: 100% on html and #root and no margin on body.

body{
    margin: 0;
}

html, #root{
    height: 100%;
}

Desktop

| Expanded | Collapsed | |----------------------------------------------------------------------------------|------------------| | | |

Mobile

| Expanded | Collapsed | |----------------------------------------------------------------------------------|----------------------------------------------------------------------------------| | | |

Example

import * as React  from 'react';
import {SidebarOld, SidebarItem} from "@xal3xfx/reactbar";
import './index.css'

const App = () => {
    const items : SidebarItem[] = [
        {
            className: 'fas fa-house',
            command: () => console.log('home'),
            label: "Home",
            children: [
                {
                    className: 'fa fa-list',
                    command: () => console.log('info 1'),
                    label: "Info",
                },
                {
                    className: 'fa fa-list',
                    command: () => console.log('info 2'),
                    label: "Info2",
                }
            ]
        },
        {
            className: 'fas fa-search',
            command: () => 0,
            label: "Search"
        }
    ]

    return <>
        <SidebarOld items={items} >
            <h1>App component</h1>
            <ChildComponent />
        </SidebarOld>
    </>
};

const ChildComponent = () => {
    return <>
        I am child
    </>
}

export default App;

SidebarOld has required items property which is of type SidebarItem[] and represents the items in the sidebar menu.

SidebarItem

interface SidebarItem {
    className: string;
    label: string;
    command: () => void;
    children?: SidebarItem[]
}

| Name | Description | Default Value | |------------|---------------------------------------------------------------------------------------------------|---------------| | className | className for the item in the list. You can use it to put icon to the list item. | required | | label | text to display for the item in the list. | required | | command | function callback which is executed when the item in the list is clicked. | required | | children | If you want to have expandable item in the list you should pass children which is SidebarItem[] | undefined |

Props

| Name | Description | Default Value | |-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------| | items | SidebarItem[] | required | | topBarElement | Any JSX.Element which you want to be displayed on the Topbar. | undefined | | onSidebarToggled | Function callback which is executed when the sidebar is clicked. The function accepts on parameter expanded: boolean which is true if the sidebar is expanded and false if it is collapsed. | undefined | | topbarStyle | Style for the Topbar | undefined |

Contributing

You are welcome to contribute with any new features or buf fixes.

Built With

• tsdx

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Alex Petrov - Initial work - Alex Petrov - xAl3xFx

See also the list of contributors who participated in this project.

License

MIT License © Alex Petrov