A sidebar component

[the-halfbloodprince]

A sidebar component usually seen in dashboards.

The component must be this way:

Javascript

const myOptions = [
    {
        'name': 'My-App',
        'onClick': undefined,
        'clickable': false,
        'icon': '/logo.png'
    },
    {
        'name': 'Dashboard',
        'onClick': () => {
            console.log('Landed on dashboard')
        },
        'clickable': true,
        'icon': '/dash.png'
    },
    {
        'name': 'Results',
        'onClick': () => {
            console.log('Landed on results page')
        },
        'clickable': true,
        'icon': '/results.png'
    },
    {
        'name': 'Help',
        'onClick': () => {
            console.log('Landed on help page')
        },
        'clickable': true,
        'icon': '/help.png'
    },
]

<Sidebar options={myOptions} />

TypeScript

interface option {
    name: string;                                    //name to be displayed on the UI
    onClick: () => void | undefined;       // function that will be called on clicking the option
    clickable: boolean | undefined;        // is the button clickable
    icon: string | undefined;                   // icon path
}

let myOptions: option[] = [
    {
        'name': 'My-App',
        'onClick': undefined,
        'clickable': false,
        'icon': '/logo.png'
    },
    {
        'name': 'Dashboard',
        'onClick': () => {
            console.log('Landed on dashboard')
        },
        'clickable': true,
        'icon': '/dash.png'
    },
    {
        'name': 'Results',
        'onClick': () => {
            console.log('Landed on results page')
        },
        'clickable': true,
        'icon': '/results.png'
    },
    {
        'name': 'Help',
        'onClick': () => {
            console.log('Landed on help page')
        },
        'clickable': true,
        'icon': '/help.png'
    }
]

<Sidebar options={myOptions} />

The fixing of the element to the side can be skipped, it just needs to have a height of 100vh;

[fgkolf]

Hello! can i grab this one?

[the-halfbloodprince]

Sure