Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="//fb.me/react-0.13.1.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="//rawgit.com/davidchang/ngReact/master/ngReact.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app='Button' ng-controller="MainController">
  <sidebar-button menu-options="menuOptions" button-image="buttonImage" button-image-mini="buttonImageMini" menu-option-bottom="menuOptionBottom"></sidebar-button>
</body>
</html>
 
var LogoButton = React.createClass({displayName: "LogoButton",
    render: function () {
        return  React.createElement("div", {className: "navbar-header", onClick:  this.props.handleClick}, 
                    React.createElement("a", {className: "navbar-brand hidden-sx cursor-pointer"}, 
                        React.createElement("img", {src:  this.props.buttonImage, alt: "", id: "logo"})
                    )
                );
    }
});
​
var SidebarComponent = React.createClass({displayName: "SidebarComponent",
    handleClick: function () {
        this.setState({
            showSidebar: !this.state.showSidebar
        });
    },
    getInitialState: function () {
        return {
            showSidebar: false    
        };
    },
    render: function () {
        return  React.createElement("div", null, 
                    React.createElement(LogoButton, {buttonImage:  this.props.buttonImage, handleClick:  this.handleClick}), 
                    React.createElement(Sidebar, {show:  this.state.showSidebar, buttonImage:  this.props.buttonImageMini, handleButtonClick:  this.handleClick, menuOptions:  this.props.menuOptions, menuOptionBottom:  this.props.menuOptionBottom})
                );
    }
});
​
var Sidebar = React.createClass({displayName: "Sidebar",
    render: function () {
      
        var menuOptions = this.props.menuOptions.map( function ( option ) {
            return  React.createElement("li", null, 
                        React.createElement("a", {href:  option.url}, 
                            React.createElement("div", {className: "col-xs-1 text-center icon-lg"}, 
                                React.createElement("div", {className:  option.icon})
                            ), 
                            React.createElement("span", {className: "col-xs-offset-2"}, 
                                 option.title
                            )   
                        )
                    );
        });
​
        return  React.createElement("div", {id: "sidebar-wrapper", className:  'container ' }, 
                    React.createElement("ul", {className: "sidebar-nav"}, 
                        React.createElement("li", {className: "sidebar-brand"}, 
                            React.createElement(LogoButton, {buttonImage:  this.props.buttonImage, handleClick:  this.props.handleButtonClick}), 
                            React.createElement("div", {className: "pull-right"}, 
                                React.createElement("button", {className: "btn btn-white btn-x no-border", onClick:  this.props.handleButtonClick}, 
                                    React.createElement("img", {src: "images/x@2x.png", alt: "Close sidebar"})
                                )
                            )
                        ), 
                         menuOptions 
                    ), 
                    React.createElement("div", {className: "footer"}, 
                        React.createElement("a", {href:  this.props.menuOptionBottom.url}, 
                            React.createElement("div", {className: "col-xs-1 text-center icon-lg"}, 
                                React.createElement("div", {className:  this.props.menuOptionBottom.icon})
                            ), 
                            React.createElement("span", {className: "col-xs-offset-2"}, 
                                 this.props.menuOptionBottom.title
                            )   
                        )
                    )
                );
    }
});
​
var app = angular.module( 'Button', [ 'react' ] );
​
app.controller( 'MainController', [ '$scope', function ( $scope ) {
  
  $scope.buttonImage = "images/ss_logo.png";
  
  $scope.buttonImageMini = "images/ss_green.png";
  
  $scope.menuOptionBottom = { title: 'Logout', url: '#/home/splash', icon: "glyphicon glyphicon-log-out" };
  
  $scope.menuOptions = [ 
        { url: "#/app/profile", title: "Profile", icon: "glyphicon glyphicon-user" } ];
  
}]);
​
app.directive( 'sidebarButton', [ 'reactDirective', function ( reactDirective ) {
  
    return reactDirective( SidebarComponent, [ 'buttonImage', 
        'buttonImageMini', 'menuOptionBottom', 'menuOptions' ] );
}]);
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers