Impromptu React Side Menu

A side menu component for React.

What does it look like?

Here is an example.

Installation

Npm is the recommended install method.

$ npm install impromptu-react-sidemenu

After installing, copy the public assets to your project folder to get access to the required stylesheets and fonts.

$ cp -r node_modules/impromptu-react-sidemenu/public/ .

Include the CSS file with e.g., <link href="public/css/impromptu.css" rel="stylesheet">.

How to use

A menu is layed out according to the following structure.

<Menu position='right'>
    <Brand>Title</Brand>
    <Item onClick={...}>
       A menu item
    </Item>
    <Item onClick={...}>
       Another menu item
    </Item>
    <Item onClick={...}>
       Yet another menu item
    </Item>
</Menu>

As an example, we could create a component in a file main.js.

var React = require('react');
var Menu  = require('impromptu-react-sidemenu').Menu;
var Brand = require('impromptu-react-sidemenu').Brand;
var Item  = require('impromptu-react-sidemenu').Item;

var MenuComponent = React.createClass({
    handleClick: function(item) {
        /*
        switch (item) {
            case 0:
                // ... do stuff
            case 1:
                // ... do stuff
            ...
        }
        */
    },
    render: function() {
        return (
            <Menu>
                <Brand onClick={this.handleClick.bind(null, 0)}>
                    My menu is grandiose
                </Brand>
                <Item onClick={this.handleClick.bind(null, 1)}>
                    Item #1
                </Item>
                <Item onClick={this.handleClick.bind(null, 2)}>
                    Item #2
                </Item>
                <Item onClick={this.handleClick.bind(null, 3)}>
                    Item #3
                </Item>
            </Menu>
        );
    }
});

React.render(
    <MenuComponent />,
    document.getElementById('anchor')
);

Then build the component. In this example, Browserify is used.

$ browserify -t reactify main.js -o bundle.js

In some cases, you may want to use ordinary hyperlinks inside the menu Items and Brand element instead of the onClick handler.

var MenuComponent = React.createClass({
    render: function() {
        return (
            <Menu>
                <Brand>
                    <a href="#item-1">My menu is grandiose</a>
                </Brand>
                <Item>
                    <a href="#item-1">Item #1</a>
                </Item>
                <Item>
                    <a href="#item-2">Item #2</a>
                </Item>
                <Item>
                    <a href="#item-3">Item #3</a>
                </Item>
            </Menu>
        );
    }
});

You may also want to have a look at the included example for some different configuration options.

HTML

A bare minimum HTML host template could look like the one below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Impromptu React Side Menu</title>
    <link href="public/css/impromptu.css" rel="stylesheet">
</head>
<body>
    <div class="impromptu-font-sans" id="anchor"></div>
    <script src="bundle.js"></script>
</body>
</html>

Props

Property	Type	Description	Default
`width`	Integer	Width of the menu, in pixels.	250
`autoClose`	Boolean	Controls whether the menu should automatically close when a menu item is clicked.	false
`position`	'left' \| 'right'	Position of the menu.	'right'
`showDividers`	Boolean	When true, this setting enables a visible line between menu items.	false

CSS

Sass customization

To change menu colors, a number of Sass variables are set up in sass/impromptu.scss. You'll have to adjust these and recompile the CSS file. See sass-lang.com if you're not familiar with Sass.

/* Open button color values */
$button-open-bg           : rgba(0, 0, 0, 0.4);
$button-open-bg-active    : rgba(0, 0, 0, 0.7);
$button-open-fg           : rgb(255, 255, 255);

/* Close button color values */
$button-close-bg          : rgb(255, 255, 255);
$button-close-bg-active   : rgba(255, 255, 255, 0.7);
$button-close-fg          : rgb(51, 51, 51);

/* Menu color values */
$menu-background          : rgb(51, 51, 51);
$menu-text-base           : rgb(153, 153, 153);
$menu-text-active         : rgb(255, 255, 255);
$menu-selected-bg         : rgba(255, 255, 255, 0.2);
$menu-divider             : rgb(74, 74, 74);

Contribute

Please, do! Like the old pythagorean proverb says; "Pull requests are welcome."

License

Impromptu React Side Menu is provided under the BSD License.

Font Awesome

Distributed with the Font Awesome library included. Font Awesome is created and maintained by Dave Gandy. Fonts licensed under SIL OFL 1.1. Code licensed under MIT License.

laserpants / impromptu-react-sidemenu