diff --git a/src/Menu/Menu.css b/src/Menu/Menu.css index 03775738a72944038975928736e5ee47aa4b2adf..99e5148ed31117d09daff0bb1d771f0e7041f98b 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 cb98bcd1899505584068416e71733fbbb9cac85f..635901b0512eac9e4d80d50d7f3ea9385b382634 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> )