schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #235 from sensebox/dev/fix-navbar-visibility

Browse Source 
fix navbar visibility
This commit is contained in:
Mario Pesch 2023-02-12 17:49:29 +01:00 committed by GitHub
commit 7969bf2ed7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 120 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
src/components/Navbar.js
View File

@ -50,6 +50,7 @@ import MenuItem from '@mui/material/MenuItem'
import Menu from '@mui/material/Menu' import Menu from '@mui/material/Menu'
import { setLanguage } from "../actions/generalActions"; import { setLanguage } from "../actions/generalActions";
import { setBoard } from "../actions/boardAction"; import { setBoard } from "../actions/boardAction";
import { Button } from "@mui/material";
const styles = (theme) => ({ const styles = (theme) => ({
drawerWidth: { drawerWidth: {
@ -140,163 +141,128 @@ class Navbar extends Component {
<Link to={"/"} style={{ marginLeft: "10px" }}> <Link to={"/"} style={{ marginLeft: "10px" }}>
<img src={senseboxLogo} alt="senseBox-Logo" width="30" /> <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
</Link> </Link>
<div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }} sx={{ display: 'none' }}> <div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }}>
<div> {isHome ? (
{ <div style={{ display: "flex" }}>
this.props.selectedBoard === "mcu" ? <div style={{ padding: "12px" }}>
( <Button
<button style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
style={{ display: "flex", marginRight:"1rem", cursor: "pointer", alignItems: "center", alignContent: "center", paddingInline: "11px 7px", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }} ref={this.mcuRef}
ref={this.mcuRef} onClick={() => {
onClick={() => { this.setState({ anchorElBoard: this.mcuRef.current })
this.setState({ anchorElBoard: this.mcuRef.current }) }}
}} startIcon={<FontAwesomeIcon icon={faMicrochip} />}
sx={{ display: { xs: 'none', md: 'block' } }} endIcon={<FontAwesomeIcon icon={faCaretDown} />}
> sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
<FontAwesomeIcon >
icon={faMicrochip} {this.props.selectedBoard}
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }} </Button>
/> <Menu
<span>MCU</span> anchorEl={this.state.anchorElBoard}
<FontAwesomeIcon anchorOrigin={{
icon={faCaretDown} vertical: 'bottom',
style={{ blockSize: "24px", inlineSize: "24px" }} horizontal: 'center',
/> }}
</button> keepMounted
) : ( transformOrigin={{
<button vertical: 'top',
style={{ display: "flex", cursor: "pointer", alignItems: "center", alignContent: "center", paddingInline: "11px 7px", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }} horizontal: 'center',
ref={this.mcuRef} }}
onClick={() => { open={Boolean(this.state.anchorElBoard)}
this.setState({ anchorElBoard: this.mcuRef.current }) onClose={() => {
this.setState({ anchorElBoard: null });
}}
>
<MenuItem
value="mcu"
onClick={(event) => {
this.props.setBoard(event.currentTarget.getAttribute("value"));
this.setState({ anchorElBoard: null });
}} }}
> >
<FontAwesomeIcon mcu
icon={faMicrochip} </MenuItem>
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }} <MenuItem
/> value="mini"
<span>mini</span> onClick={(event) => {
<FontAwesomeIcon this.props.setBoard(event.currentTarget.getAttribute("value"));
icon={faCaretDown} this.setState({ anchorElBoard: null });
style={{ blockSize: "24px", inlineSize: "24px" }} /> }}
</button> >
mini
</MenuItem>
</Menu>
</div>
<div style={{ padding: "12px" }}>
{
this.props.language === "en_US" ?
(
<Button
style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
ref={this.langRef}
onClick={() => {
this.setState({ anchorElLang: this.langRef.current })
}}
startIcon={<FontAwesomeIcon icon={faEarthAmericas} />}
endIcon={<FontAwesomeIcon icon={faCaretDown} />}
sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
>
English
</Button>
) : (
<Button
style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
ref={this.langRef}
onClick={() => {
this.setState({ anchorElLang: this.langRef.current })
}}
startIcon={<FontAwesomeIcon icon={faEarthEurope} />}
endIcon={<FontAwesomeIcon icon={faCaretDown} />}
sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
>
Deutsch
</Button>
) )
} }
<Menu <Menu
anchorEl={this.state.anchorElBoard} anchorEl={this.state.anchorElLang}
anchorOrigin={{ anchorOrigin={{
vertical: 'bottom', vertical: 'bottom',
horizontal: 'center', horizontal: 'center',
}} }}
keepMounted keepMounted
transformOrigin={{ transformOrigin={{
vertical: 'top', vertical: 'top',
horizontal: 'center', horizontal: 'center',
}} }}
open={Boolean(this.state.anchorElBoard)} open={Boolean(this.state.anchorElLang)}
onClose={() => { onClose={() => {
this.setState({ anchorElBoard: null }); this.setState({ anchorElLang: null });
}} }}
> >
<MenuItem <MenuItem
value="mcu" value="de_DE"
onClick={(event) => { onClick={(event) => {
this.props.setBoard(event.currentTarget.getAttribute("value")); this.props.setLanguage(event.currentTarget.getAttribute("value"));
this.setState({ anchorElBoard: null }); this.setState({ anchorElLang: null });
}}
>
MCU
</MenuItem>
<MenuItem
value="mini"
onClick={(event) => {
this.props.setBoard(event.currentTarget.getAttribute("value"));
this.setState({ anchorElBoard: null });
}}
>
mini
</MenuItem>
</Menu>
</div>
<div>
{
this.props.language === "en_US" ?
(
<button
style={{ display: "flex", cursor: "pointer", alignItems: "center", alignContent: "center", paddingInline: "11px 7px", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
ref={this.langRef}
onClick={() => {
this.setState({ anchorElLang: this.langRef.current })
}}
sx={{ display: { xs: 'none', md: 'block' } }}
>
<FontAwesomeIcon
icon={faEarthAmericas}
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
/>
<span>English</span>
<FontAwesomeIcon
icon={faCaretDown}
style={{ blockSize: "24px", inlineSize: "24px" }}
/>
</button>
) : (
<button
style={{ display: "flex", cursor: "pointer", alignItems: "center", alignContent: "center", paddingInline: "11px 7px", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
ref={this.langRef}
onClick={() => {
this.setState({ anchorElLang: this.langRef.current })
}} }}
> >
<FontAwesomeIcon Deutsch
icon={faEarthEurope} </MenuItem>
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }} <MenuItem
/> value="en_US"
<span>Deutsch</span> onClick={(event) => {
<FontAwesomeIcon this.props.setLanguage(event.currentTarget.getAttribute("value"));
icon={faCaretDown} this.setState({ anchorElLang: null });
style={{ blockSize: "24px", inlineSize: "24px" }} /> }}
</button> >
English
) </MenuItem>
} </Menu>
<Menu </div>
anchorEl={this.state.anchorElLang} </div>
anchorOrigin={{ ) : (null)}
vertical: 'bottom',
horizontal: 'center',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
open={Boolean(this.state.anchorElLang)}
onClose={() => {
this.setState({ anchorElLang: null });
}}
>
<MenuItem
value="de_DE"
onClick={(event) => {
this.props.setLanguage(event.currentTarget.getAttribute("value"));
this.setState({ anchorElLang: null });
}}
>
Deutsch
</MenuItem>
<MenuItem
value="en_US"
onClick={(event) => {
this.props.setLanguage(event.currentTarget.getAttribute("value"));
this.setState({ anchorElLang: null });
}}
>
English
</MenuItem>
</Menu>
</div>
{isHome ? ( {isHome ? (
<Tooltip title={'Start Tour'} arrow> <Tooltip title={'Start Tour'} arrow>
<IconButton <IconButton
@ -335,9 +301,8 @@ class Navbar extends Component {
<IconButton <IconButton
color="inherit" color="inherit"
onClick={(event) => { this.setState({ anchorElUser: event.target }) }} onClick={(event) => { this.setState({ anchorElUser: event.target }) }}
style={{ margin: "0 30px 0 auto" }} style={{ margin: "0 30px 0 0" }}
size="large" size="large"
sx={{ display: { xs: 'none', md: 'block' } }}
> >
<FontAwesomeIcon icon={faUser} /> <FontAwesomeIcon icon={faUser} />
</IconButton> </IconButton>
@ -388,7 +353,7 @@ class Navbar extends Component {
(<Link to={"/user/login"} style={{ textDecoration: 'none', color: "white" }}> (<Link to={"/user/login"} style={{ textDecoration: 'none', color: "white" }}>
<IconButton <IconButton
color="inherit" color="inherit"
style={{ margin: "0 0 0 auto" }} style={{ margin: "0 30px 0 auto" }}
> >
<FontAwesomeIcon icon={faUser} /> <FontAwesomeIcon icon={faUser} />
</IconButton> </IconButton>