blob: 7ab5e798168d2482d6cef51c4954d4b1751a142d [file] [log] [blame]
pineafan54a1e552021-09-03 17:51:18 +01001import React, { Component } from "react";
pineafane0283a82022-02-13 10:05:56 +00002import Styles from '../styles/Components/navbar.module.css';
Skyler Turner16c08d32021-11-04 20:06:50 +00003import ThemeChangeButton from './ThemeChangeButton';
pineafandf39fd42021-09-04 16:05:27 +01004
pineafanff3d4522022-05-06 19:51:02 +01005class Divider extends Component {
6 render() {
7 return (
8 <>
9 <div className={Styles.divider}></div>
10 </>
11 )
12 }
13}
pineafana5ce9102021-09-02 17:21:31 +010014
15class NavBar extends Component {
pineafanaa9c4fd2022-06-10 19:58:10 +010016 constructor(props) {
17 super(props);
pineafan7bd0ad62022-10-26 22:11:29 +010018 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)
pineafanaa9c4fd2022-06-10 19:58:10 +010057 }
pineafan54a1e552021-09-03 17:51:18 +010058
pineafanaa9c4fd2022-06-10 19:58:10 +010059 render() {
60 return (
pineafan7bd0ad62022-10-26 22:11:29 +010061 <div className={Styles.cutoffContainer}>
62 <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>
Skyler Turner899f8ff2022-05-07 15:12:20 +010063 <a href="#skipNav" className={Styles.skipNav}>Skip navigation</a>
pineafan3b0852d2022-05-06 20:39:59 +010064 <a className={Styles.icon} href="/"><img alt="Clicks" className={Styles.icon} src="https://assets.clicks.codes/web/logos/clicks.svg" /></a>
pineafanff3d4522022-05-06 19:51:02 +010065 <Divider />
Skyler Greyd4f3b732022-10-07 13:24:16 +010066 <a className={Styles.icon} href="/gps"><img alt="GPS" className={Styles.icon} src="https://assets.clicks.codes/bots/gps/circle.svg" /></a>
pineafan3b0852d2022-05-06 20:39:59 +010067 <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>
pineafan3b0852d2022-05-06 20:39:59 +010070 <a className={Styles.icon} href="/hooky"><img alt="Hooky" className={Styles.icon} src="https://assets.clicks.codes/bots/hooky/circle.svg" /></a>
pineafanff3d4522022-05-06 19:51:02 +010071 <Divider />
72 <ThemeChangeButton/>
pineafan7bd0ad62022-10-26 22:11:29 +010073 <Divider />
74 <a className={Styles.icon} onClick={() => {this.showMessage("You're mum")}}>More</a>
pineafana5ce9102021-09-02 17:21:31 +010075 </div>
pineafan7bd0ad62022-10-26 22:11:29 +010076 <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>{this.state.element}</div>
77 </div>
pineafanaa9c4fd2022-06-10 19:58:10 +010078 )
79 }
pineafana5ce9102021-09-02 17:21:31 +010080}
81
Skyler Turner899f8ff2022-05-07 15:12:20 +010082export default NavBar;