add new navbar

package.json

@@ -12,9 +12,9 @@
     "@blockly/zoom-to-fit": "^2.0.14",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/react-fontawesome": "^0.1.19",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.3.1",
     "@mui/lab": "^5.0.0-alpha.110",
     "@mui/material": "^5.10.16",

src/components/Navbar.js

@@ -37,10 +37,18 @@ import {
   faLightbulb,
   faCode,
   faPuzzlePiece,
+  faUser,
+  faFlag,
+  faMicrochip,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
 import Tooltip from "@mui/material/Tooltip";
+import MenuItem from '@mui/material/MenuItem'
+import Menu from '@mui/material/Menu'
+import { setLanguage } from "../actions/generalActions";
+import { setBoard } from "../actions/boardAction";
+import { Redirect } from "react-router-dom";
 
 const styles = (theme) => ({
   drawerWidth: {
@@ -63,6 +71,9 @@ class Navbar extends Component {
     this.state = {
       open: false,
       isTourOpen: false,
+      anchorElLang: null,
+      anchorElBoard: null,
+      anchorElUser: null
     };
   }
 
@@ -80,7 +91,6 @@ class Navbar extends Component {
 
   render() {
     var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname);
-    var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname);
     var isAssessment =
       /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) &&
       !this.props.tutorialIsLoading &&
@@ -127,55 +137,189 @@ class Navbar extends Component {
             <Link to={"/"} style={{ marginLeft: "10px" }}>
               <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
             </Link>
-            {isTutorial ? (
+            <div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }} sx={{ display: 'none' }}>
-              <Link
+              {<IconButton
-                to={"/tutorial"}
+                color="inherit"
-                style={{
+                onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
-                  textDecoration: "none",
+                style={{ margin: "0 30px 0 auto" }}
-                  color: "inherit",
+                size="large"
-                  marginLeft: "10px",
+                sx={{ display: { xs: 'none', md: 'block' } }}
+              >
+                <FontAwesomeIcon icon={faFlag} />
+              </IconButton>}
+              <Menu
+                anchorEl={this.state.anchorElLang}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'center',
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center',
+                }}
+                open={Boolean(this.state.anchorElLang)}
+                onClose={() => {
+                  this.setState({ anchorElLang: null });
                 }}
               >
-                <Typography variant="h6" noWrap>
+                <MenuItem
-                  Tutorial
+                  value="de_DE"
-                </Typography>
+                  onClick={(event) => {
-              </Link>
+                    this.props.setLanguage(event.currentTarget.getAttribute("value"));
-            ) : null}
+                    this.setState({ anchorElLang: null });
-            {isHome ? (
-              <Tooltip title={'Start Tour'} arrow>
-                <IconButton
-                  color="inherit"
-                  className={`openTour ${this.props.classes.button}`}
-                  onClick={() => {
-                    this.openTour();
                   }}
-                  style={{ margin: "0 30px 0 auto" }}
+                >
-                  size="large">
+                  DE
-                  <FontAwesomeIcon icon={faQuestionCircle} />
+                </MenuItem>
-                </IconButton>
+                <MenuItem
-              </Tooltip>
+                  value="en_US"
-            ) : null}
+                  onClick={(event) => {
-            {isAssessment ? (
+                    this.props.setLanguage(event.currentTarget.getAttribute("value"));
-              <Tooltip title={'Start tour'} arrow>
+                    this.setState({ anchorElLang: null });
-                <IconButton
-                  color="inherit"
-                  className={`openTour ${this.props.classes.button}`}
-                  onClick={() => {
-                    this.openTour();
                   }}
-                  style={{ margin: "0 30px 0 auto" }}
+                >
-                  size="large">
+                  EN
-                  <FontAwesomeIcon icon={faQuestionCircle} />
+                </MenuItem>
-                </IconButton>
+              </Menu>
-              </Tooltip>
+              {<IconButton
-            ) : null}
+                color="inherit"
-            <Tour
+                onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
-              steps={isHome ? home() : assessment()}
+                style={{ margin: "0 30px 0 auto" }}
-              isOpen={this.state.isTourOpen}
+                size="large"
-              onRequestClose={() => {
+                sx={{ display: { xs: 'none', md: 'block' } }}
-                this.closeTour();
+              >
-              }}
+                <FontAwesomeIcon icon={faMicrochip} />
-            />
+              </IconButton>}
+              <Menu
+                anchorEl={this.state.anchorElBoard}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'center',
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center',
+                }}
+                open={Boolean(this.state.anchorElBoard)}
+                onClose={() => { this.setState({ anchorElBoard: null }); }}
+              >
+                <MenuItem
+                  value="mcu"
+                  onClick={(event) => {
+                    this.props.setBoard(event.currentTarget.getAttribute("value"));
+                    this.setState({ anchorElBoard: null });
+                  }}
+                >
+                  MCU
+                </MenuItem>
+                <MenuItem
+                  value="mini"
+                  onClick={(event) => {
+                    this.props.setBoard(event.currentTarget.getAttribute("value"));
+                    this.setState({ anchorElBoard: null });
+                  }}
+                >
+                  MINI
+                </MenuItem>
+              </Menu>
+              {isHome ? (
+                <Tooltip title={'Start Tour'} arrow>
+                  <IconButton
+                    color="inherit"
+                    className={`openTour ${this.props.classes.button}`}
+                    onClick={() => {
+                      this.openTour();
+                    }}
+                    style={{ margin: "0 30px 0 auto" }}
+                    size="large">
+                    <FontAwesomeIcon icon={faQuestionCircle} />
+                  </IconButton>
+                </Tooltip>
+              ) : null}
+              {isAssessment ? (
+                <Tooltip title={'Start tour'} arrow>
+                  <IconButton
+                    color="inherit"
+                    className={`openTour ${this.props.classes.button}`}
+                    onClick={() => {
+                      this.openTour();
+                    }}
+                    style={{ margin: "0 30px 0 auto" }}
+                    size="large">
+                    <FontAwesomeIcon icon={faQuestionCircle} />
+                  </IconButton>
+                </Tooltip>
+              ) : null}
+              <Tour
+                steps={isHome ? home() : assessment()}
+                isOpen={this.state.isTourOpen}
+                onRequestClose={() => {
+                  this.closeTour();
+                }}
+              />
+              {this.props.user ? (
+                <div>
+                  <IconButton
+                    color="inherit"
+                    onClick={(event) => { this.setState({ anchorElUser: event.target }) }}
+                    style={{ margin: "0 30px 0 auto" }}
+                    size="large"
+                    sx={{ display: { xs: 'none', md: 'block' } }}
+                  >
+                    <FontAwesomeIcon icon={faUser} />
+                  </IconButton>
+                  <Menu
+                    anchorEl={this.state.anchorElUser}
+                    anchorOrigin={{
+                      vertical: 'bottom',
+                      horizontal: 'center',
+                    }}
+                    keepMounted
+                    transformOrigin={{
+                      vertical: 'top',
+                      horizontal: 'center',
+                    }}
+                    open={Boolean(this.state.anchorElUser)}
+                    onClose={() => { this.setState({ anchorElUser: null }); }}
+                  >
+                    <div className="" style={{ paddingLeft: "16px", paddingRight: "16px", paddingTop: "16px" }}>
+                      <p style={{ fontWeight: "bold", margin: "0px" }}>
+                        {this.props.user.name}
+                      </p>
+                      <p style={{ marginTop: "0px", color: "#696969" }}>
+                        {this.props.user.email}
+                      </p>
+                    </div>
+                    <hr style={{ borderTop: "3px solid #bbb", marginLeft: "5px", marginRight: "5px" }} />
+                    <MenuItem>
+                    <Link to={"/settings"} style={{ textDecoration: 'none', color: "black" }}>
+                      {Blockly.Msg.navbar_settings}
+                    </Link>
+                    </MenuItem>
+                    <MenuItem
+                      onClick={() => {
+                        this.props.logout()
+                      }}
+                    >
+                      {Blockly.Msg.navbar_logout}
+                    </MenuItem>
+                  </Menu>
+                </div>
+              )
+                :
+                (<Link to={"/user/login"} style={{ textDecoration: 'none', color: "white" }}>
+                  <IconButton
+                    color="inherit"
+                    style={{ margin: "0 30px 0 auto" }}
+                  >
+                    <FontAwesomeIcon icon={faUser} />
+                  </IconButton>
+                </Link>
+                )
+              }
+            </div>
           </Toolbar>
         </AppBar>
         <Drawer
@@ -369,6 +513,10 @@ Navbar.propTypes = {
   user: PropTypes.object,
   tutorial: PropTypes.object,
   activeStep: PropTypes.number.isRequired,
+  setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  setBoard: PropTypes.func.isRequired,
+  selectedBoard: PropTypes.string.isRequired
 };
 
 const mapStateToProps = (state) => ({
@@ -378,8 +526,10 @@ const mapStateToProps = (state) => ({
   user: state.auth.user,
   tutorial: state.tutorial.tutorials[0],
   activeStep: state.tutorial.activeStep,
+  language: state.general.language,
+  selectedBoard: state.board.board
 });
 
-export default connect(mapStateToProps, { logout })(
+export default connect(mapStateToProps, { logout, setLanguage, setBoard })(
   withStyles(styles, { withTheme: true })(withRouter(Navbar))
 );