menus.md

Menu with a blur effect

As its name suggests, this component consists in a header, the options and a content layout where you place the components for the page, a wrapper kind of thing. When the menu is displayed, all the components inside the content section with be blured.

Properties

Name	Type	Required	Comments
options	array of elements	true	An array of elements (nodes) that will be displayed in the menu.
title	string	true	Sets the title for the header section.

Methods

Name	Parameters	Type	Description
show	N/A	N/A	Shows the menu... obviously.
hide	N/A	N/A	Hides the menu... also obvious.

Usage

import React, { Component } from 'react';
import { MenuWithBlur } from 'panda-common-controls';

class BasicForm extends Component {
    render() {
        //Menu options.
        const options = [];
        options.push(<a href='/'>Home</a>);
        options.push(<a href='/second'>Second page</a>);
        options.push(<a href='/storybook-1'>Storybook vol. 1</a>);
        options.push(<a href='/storybook-2'>Storybook vol. 2</a>);
        options.push(<a href='/storybook-3'>Storybook vol. 3</a>);
        //Result.
        return(
            <MenuWithBlur title='Title' options={options}>
                <div>
                    {/* The rest of your content... */}
                </div>
            </MenuWithBlur>
        );
    }
}