Add to playlist swipey

src/js/components/ContextMenu.js

@@ -150,12 +150,12 @@ class ContextMenu extends React.Component{
 		playlists = helpers.sortItems(playlists, 'name')
 
 		return (			
-			<div className="submenu">
+			<div className={this.state.submenu_expanded ? 'submenu expanded' : 'submenu'}>
 				<span className="menu-item-wrapper">
 					<a className="menu-item close-submenu" onClick={e => this.setState({submenu_expanded: false})}>
 						<span className="label">
-							<FontAwesome name='close' />
-							&nbsp;
+							<FontAwesome name='caret-left' />
+							&nbsp;&nbsp;
 							Cancel
 						</span>
 					</a>
@@ -305,7 +305,7 @@ class ContextMenu extends React.Component{
 										<span className="label">{ item.label }</span>
 										<FontAwesome className="submenu-icon" name='caret-right' />
 									</a>
-									{this.state.submenu_expanded ? this.renderPlaylistSubmenu() : null}
+									{this.renderPlaylistSubmenu()}
 								</span>
 							)
 						}else{

src/scss/components/_context-menu.scss

@@ -72,6 +72,7 @@
 
 		.menu-item-wrapper {
 			display: block;
+			overflow-x: hidden;
 
 			.menu-item {
 				cursor: pointer;
@@ -89,22 +90,32 @@
 			}
 
 			.submenu-icon {
-				font-size: 10px;
 				float: right;
 				padding-top: 4px;
 			}
 
+			.fa {
+				font-size: 10px;
+			}
+
 			.submenu {
+				@include animate();
 				position: absolute;
 				top: 0;
 				right: 0;
 				bottom: 0;
-				left: 0;
+				left: 100%;
+				width: 0;
 				min-height: 180px;
 				overflow-y: scroll;			
 				background: lighten($dark_grey, 10%);
 				z-index: 3;
 
+				&.expanded {
+					width: 100%;
+					left: 0;
+				}
+
 				.menu-item {
 					width: 100%;