pineafan | 54a1e55 | 2021-09-03 17:51:18 +0100 | [diff] [blame] | 1 | import React, { Component } from "react"; |
pineafan | e0283a8 | 2022-02-13 10:05:56 +0000 | [diff] [blame] | 2 | import Styles from '../styles/Components/navbar.module.css'; |
Skyler Turner | 16c08d3 | 2021-11-04 20:06:50 +0000 | [diff] [blame] | 3 | import ThemeChangeButton from './ThemeChangeButton'; |
pineafan | df39fd4 | 2021-09-04 16:05:27 +0100 | [diff] [blame] | 4 | |
pineafan | ff3d452 | 2022-05-06 19:51:02 +0100 | [diff] [blame] | 5 | class Divider extends Component { |
| 6 | render() { |
| 7 | return ( |
| 8 | <> |
| 9 | <div className={Styles.divider}></div> |
| 10 | </> |
| 11 | ) |
| 12 | } |
| 13 | } |
pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 14 | |
| 15 | class NavBar extends Component { |
pineafan | aa9c4fd | 2022-06-10 19:58:10 +0100 | [diff] [blame] | 16 | constructor(props) { |
| 17 | super(props); |
pineafan | 7bd0ad6 | 2022-10-26 22:11:29 +0100 | [diff] [blame^] | 18 | this.showSubBar = this.showSubBar.bind(this); |
| 19 | this.hideSubBar = this.hideSubBar.bind(this); |
| 20 | this.showMessage = this.showMessage.bind(this); |
| 21 | this.state = { |
| 22 | subBar: false, |
| 23 | element: <></> |
| 24 | } |
| 25 | this.displayName = "NavBar"; |
| 26 | } |
| 27 | |
| 28 | showSubBar(element, timeout) { |
| 29 | this.setState({ |
| 30 | subBar: true, |
| 31 | element: element |
| 32 | }) |
| 33 | if (timeout) { |
| 34 | setTimeout(() => { |
| 35 | this.setState({ |
| 36 | subBar: false, |
| 37 | element: element |
| 38 | }) |
| 39 | setTimeout(() => { |
| 40 | this.setState({ |
| 41 | subBar: false, |
| 42 | element: <></> |
| 43 | }) |
| 44 | }, 0.31 * 1000) |
| 45 | }, timeout * 1000) |
| 46 | } |
| 47 | } |
| 48 | |
| 49 | hideSubBar() { |
| 50 | this.setState({ |
| 51 | subBar: false |
| 52 | }) |
| 53 | } |
| 54 | |
| 55 | showMessage(text) { |
| 56 | this.showSubBar(<p className={Styles.message}>{text}</p>, 5) |
pineafan | aa9c4fd | 2022-06-10 19:58:10 +0100 | [diff] [blame] | 57 | } |
pineafan | 54a1e55 | 2021-09-03 17:51:18 +0100 | [diff] [blame] | 58 | |
pineafan | aa9c4fd | 2022-06-10 19:58:10 +0100 | [diff] [blame] | 59 | render() { |
| 60 | return ( |
pineafan | 7bd0ad6 | 2022-10-26 22:11:29 +0100 | [diff] [blame^] | 61 | <div className={Styles.cutoffContainer}> |
| 62 | <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}> |
Skyler Turner | 899f8ff | 2022-05-07 15:12:20 +0100 | [diff] [blame] | 63 | <a href="#skipNav" className={Styles.skipNav}>Skip navigation</a> |
pineafan | 3b0852d | 2022-05-06 20:39:59 +0100 | [diff] [blame] | 64 | <a className={Styles.icon} href="/"><img alt="Clicks" className={Styles.icon} src="https://assets.clicks.codes/web/logos/clicks.svg" /></a> |
pineafan | ff3d452 | 2022-05-06 19:51:02 +0100 | [diff] [blame] | 65 | <Divider /> |
Skyler Grey | d4f3b73 | 2022-10-07 13:24:16 +0100 | [diff] [blame] | 66 | <a className={Styles.icon} href="/gps"><img alt="GPS" className={Styles.icon} src="https://assets.clicks.codes/bots/gps/circle.svg" /></a> |
pineafan | 3b0852d | 2022-05-06 20:39:59 +0100 | [diff] [blame] | 67 | <a className={Styles.icon} href="/rsm"><img alt="RSM" className={Styles.icon} src="https://assets.clicks.codes/bots/rsm/circle.svg" /></a> |
| 68 | {/* <a className={Styles.icon} href="/nucleus#"><img alt="Nucleus" className={Styles.icon} src="https://assets.clicks.codes/bots/nucleus/circle.svg" /></a> */} |
| 69 | <a className={Styles.icon} href="/clicksforms"><img alt="ClicksForms" className={Styles.icon} src="https://assets.clicks.codes/bots/clicksforms/circle.svg" /></a> |
pineafan | 3b0852d | 2022-05-06 20:39:59 +0100 | [diff] [blame] | 70 | <a className={Styles.icon} href="/hooky"><img alt="Hooky" className={Styles.icon} src="https://assets.clicks.codes/bots/hooky/circle.svg" /></a> |
pineafan | ff3d452 | 2022-05-06 19:51:02 +0100 | [diff] [blame] | 71 | <Divider /> |
| 72 | <ThemeChangeButton/> |
pineafan | 7bd0ad6 | 2022-10-26 22:11:29 +0100 | [diff] [blame^] | 73 | <Divider /> |
| 74 | <a className={Styles.icon} onClick={() => {this.showMessage("You're mum")}}>More</a> |
pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 75 | </div> |
pineafan | 7bd0ad6 | 2022-10-26 22:11:29 +0100 | [diff] [blame^] | 76 | <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>{this.state.element}</div> |
| 77 | </div> |
pineafan | aa9c4fd | 2022-06-10 19:58:10 +0100 | [diff] [blame] | 78 | ) |
| 79 | } |
pineafan | a5ce910 | 2021-09-02 17:21:31 +0100 | [diff] [blame] | 80 | } |
| 81 | |
Skyler Turner | 899f8ff | 2022-05-07 15:12:20 +0100 | [diff] [blame] | 82 | export default NavBar; |