JSFiddle - React, Tailwind, and code Playground

by JamesPattison

HTML

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>
<div id="app"></div>

CSS

.floating-menu-wrapper {
	position: fixed;
   right: 10px;
   bottom: 10px;
	width: 320px;
	height: 200px;
	background: #ececec;
}

.floating-menu {
	position: absolute;
	right: 8px;
	bottom: 8px;
	height: 42px;
	text-align: right;
	/*transition: height 250ms ease-in-out;*/
}

.floating-menu.open {
	height: 200px;
	overflow: hidden;
}

.floating-menu.open .floating-menu-item {
	margin-top: 8px;
}

.floating-menu-item label{
	cursor: pointer;
	display: inline-block;
	margin-right: 8px;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(0,0,0,.25);
	opacity: 0;
	transition: opacity 250ms ease-in-out;
}

.floating-menu.open .floating-menu-item label {
	opacity: 0.4;
}

.floating-menu-icon{
	cursor: pointer;
	display: inline-block;
	width: 42px;
	height: 42px;
	line-height: 42px;
	vertical-align: middle;
	background: #e53935;
	border-radius: 50%;
	border: none;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
	text-align: center;
}

.floating-menu-icon .material-icons {
	font-size: 32px;
	color: #fff;
	vertical-align: middle;
}

JavaScript

class FloatingMenuItem extends React.Component {

	handleClick() {
		this.props.action();
	}
	
	render() {
		let buttonStyle = {
			backgroundImage: `url(${this.props.icon})`
		}
		
		let label;
		
		if (this.props.label) {
			label = <label>{this.props.label}</label>;
		}
		
		return <div
					onClick={this.handleClick.bind(this)}
					className="floating-menu-item">
				  {label}
				  <div className="floating-menu-icon"><i className="material-icons">{this.props.icon}</i></div>
			  </div>;
	}
}

class FloatingMenu extends React.Component {
	constructor() {
		super();
		
		this.state = {
			toggled: false
		}
	}
	
	toggleMenu() {
		this.setState({toggled: !this.state.toggled});
	}
	
	render() {
		let buttons = [];
		let className = "floating-menu";
		let icon = "add";
		
		if (this.state.toggled) {
			className += " open";
			icon = "clear";
			buttons.push(
					<FloatingMenuItem label="Add Timeline Widget" icon="view_carousel" action="" key="i1"/>);
			buttons.push(
					<FloatingMenuItem label="Add Tilelist Widget" icon="filter_1" action="" key="i2"/>);
			buttons.push(
					<FloatingMenuItem label="Add Table Widget" icon="table_chart" action="" key="i3"/>);
		}
		
		buttons.push(<FloatingMenuItem label="" icon={icon} action={this.toggleMenu.bind(this)} key="m"/>); 
		
		return <div className="floating-menu-wrapper">
			<div className={className}>
			{buttons}
		</div>
			</div>;
	}
}

ReactDOM.render(
	<FloatingMenu />,
	document.getElementById('app')
);