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