React Base Fiddle (JSX)

React Add/Remove and Toggle Class of Sidebar with overlay

by Rafael Nepomuceno

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app"></div>

<script>
	$('body').on('click', '.toggle-sidebar', function(){
		$('#sidebar').toggleClass('sidebar-active');
		$('body').toggleClass('overflow');
		$('overlay').toggleClass('overlay-active');
	});
	
	$('body').on('click', '.show-sidebar', function(){
		$('#sidebar').addClass('sidebar-active');
		$('body').addClass('overflow');
		$('overlay').addClass('overlay-active');
	});
	
	$('body').on('click', '.hide-sidebar', function(){
		$('#sidebar').removeClass('sidebar-active');
		$('body').removeClass('overflow');
		$('overlay').removeClass('overlay-active');
	});
</script>

CSS

#container {
	font-family: sans-serif;
	padding-top: 35px;
}
img {
	max-width: 100%;
	height: auto;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	cursor: pointer;
	padding: 7px 10px;
}
li + li {
	border-top: 1px solid #DDD;
}
li:hover {
	background-color: #222222;
	color: #FFF;
}
#menu {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: #4C9ED9;
	color: #FFF;
	text-align: right;
}
.btn-menu {
	display: inline-block;
	padding: 10px;
	cursor: pointer;
	margin: 5px;
	border: 1px solid #FFF;
}

#sidebar {
	position: fixed;
	left: -305px;
	top: 0;
	bottom: 0;
	width: 300px;
	background-color: #FFF;
	box-shadow: 2px 0 5px rgba(0,0,0,0.5);
	transition: all 0.3s ease 0s;
}
.sidebar-active {
	left: 0;
}
.logo {
	max-width: 100%;
}

Babel + JSX

var App = React.createClass({
	render: function() {
		return (
			<div id="container">
				{this.props.menu}
				{this.props.content}
				{this.props.sidebar}
				
				<div className="overlay"></div>
			</div>
		);
	}
});

var Menu = React.createClass({
	render: function(){
		return (
			<nav id="menu">
				<div className="btn-menu toggle-sidebar">
					Toggle Sidebar
				</div>
				<div className="btn-menu show-sidebar">
					Show Sidebar
				</div>
			</nav>
		);
	}
});

var Content = React.createClass({
	render: function(){
		return (
			<div id="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quas ipsa quod culpa deleniti assumenda minima nihil reiciendis quibusdam beatae? Iusto laudantium dolorum laborum nisi, autem eius culpa explicabo sit.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur similique facere ipsum enim quibusdam consectetur maxime fugiat tempore minus vel! Deserunt voluptatem ducimus dolore corporis aperiam sequi ut vero, itaque.</p>
				<p>Nemo, fugit reiciendis officiis perspiciatis cumque sunt velit fugiat incidunt numquam aperiam qui necessitatibus itaque dolore sequi enim vel aspernatur tempore quidem amet quibusdam quisquam repellendus eaque unde consequatur. Expedita!</p>
				<p>Deserunt harum praesentium, sed aliquam nulla labore soluta delectus voluptates quam porro consectetur illum nihil earum nemo et aperiam a quidem laudantium corporis, quis. Nam harum nulla aspernatur vitae, illo.</p>
			</div>
		);
	}
});

var Sidebar = React.createClass({
	render: function(){
		return (
			<div id="sidebar">
				<div className="logo">
					<img src="https://facebook.github.io/react/img/logo.svg" />
				</div>
				<MoreComponents />
			</div>
		);
	}
});

var MoreComponents = React.createClass({
	render: function(){
		return (
			<ul>
				<li>Lorem ipsum dolor.</li>
				<li>Voluptas facilis, consequuntur.</li>
				<li>Explicabo odio, distinctio.</li>
				<li...