Search code examples
javascriptanimationreactjssidebarreact-router

ReactJS: Sidebar with multiple views

I try to build a single-page React.js app with a sidebar. Here is the desired effect:

enter image description here

Imagine that the main page (area with text settings as sidebar) has a button. When you click on the button, a sidebar displays a list of items. When you click on the item a view with details slides over the list view. Imagine that the right sidebar works like an iphone settings menu. Each actions changes the URL (react-router).

Is there anyone that could help with a working example? It is also a question on how to organize this kind of app when using React.

UPDATE:

Manuel Bitto wrote a good example and it works except the URL-changing. I would like to se an example using the react-router because the sidebar holds heavy content and the URL must change when you open the sidebar and when you go deeper.

Solution

  • Here is a basic example where to start, please note that it's the very first time I try to use React so it could be improved a lot: 

    <script type="text/jsx">

var CloseMenuButton = React.createClass({
    render: function() {
        return <button onClick={this.props.onClick}>{this.props.children}</button>;
    }
});

var MenuItem = React.createClass({
    render: function() {
        return <div onClick={this.props.onClick} className="menu-item">{this.props.children}</div>;
    }
});

var Menu = React.createClass({
    getInitialState: function() {
        return {
            visible: false  
        };
    },

    show: function() {
        this.setState({ visible: true });
    },

    hide: function() {
        this.setState({ visible: false });
    },


    render: function() {
        return <div className="menu">
            <div className={(this.state.visible ? "visible" : "") + " right " + this.props.type}>
              <CloseMenuButton onClick={this.hide}>Close</CloseMenuButton>
              {this.props.children}
            </div>
        </div>;
    }
});

var App = React.createClass({

    showMenu: function() {
        this.refs.menu.show();
    },

    showDeeperMenu: function() {
        this.refs.deeperMenu.show();
    },

    render: function() {
        return <div>
            <h1>React JS Sliding Menu</h1>
            <button onClick={this.showMenu}>Show Menu!</button>

            <Menu ref="menu" alignment="right" type="main-menu">
                <MenuItem onClick={this.showDeeperMenu}>Option 1</MenuItem>
                <MenuItem onClick={this.showDeeperMenu}>Option 2</MenuItem>
                <MenuItem onClick={this.showDeeperMenu}>Option 3</MenuItem>
            </Menu>

            <Menu ref="deeperMenu" alignment="right" type="deeper-menu">
                <MenuItem>Deep option 1</MenuItem>
                <MenuItem>Deep option 2</MenuItem>
                <MenuItem>Deep option 3</MenuItem>
            </Menu>

        </div>;
    }
});

React.render(<App />, document.body);

</script>

    Plunker: http://plnkr.co/edit/fojeyUjllAJ5UYejYf0m?p=preview

    References: