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

menu anchor always on button

Browse Source
This commit is contained in:
fbruc03 2023-01-12 23:30:32 +01:00
parent 2c1594227e
commit e1b659cda5
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Navbar.js
View File

@ -69,6 +69,8 @@ const styles = (theme) => ({
class Navbar extends Component { class Navbar extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.langRef = React.createRef();
this.mcuRef = React.createRef();
this.state = { this.state = {
open: false, open: false,
isTourOpen: false, isTourOpen: false,
@ -145,7 +147,10 @@ class Navbar extends Component {
( (
<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={{ 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' } }} sx={{ display: { xs: 'none', md: 'block' } }}
> >
<FontAwesomeIcon <FontAwesomeIcon
@ -161,7 +166,10 @@ class Navbar extends Component {
) : ( ) : (
<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={{ 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 <FontAwesomeIcon
icon={faMicrochip} icon={faMicrochip}
@ -217,7 +225,10 @@ class Navbar extends Component {
( (
<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={{ 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' } }} sx={{ display: { xs: 'none', md: 'block' } }}
> >
<FontAwesomeIcon <FontAwesomeIcon
@ -233,7 +244,10 @@ class Navbar extends Component {
) : ( ) : (
<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={{ 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 <FontAwesomeIcon
icon={faEarthEurope} icon={faEarthEurope}