Condense actions into expansion panel

src/js/components/Header.js

@@ -1,5 +1,7 @@
 
 import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
+
 import Icon from './Icon'
 import SidebarToggleButton from './SidebarToggleButton'
 
@@ -7,6 +9,27 @@ export default class Header extends React.Component{
 
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			expanded: false
+		}
+	}
+
+	renderActions(){
+		if (!this.props.actions) return null
+
+		return (
+			<div className={this.state.expanded ? 'expanded actions' : 'actions'}>
+				<button className="trigger" onClick={e => this.setState({expanded: !this.state.expanded})}>
+					<FontAwesome name="ellipsis-v" />
+				</button>
+				<span className="items">
+					<span className="liner">
+						{ this.props.actions }
+					</span>
+				</span>
+			</div>
+		)
 	}
 
 	render(){
@@ -15,7 +38,7 @@ export default class Header extends React.Component{
 				<Icon name={ this.props.icon } />
 				<SidebarToggleButton />
 				<h1>{ this.props.title }</h1>
-				{ this.props.actions ? <div className="actions">{ this.props.actions }</div> : null }
+				{this.renderActions()}
 			</header>
 		);
 	}

src/scss/components/_dropdown-field.scss

@@ -48,5 +48,34 @@
 			}
 		}
 	}
+
+	@include responsive( $bp_medium ){
+		&.expanded {
+			background: none !important;
+			color: inherit !important;
+		}
+
+		.label {
+			background: none !important;
+			color: inherit !important;
+
+			.fa {
+				display: none;
+			}
+		}
+
+		.options {
+			display: block;
+			position: relative;
+			top: 0;
+			background: lighten($light_grey,5%);
+
+			.option {
+				color: #000000;
+				border-color: $light_grey;
+				background: none !important;
+			}
+		}
+	}
 }
 

src/scss/components/_header.scss

@@ -43,33 +43,72 @@ main {
 				&:active {
 					background: rgba(0,0,0,0.15);
 				}
+
+				&.trigger {
+					display: none;
+					font-size: 18px;
+					padding: 16px 14px;
+				}
 			}
 		}
 
 		@include responsive( $bp_medium ){
-			.dropdown-field {
-				.label {
-					padding-left: 16px;
-					padding-right: 16px;
-
-					.text {
-						display: none;
-					}
-					.fa {
-						line-height: 24px;
-					}
-				}
-			}
 			.actions {
-				button {
-					font-size: 1px;
-					color: transparent;
-					vertical-align: top;
+				right: 0;
 
-					.fa {
-						font-size: 14px;
-						color: #000000;
-						vertical-align: middle;
+				button.trigger {
+					display: inline-block;
+				}
+
+				.items {
+					display: none;
+				}
+
+				&.expanded {
+					z-index: 98;
+
+					button.trigger {
+						z-index: 99;
+						color: #FFFFFF;
+						position: relative;
+					}
+
+					.items {
+						display: block;
+						position: fixed;
+						top: 0;
+						right: 0;
+						bottom: 0;
+						left: 0;
+						background: rgba(0,0,0,0.9);
+						overflow-y: scroll;
+
+						.liner {
+							display: block;
+							width: 200px;
+							margin: 30px auto;
+							background: $light_grey;
+						}
+
+						button,
+						.dropdown-field {
+							display: block;
+							width: 100%;
+							text-align: left;
+							border-bottom: 1px solid rgba(0,0,0,0.1);
+
+							.fa {
+								width: 1.5em;
+								text-align: center;
+							}
+
+							&.dropdown-field {
+								.label {
+									padding-left: 14px;
+									padding-right: 14px;
+								}
+							}
+						}
 					}
 				}
 			}