Removing context menu where not needed

src/js/components/Header.js

@@ -32,6 +32,16 @@ export default class Header extends React.Component{
 		}
 	}
 
+	renderContextMenuTrigger(){
+
+		// No custom trigger, nor any options
+		if (!this.props.handleContextMenuTrigger && !this.props.options){
+			return null;
+		}
+
+		return <ContextMenuTrigger onTrigger={e => this.handleContextMenuTrigger(e,this.props.options)} />
+	}
+
 	renderOptions(){
 		if (!this.props.options && !this.props.handleContextMenuTrigger){
 			return null;
@@ -39,7 +49,7 @@ export default class Header extends React.Component{
 
 		return (
 			<div className='options'>
-				<ContextMenuTrigger onTrigger={e => this.handleContextMenuTrigger(e,this.props.options)} />
+				{this.renderContextMenuTrigger()}
 				<span className="items">
 					<span className="liner">
 						{this.props.options ? this.props.options : null}

src/js/views/Album.js

@@ -121,9 +121,6 @@ class Album extends React.Component{
 
 		return (
 			<div className="view album-view content-wrapper">
-
-				{this.props.slim_mode ? <Header icon="cd" title="Album" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
-
 				<div className="thumbnail-wrapper">
 					<Thumbnail size="large" canZoom images={ this.props.album.images } />
 				</div>
@@ -146,7 +143,7 @@ class Album extends React.Component{
 				<div className="actions">
 					<button className="primary" onClick={e => this.play()}>Play</button>
 					{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} /> : null }
-					{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+					<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 				</div>
 
 				<section className="list-wrapper">

src/js/views/Artist.js

@@ -205,9 +205,6 @@ class Artist extends React.Component{
 
 			return (
 				<div className="view artist-view">
-
-					{this.props.slim_mode ? <Header className="overlay" icon="mic" title="Artist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
-
 					<div className="intro">
 
 						<Parallax image={image} />
@@ -217,7 +214,7 @@ class Artist extends React.Component{
 							<div className="actions">
 								<button className="primary" onClick={e => this.props.mopidyActions.playURIs(uris_to_play, this.props.artist.uri)}>Play</button>
 								{is_spotify ? <FollowButton className="white" uri={this.props.params.uri} removeText="Remove from library" addText="Add to library" is_following={this.inLibrary()} /> : null}
-								{this.props.slim_mode ? null : <ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />}
+								<ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />
 							</div>
 							{ this.renderSubViewMenu() }
 						</div>

src/js/views/Playlist.js

@@ -117,7 +117,7 @@ class Playlist extends React.Component{
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
 						<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.params.uri, name: this.props.playlist.name }) }>Edit</button>
-						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)
 
@@ -127,7 +127,7 @@ class Playlist extends React.Component{
 						<div className="actions">
 							<button className="primary" onClick={ e => this.play() }>Play</button>
 							<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.params.uri, name: this.props.playlist.name, public: this.props.playlist.public, collaborative: this.props.playlist.collaborative, description: this.props.playlist.description }) }>Edit</button>
-							{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+							<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 						</div>
 					)
 				}
@@ -135,7 +135,7 @@ class Playlist extends React.Component{
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
 						<FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
-						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)
 
@@ -143,7 +143,7 @@ class Playlist extends React.Component{
 				return (
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
-						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)
 		}
@@ -168,9 +168,6 @@ class Playlist extends React.Component{
 
 		return (
 			<div className="view playlist-view content-wrapper">
-
-				{this.props.slim_mode ? <Header icon="playlist" title="Playlist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
-
 				<div className="thumbnail-wrapper">
 					<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
 				</div>

src/scss/components/_sidebar.scss

@@ -127,6 +127,7 @@ aside{
 
 		.liner {
 			bottom: 0 !important;
+			padding-bottom: 30px;
 		}
 
 		.thumbnail {