From b51b14e7967df4bb944ca7015922412806394a3e Mon Sep 17 00:00:00 2001
From: Dorian Goepp <dorian.goepp@gmail.com>
Date: Wed, 21 Aug 2019 11:12:36 +0200
Subject: [PATCH] hide and show an 'add' button in the menu

---
 src/Menu/Menu.css | 16 ++++++++++++++--
 src/Menu/index.js | 33 ++++++++++++++++++++++++++-------
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/Menu/Menu.css b/src/Menu/Menu.css
index 0377573..99e5148 100644
--- a/src/Menu/Menu.css
+++ b/src/Menu/Menu.css
@@ -75,11 +75,23 @@
 }
 
 .lock-button {
-  margin-left:70px;
+  margin-left: 70px;
 }
 
 .about-button {
-  margin-left:30px;
+  margin-left: 30px;
+}
+
+.add-button {
+  margin-left: 50px;
+  position: fixed;
+  bottom: 5vh;
+  display: inline-block;
+}
+
+.add-button:hover {
+  filter: invert(67%) sepia(71%) saturate(551%) hue-rotate(1deg) brightness(111%) contrast(86%);
+  cursor: pointer;
 }
 
 .sidenav---sidenav---_2tBP.sidenav---expanded---1KdUL .title {
diff --git a/src/Menu/index.js b/src/Menu/index.js
index cb98bcd..635901b 100644
--- a/src/Menu/index.js
+++ b/src/Menu/index.js
@@ -1,10 +1,28 @@
 import React from "react";
+import {observer} from "mobx-react";
 
 import SideNav, { NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';
 import './Menu.css'
 
 
-export function Menu(props) {
+export const Menu = observer(
+function Menu(props) {
+  const lock = props.store.sharedData.get('lock') || 'closed';
+  function toggle() {
+    const new_value = (lock === 'closed') ? 'open' : 'closed';
+    props.store.sharedData.set('lock', new_value);
+  }
+
+  // Display an "add" icon if the lock is open
+  let add_button = null;
+  if (lock === 'open') {
+    add_button = (
+      <img className="footer add-button"
+        src={window.location.origin + "/images/icons/add_circle_outline.svg"}
+        alt="add a new widget"
+      />);
+  }
+
   return(
 
     <SideNav
@@ -151,6 +169,8 @@ export function Menu(props) {
           </NavText>
         </NavItem>
 
+        {add_button}
+
         <a href="more.html">
           <img className="footer menu-button about-button"
             src={window.location.origin + "/images/icons/about.svg"}
@@ -158,12 +178,11 @@ export function Menu(props) {
           />
         </a>
 
-        {/* <a> */}
-          <img className="footer menu-button lock-button"
-            src={window.location.origin + "/images/icons/lock_closed-grey.svg"}
-            alt="lock/unlock the dashboard"
-          />
-        {/* </a> */}
+        <img className="footer menu-button lock-button"
+          src={window.location.origin + "/images/icons/lock_" + lock + "-grey.svg"}
+          alt="lock/unlock the dashboard"
+          onClick={toggle}
+        />
       </SideNav.Nav>
     </SideNav>
   )
-- 
GitLab