From f3097d00b55104f6bb7e43a360f9224938e45274 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Mon, 28 Aug 2017 21:16:26 +1200
Subject: [PATCH] Context menu :active; Experimenting with branding

---
 src/assets/icon.svg                    | 10 ++++++++++
 src/js/components/Sidebar.js           |  3 +++
 src/scss/components/_context-menu.scss | 19 ++++---------------
 src/scss/components/_sidebar.scss      | 13 +++++++++++++
 4 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100755 src/assets/icon.svg

diff --git a/src/assets/icon.svg b/src/assets/icon.svg
new file mode 100755
index 00000000..5e6395af
--- /dev/null
+++ b/src/assets/icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 141.7 141.7" style="enable-background:new 0 0 141.7 141.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<polygon class="st0" points="58.3,47.1 18.2,8.2 18.2,133.5 58.3,95 "/>
+<polygon class="st0" points="58.3,8.2 58.3,27.1 103.8,70.7 58.3,115 58.3,133.5 123.5,70.7 "/>
+</svg>
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 138bacff..0ca72b66 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -29,6 +29,9 @@ class Sidebar extends React.Component{
 		return (
 			<aside>
 				<div className="liner">
+
+					<div className="branding"></div>
+
 		        	<nav>
 
 		        		<section>
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index bea78c5a..fe4318c6 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -279,6 +279,7 @@
 
 .context-menu-trigger {
 	@include animate();
+	@include gradient_overlay(3px);
 	display: inline-block;
 	padding: 14px 12px;
 	cursor: pointer;
@@ -297,21 +298,9 @@
 		margin: 1px;
 	}
 
-	&:before {
-		@include animate();
-		content: '';
-		display: block;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		opacity: 0;
-		z-index: 9;
-		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-		background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-		background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
+	&:active {
+		margin-top: 0px;
+		margin-bottom: -1px;
 	}
 
 	&:hover{
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index f9f9ba9e..18b9aece 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -24,6 +24,19 @@ aside{
 		overflow-y: auto;
 	}
 
+	.branding {
+		height: 50px;
+		margin-top: 30px;
+		opacity: 0.2;
+
+		background: {
+			image: url('../assets/icon.svg');
+			position: 50% 50%;
+			repeat: no-repeat;
+			size: contain;
+		}
+	}
+
 	nav {
 		z-index: 2;
 		position: relative;