Dropdown menu approach for reatcjs

dropdown-menu.jsx

/** @jsx React.DOM */

define([
    'react',
], function(React) {
    "use strict";

    var Dropdown = React.createClass({
        getInitialState: function () {
            return {
                open: false
            };
        },
        listen: function () {
            document.addEventListener("click", this.toggle);
        },
        stopListening: function () {
            document.removeEventListener("click", this.toggle);
        },
        toggle: function () {
            console.log('called');

            if (this.state.open) {
                this.stopListening();
            } else {
                this.listen();
            }

            this.setState({
                open: !this.state.open
            });
        },
        handleClick: function () {
            var index = Number(arguments[1].split('$')[1]);
            this.props.onClick(this.props.options[index]);
            this.toggle();
        },
        _normalizeOption: function (option, index) {
            var classString = " option";

            if (option.classString) {
                classString = option.classString + classString;
            }

            return <li
                className={classString}
                onClick={this.handleClick}
                key={index}
                title={option.title}>
                {option.name}
            </li>;
        },
        render: function() {
            var classString;

            if (this.state.open) {
                classString = "dropdown open";
            } else {
                classString = "dropdown";
            }

            return (
                <div className={classString}>
                    <button
                        onClick={this.toggle}
                        onMouseLeave={this.handleLeave} >
                        {this.props.children}
                    </button>
                    <ul className="options">
                        {
                            this.props.options.map(this._normalizeOption)
                        }
                    </ul>
                </div>
            )
        }
    });

    return Dropdown;
});

dropdown-menu.scss

.dropdown{
    position: relative;
    &.open{
        .options{
            display: block;
            position: absolute;
            z-index: 10;
        }
    }
    .options{
        display: none;
    }
}

header.jsx

/** @jsx React.DOM */

define([
    'react',
    'components/common/menu',
    'components/common/dropdown-menu',
    'components/user/profile-pic'
], function(React, Menu, Dropdown, ProfilePic) {
    "use strict";

    var Header = React.createClass({
        render: function() {
            return (
                <div>
                    <Dropdown options={[
                        {
                            name: "Something",
                            title: "Something",
                            url: "#something"
                        },
                        {
                            name: "Something else",
                            title: "Something else from the application",
                            url: "#something"
                        }
                    ]}>
                    <ProfilePic url={'http://graph.facebook.com/' + this.props.data.username + '/picture'} />
                    <span className="wrapper">
                        {this.props.data.username}
                    </span>
                </Dropdown>
            </div>
            )
        }
    });

    return Header;
});

header.scss

.app.menu{
    float: right;
    .dropdown{
        @include inline;
        button{
            @include app-menu-action;
            border: none;
            background: none;
            outline: none;
            padding: 0;
            .wrapper{
                padding: 0 0.625em;
            }
        }
        img{
            height: 2.1875em;
            vertical-align: middle;
        }
        a{
            display: block;
            line-height: 2.5em;
            text-align: center;
        }
        ul{
            background: #fff;
            border: 1px solid #DFDFDF;
            border-radius: 0.5em;
            overflow: hidden;
            top: 3.5em;
            width: 100%;
        }
        li{
            @include app-menu-action;
            line-height: 2.5em;
            height: 2.5em;
            padding: 0 0.5em;
        }
    }
}

A dropdown menu is a component that displays a pop-up menu once a
user clicks on a given element.
It allows a developer to set whatever element he wants as pop-up trigger
and to set either elements inside ( contained in a list item ) or just
pass on objects that get constructed to li.

@todo emit event
@todo close when click outside

See image for details:
http://susepaste.org/42101758