From b0b2e5c4474b60c7a94ea5a72a29b39c81f53e53 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Fri, 3 Aug 2018 10:31:11 +0200
Subject: [PATCH] Push out notifications when opening sidebar

---
 app/lib/components/Notifications.jsx     | 17 +++++++++++++----
 app/stylus/components/Notifications.styl |  9 +++++++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/lib/components/Notifications.jsx b/app/lib/components/Notifications.jsx
index d850155..2d0baaf 100644
--- a/app/lib/components/Notifications.jsx
+++ b/app/lib/components/Notifications.jsx
@@ -6,10 +6,15 @@ import * as appPropTypes from './appPropTypes';
 import * as stateActions from '../redux/stateActions';
 import { Appear } from './transitions';
 
-const Notifications = ({ notifications, onClick }) =>
+const Notifications = ({ notifications, onClick, toolAreaOpen }) =>
 {
 	return (
-		<div data-component='Notifications'>
+		<div
+			data-component='Notifications'
+			className={classnames({
+				'toolarea-open' : toolAreaOpen
+			})}
+		>
 			{
 				notifications.map((notification) =>
 				{
@@ -33,14 +38,18 @@ const Notifications = ({ notifications, onClick }) =>
 Notifications.propTypes =
 {
 	notifications : PropTypes.arrayOf(appPropTypes.Notification).isRequired,
-	onClick       : PropTypes.func.isRequired
+	onClick       : PropTypes.func.isRequired,
+	toolAreaOpen  : PropTypes.bool
 };
 
 const mapStateToProps = (state) =>
 {
 	const { notifications } = state;
 
-	return { notifications };
+	return {
+		notifications,
+		toolAreaOpen : state.toolarea.toolAreaOpen
+	};
 };
 
 const mapDispatchToProps = (dispatch) =>
diff --git a/app/stylus/components/Notifications.styl b/app/stylus/components/Notifications.styl
index ed2f48a..b247cb7 100644
--- a/app/stylus/components/Notifications.styl
+++ b/app/stylus/components/Notifications.styl
@@ -2,14 +2,19 @@
 	position: absolute;
 	z-index: 1010;
 	pointer-events: none;
-	top: 0;
-	right: 65px;
+	top: 45px;
+	right: 0;
 	bottom: 0;
 	padding: 20px;
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-start;
 	align-items: flex-end;
+	transition: right 0.3s;
+	
+	&.toolarea-open {
+		right: 25%;
+	}
 
 	+desktop() {
 		padding: 10px;