Commit b51b14e7 authored by Dorian Goepp's avatar Dorian Goepp

hide and show an 'add' button in the menu

parent d231435f
......@@ -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 {
......
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>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment