| 9 | } |
| 10 | |
| 11 | class TopMenu extends React.Component<TopMenuProps> { |
| 12 | state = { |
| 13 | showHelp: false |
| 14 | } |
| 15 | |
| 16 | handleToggleHelp = () => { |
| 17 | this.setState({ showHelp: !this.state.showHelp }) |
| 18 | } |
| 19 | |
| 20 | handleLogoutClick = () => { |
| 21 | logout(true) |
| 22 | } |
| 23 | |
| 24 | handleDarkModeClick = () => { |
| 25 | this.setStoredTheme(this.getPreferredTheme() === "dark" ? "light" : "dark") |
| 26 | this.setTheme(this.getPreferredTheme()) |
| 27 | } |
| 28 | |
| 29 | handleLanguageSwitch = (language: string) => { |
| 30 | this.props.i18n.changeLanguage(language) |
| 31 | } |
| 32 | |
| 33 | getStoredTheme = () => localStorage.getItem('theme') |
| 34 | setStoredTheme = (theme: string) => localStorage.setItem('theme', theme) |
| 35 | |
| 36 | getPreferredTheme = () => { |
| 37 | const storedTheme = this.getStoredTheme() |
| 38 | if (storedTheme) { |
| 39 | return storedTheme |
| 40 | } |
| 41 | |
| 42 | return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' |
| 43 | } |
| 44 | |
| 45 | setTheme = (theme: string) => { |
| 46 | document.documentElement.setAttribute('data-bs-theme', theme) |
| 47 | } |
| 48 | |
| 49 | componentDidMount() { |
| 50 | this.setTheme(this.getPreferredTheme()) |
| 51 | } |
| 52 | |
| 53 | renderLanguageDropdownItem = (language: string, label: string) => ( |
| 54 | <Dropdown.Item onClick={() => this.handleLanguageSwitch(language)}> |
| 55 | <Form.Check type="radio" name="language"> |
| 56 | <FontAwesomeIcon icon={['fas', 'check']} className={this.props.i18n.language === language ? 'me-1 selected' : 'me-1'} /> {label} |
| 57 | </Form.Check> |
| 58 | </Dropdown.Item> |
| 59 | ) |
| 60 | |
| 61 | render() { |
| 62 | const helpButton = this.props.loggedIn ? ( |
| 63 | <> |
| 64 | <Button id="infoButton" type="submit" variant="link" size="lg" onClick={this.handleToggleHelp} title={this.props.i18n.t("top_menu.help")}> |
| 65 | <FontAwesomeIcon icon={['fas', 'circle-info']} /> |
| 66 | </Button> |
| 67 | <Modal size="lg" show={this.state.showHelp} onHide={this.handleToggleHelp}> |
| 68 | <Modal.Header closeButton> |