[NP] start of dynamic notch
diff --git a/Components/NavBar.js b/Components/NavBar.js
index de7d12e..7ab5e79 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -15,12 +15,51 @@
class NavBar extends Component {
constructor(props) {
super(props);
+ this.showSubBar = this.showSubBar.bind(this);
+ this.hideSubBar = this.hideSubBar.bind(this);
+ this.showMessage = this.showMessage.bind(this);
+ this.state = {
+ subBar: false,
+ element: <></>
+ }
+ this.displayName = "NavBar";
+ }
+
+ showSubBar(element, timeout) {
+ this.setState({
+ subBar: true,
+ element: element
+ })
+ if (timeout) {
+ setTimeout(() => {
+ this.setState({
+ subBar: false,
+ element: element
+ })
+ setTimeout(() => {
+ this.setState({
+ subBar: false,
+ element: <></>
+ })
+ }, 0.31 * 1000)
+ }, timeout * 1000)
+ }
+ }
+
+ hideSubBar() {
+ this.setState({
+ subBar: false
+ })
+ }
+
+ showMessage(text) {
+ this.showSubBar(<p className={Styles.message}>{text}</p>, 5)
}
render() {
return (
- <>
- <div className={Styles.container}>
+ <div className={Styles.cutoffContainer}>
+ <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>
<a href="#skipNav" className={Styles.skipNav}>Skip navigation</a>
<a className={Styles.icon} href="/"><img alt="Clicks" className={Styles.icon} src="https://assets.clicks.codes/web/logos/clicks.svg" /></a>
<Divider />
@@ -31,8 +70,11 @@
<a className={Styles.icon} href="/hooky"><img alt="Hooky" className={Styles.icon} src="https://assets.clicks.codes/bots/hooky/circle.svg" /></a>
<Divider />
<ThemeChangeButton/>
+ <Divider />
+ <a className={Styles.icon} onClick={() => {this.showMessage("You're mum")}}>More</a>
</div>
- </>
+ <div className={Styles.container + " " + (this.state.subBar ? Styles.slideUp : null)}>{this.state.element}</div>
+ </div>
)
}
}