From d05eede14f17e81a7918295f7262f775e7e60273 Mon Sep 17 00:00:00 2001
From: fbruc03 <65135023+fbruc03@users.noreply.github.com>
Date: Thu, 12 Jan 2023 12:39:21 +0100
Subject: [PATCH 1/4] add new navbar

---
 package.json             |   6 +-
 src/components/Navbar.js | 244 +++++++++++++++++++++++++++++++--------
 2 files changed, 200 insertions(+), 50 deletions(-)

diff --git a/package.json b/package.json
index 9ebe8f1..436e093 100644
--- a/package.json
+++ b/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/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.19",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.3.1",
     "@mui/lab": "^5.0.0-alpha.110",
     "@mui/material": "^5.10.16",
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 9b03d76..f0fc14a 100644
--- a/src/components/Navbar.js
+++ b/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 ? (
-              <Link
-                to={"/tutorial"}
-                style={{
-                  textDecoration: "none",
-                  color: "inherit",
-                  marginLeft: "10px",
+            <div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }} sx={{ display: 'none' }}>
+              {<IconButton
+                color="inherit"
+                onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
+                style={{ margin: "0 30px 0 auto" }}
+                size="large"
+                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>
-                  Tutorial
-                </Typography>
-              </Link>
-            ) : null}
-            {isHome ? (
-              <Tooltip title={'Start Tour'} arrow>
-                <IconButton
-                  color="inherit"
-                  className={`openTour ${this.props.classes.button}`}
-                  onClick={() => {
-                    this.openTour();
+                <MenuItem
+                  value="de_DE"
+                  onClick={(event) => {
+                    this.props.setLanguage(event.currentTarget.getAttribute("value"));
+                    this.setState({ anchorElLang: null });
                   }}
-                  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();
+                >
+                  DE
+                </MenuItem>
+                <MenuItem
+                  value="en_US"
+                  onClick={(event) => {
+                    this.props.setLanguage(event.currentTarget.getAttribute("value"));
+                    this.setState({ anchorElLang: null });
                   }}
-                  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();
-              }}
-            />
+                >
+                  EN
+                </MenuItem>
+              </Menu>
+              {<IconButton
+                color="inherit"
+                onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
+                style={{ margin: "0 30px 0 auto" }}
+                size="large"
+                sx={{ display: { xs: 'none', md: 'block' } }}
+              >
+                <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))
 );

From 2c1594227ebf4d5f0b96118d0dd388ffa66fa816 Mon Sep 17 00:00:00 2001
From: fbruc03 <65135023+fbruc03@users.noreply.github.com>
Date: Thu, 12 Jan 2023 22:30:41 +0100
Subject: [PATCH 2/4] style navbar items

---
 src/components/Navbar.js | 231 ++++++++++++++++++++++++---------------
 1 file changed, 144 insertions(+), 87 deletions(-)

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index f0fc14a..50d626f 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -38,8 +38,10 @@ import {
   faCode,
   faPuzzlePiece,
   faUser,
-  faFlag,
   faMicrochip,
+  faEarthEurope,
+  faEarthAmericas,
+  faCaretDown
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
@@ -48,7 +50,6 @@ 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: {
@@ -138,92 +139,150 @@ class Navbar extends Component {
               <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
             </Link>
             <div style={{ margin: "0 0 0 auto", display: "flex", alignItems: 'center', justifyContent: 'center' }} sx={{ display: 'none' }}>
-              {<IconButton
-                color="inherit"
-                onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
-                style={{ margin: "0 30px 0 auto" }}
-                size="large"
-                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 });
-                }}
-              >
-                <MenuItem
-                  value="de_DE"
-                  onClick={(event) => {
-                    this.props.setLanguage(event.currentTarget.getAttribute("value"));
-                    this.setState({ anchorElLang: null });
+              <div>
+                {
+                  this.props.selectedBoard === "mcu" ?
+                    (
+                      <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" }}
+                        onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
+                        sx={{ display: { xs: 'none', md: 'block' } }}
+                      >
+                        <FontAwesomeIcon
+                          icon={faMicrochip}
+                          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" }}
+                        onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
+                      >
+                        <FontAwesomeIcon
+                          icon={faMicrochip}
+                          style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
+                        />
+                        <span>mini</span>
+                        <FontAwesomeIcon
+                          icon={faCaretDown}
+                          style={{ blockSize: "24px", inlineSize: "24px" }} />
+                      </button>
+
+                    )
+                }
+                <Menu
+                  anchorEl={this.state.anchorElBoard}
+                  anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center',
                   }}
-                >
-                  DE
-                </MenuItem>
-                <MenuItem
-                  value="en_US"
-                  onClick={(event) => {
-                    this.props.setLanguage(event.currentTarget.getAttribute("value"));
-                    this.setState({ anchorElLang: null });
+                  keepMounted
+                  transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center',
                   }}
