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