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

navbar only on root and md breakpoint

Browse Source
This commit is contained in:
fbruc03 2023-02-10 13:56:01 +01:00
parent ace2237529
commit df4db30c72
1 changed files with 120 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
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,49 +141,22 @@ 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", 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 })
}} }}
sx={{ display: { xs: 'none', md: 'block' } }} startIcon={<FontAwesomeIcon icon={faMicrochip} />}
endIcon={<FontAwesomeIcon icon={faCaretDown} />}
sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
> >
<FontAwesomeIcon {this.props.selectedBoard}
icon={faMicrochip} </Button>
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
/>
<span>MCU</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.mcuRef}
onClick={() => {
this.setState({ anchorElBoard: this.mcuRef.current })
}}
>
<FontAwesomeIcon
icon={faMicrochip}
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
/>
<span>mini</span>
<FontAwesomeIcon
icon={faCaretDown}
style={{ blockSize: "24px", inlineSize: "24px" }} />
</button>
)
}
<Menu <Menu
anchorEl={this.state.anchorElBoard} anchorEl={this.state.anchorElBoard}
anchorOrigin={{ anchorOrigin={{
@ -206,7 +180,7 @@ class Navbar extends Component {
this.setState({ anchorElBoard: null }); this.setState({ anchorElBoard: null });
}} }}
> >
MCU mcu
</MenuItem> </MenuItem>
<MenuItem <MenuItem
value="mini" value="mini"
@ -219,45 +193,35 @@ class Navbar extends Component {
</MenuItem> </MenuItem>
</Menu> </Menu>
</div> </div>
<div> <div style={{ padding: "12px" }}>
{ {
this.props.language === "en_US" ? this.props.language === "en_US" ?
( (
<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" }} style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
ref={this.langRef} ref={this.langRef}
onClick={() => { onClick={() => {
this.setState({ anchorElLang: this.langRef.current }) this.setState({ anchorElLang: this.langRef.current })
}} }}
sx={{ display: { xs: 'none', md: 'block' } }} startIcon={<FontAwesomeIcon icon={faEarthAmericas} />}
endIcon={<FontAwesomeIcon icon={faCaretDown} />}
sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
> >
<FontAwesomeIcon English
icon={faEarthAmericas} </Button>
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
/>
<span>English</span>
<FontAwesomeIcon
icon={faCaretDown}
style={{ blockSize: "24px", inlineSize: "24px" }}
/>
</button>
) : ( ) : (
<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" }} style={{ textTransform: 'none', cursor: "pointer", alignItems: "center", alignContent: "center", background: "transparent", color: "inherit", fontWeight: "bold", border: "2px solid white", borderRadius: "25px" }}
ref={this.langRef} ref={this.langRef}
onClick={() => { onClick={() => {
this.setState({ anchorElLang: this.langRef.current }) this.setState({ anchorElLang: this.langRef.current })
}} }}
startIcon={<FontAwesomeIcon icon={faEarthEurope} />}
endIcon={<FontAwesomeIcon icon={faCaretDown} />}
sx={{ display: { xs: "none", sm: "none", md: "flex" } }}
> >
<FontAwesomeIcon Deutsch
icon={faEarthEurope} </Button>
style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
/>
<span>Deutsch</span>
<FontAwesomeIcon
icon={faCaretDown}
style={{ blockSize: "24px", inlineSize: "24px" }} />
</button>
) )
} }
@ -297,6 +261,8 @@ class Navbar extends Component {
</MenuItem> </MenuItem>
</Menu> </Menu>
</div> </div>
</div>
) : (null)}
{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>