-                >
-                  EN
-                </MenuItem>
-              </Menu>
-              {<IconButton
-                color="inherit"
-                onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
-                style={{ margin: "0 30px 0 auto" }}
-                size="large"
-                sx={{ display: { xs: 'none', md: 'block' } }}
-              >
-                <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"));
+                  open={Boolean(this.state.anchorElBoard)}
+                  onClose={() => {
                     this.setState({ anchorElBoard: null });
                   }}
                 >
-                  MCU
-                </MenuItem>
-                <MenuItem
-                  value="mini"
-                  onClick={(event) => {
-                    this.props.setBoard(event.currentTarget.getAttribute("value"));
-                    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>
+              </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" }}
+                        onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
+                        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" }}
+                        onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
+                      >
+                        <FontAwesomeIcon
+                          icon={faEarthEurope}
+                          style={{ blockSize: "24px", inlineSize: "24px", marginInline: "0px 8px" }}
+                        />
+                        <span>Deutsch</span>
+                        <FontAwesomeIcon
+                          icon={faCaretDown}
+                          style={{ blockSize: "24px", inlineSize: "24px" }} />
+                      </button>
+
+                    )
+                }
+                <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 });
                   }}
                 >
-                  MINI
-                </MenuItem>
-              </Menu>
+                  <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 ? (
                 <Tooltip title={'Start Tour'} arrow>
                   <IconButton
@@ -232,7 +291,6 @@ class Navbar extends Component {
                     onClick={() => {
                       this.openTour();
                     }}
-                    style={{ margin: "0 30px 0 auto" }}
                     size="large">
                     <FontAwesomeIcon icon={faQuestionCircle} />
                   </IconButton>
@@ -246,7 +304,6 @@ class Navbar extends Component {
                     onClick={() => {
                       this.openTour();
                     }}
-                    style={{ margin: "0 30px 0 auto" }}
                     size="large">
                     <FontAwesomeIcon icon={faQuestionCircle} />
                   </IconButton>
@@ -294,9 +351,9 @@ class Navbar extends Component {
                     </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>
+                      <Link to={"/settings"} style={{ textDecoration: 'none', color: "black" }}>
+                        {Blockly.Msg.navbar_settings}
+                      </Link>
                     </MenuItem>
                     <MenuItem
                       onClick={() => {
@@ -312,7 +369,7 @@ class Navbar extends Component {
                 (<Link to={"/user/login"} style={{ textDecoration: 'none', color: "white" }}>
                   <IconButton
                     color="inherit"
-                    style={{ margin: "0 30px 0 auto" }}
+                    style={{ margin: "0 0 0 auto" }}
                   >
                     <FontAwesomeIcon icon={faUser} />
                   </IconButton>

From e1b659cda5ae1df669c44960cef2c53f28307721 Mon Sep 17 00:00:00 2001
From: fbruc03 <65135023+fbruc03@users.noreply.github.com>
Date: Thu, 12 Jan 2023 23:30:32 +0100
Subject: [PATCH 3/4] menu anchor always on button

---
 src/components/Navbar.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 50d626f..76105a6 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -69,6 +69,8 @@ const styles = (theme) => ({
 class Navbar extends Component {
   constructor(props) {
     super(props);
+    this.langRef = React.createRef();
+    this.mcuRef = React.createRef();
     this.state = {
       open: false,
       isTourOpen: false,
@@ -145,7 +147,10 @@ class Navbar extends Component {
                     (
                       <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" }}
-                        onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
+                        ref={this.mcuRef}
+                        onClick={() => {
+                          this.setState({ anchorElBoard: this.mcuRef.current })
+                        }}
                         sx={{ display: { xs: 'none', md: 'block' } }}
                       >
                         <FontAwesomeIcon
@@ -161,7 +166,10 @@ class Navbar extends Component {
                     ) : (
                       <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" }}
-                        onClick={(event) => { this.setState({ anchorElBoard: event.target }) }}
+                        ref={this.mcuRef}
+                        onClick={() => {
+                          this.setState({ anchorElBoard: this.mcuRef.current })
+                        }}
                       >
                         <FontAwesomeIcon
                           icon={faMicrochip}
@@ -217,7 +225,10 @@ class Navbar extends Component {
                     (
                       <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" }}
-                        onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
+                        ref={this.langRef}
+                        onClick={() => {
+                          this.setState({ anchorElLang: this.langRef.current })
+                        }}
                         sx={{ display: { xs: 'none', md: 'block' } }}
                       >
                         <FontAwesomeIcon
@@ -233,7 +244,10 @@ class Navbar extends Component {
                     ) : (
                       <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" }}
-                        onClick={(event) => { this.setState({ anchorElLang: event.target }) }}
+                        ref={this.langRef}
+                        onClick={() => {
+                          this.setState({ anchorElLang: this.langRef.current })
+                        }}
                       >
                         <FontAwesomeIcon
                           icon={faEarthEurope}

From 426d618769dd613aa27fc77531b5b66fde799ebf Mon Sep 17 00:00:00 2001
From: fbruc03 <65135023+fbruc03@users.noreply.github.com>
Date: Mon, 6 Feb 2023 12:57:23 +0100
Subject: [PATCH 4/4] fix XML on change

---
 src/components/Blockly/BlocklyWindow.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js
index bbab82d..ffdb8f8 100644
--- a/src/components/Blockly/BlocklyWindow.js
+++ b/src/components/Blockly/BlocklyWindow.js
@@ -43,7 +43,7 @@ class BlocklyWindow extends Component {
 
   componentDidUpdate(props) {
     const workspace = Blockly.getMainWorkspace();
-    var xml = this.props.initialXml;
+    var xml = localStorage.getItem("autoSaveXML");
     if (props.selectedBoard !== this.props.selectedBoard) {
       // change board
       if(!xml) xml = initialXml;