09.02.2021
diff --git a/Components/NavBar.js b/Components/NavBar.js
index 946b7f0..a736c37 100644
--- a/Components/NavBar.js
+++ b/Components/NavBar.js
@@ -7,7 +7,48 @@
this.state = {
isOpen: false
}
+ this.isTouchDevice = false
}
+
+ componentDidMount() {
+ let hasTouchScreen = false;
+ if ("maxTouchPoints" in navigator) {
+ hasTouchScreen = navigator.maxTouchPoints > 0;
+ } else if ("msMaxTouchPoints" in navigator) {
+ hasTouchScreen = navigator.msMaxTouchPoints > 0;
+ } else {
+ const mQ = window.matchMedia && matchMedia("(pointer:coarse)");
+ if (mQ && mQ.media === "(pointer:coarse)") {
+ hasTouchScreen = !!mQ.matches;
+ } else if ("orientation" in window) {
+ hasTouchScreen = true;
+ } else {
+ var UA = navigator.userAgent;
+ hasTouchScreen = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
+ }
+ }
+ if (hasTouchScreen) {
+ this.isTouchDevice = true
+ } else {
+ this.isTouchDevice = false
+ }
+ }
+
+ onEnter() {
+ if ( !this.isTouchDevice ) {
+ return this.toggleVertical(this, true)
+ }
+ }
+
+ onLeave() {
+ return this.toggleVertical(this, false)
+ }
+
+ onClick() {
+ if ( this.isTouchDevice ) {
+ return this.toggleVertical(this)
+ }
+ }
toggleVertical(prevState, force=null) {
this.setState(prevState => ({
@@ -18,18 +59,18 @@
render() {
return (
<>
- <div className={Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null)} onMouseLeave={() => {this.toggleVertical(this.state, false)}}>
+ <div className={Styles.container + " " + (this.state.isOpen ? Styles.containerOpen : null)} onMouseLeave={() => {this.onLeave()}}>
<div className={Styles.group}>
- <img className={Styles.headerIcon} src="/Icons/CMP.svg" onClick={() => {this.toggleVertical(this.state)}}/>
- <a href="/"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
- <a href="/gps"><img className={Styles.icon} src="/Icons/GS.svg"/></a>
- <a href="/rsm"><img className={Styles.icon} src="/Icons/RM.svg"/></a>
- <a href="/clicksforms"><img className={Styles.icon} src="/Icons/CF.svg"/></a>
- {/* <a href="/castaway"><img className={Styles.icon} src="/Icons/CA.svg"/></a> */}
+ <img className={Styles.headerIcon} src="/Icons/CMP.svg" onMouseEnter={() => {this.onEnter()}} onClick={() => {this.onClick()}}/>
+ <a href="/#"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
+ <a href="/gps#"><img className={Styles.icon} src="/Icons/GS.svg"/></a>
+ <a href="/rsm#"><img className={Styles.icon} src="/Icons/RM.svg"/></a>
+ <a href="/clicksforms#"><img className={Styles.icon} src="/Icons/CF.svg"/></a>
+ {/* <a href="/castaway#"><img className={Styles.icon} src="/Icons/CA.svg"/></a> */}
{/* <a href="https://clcks.dev"><img className={Styles.icon} src="/Icons/CL.svg"/></a> */}
</div>
<div className={Styles.group}>
- <a href="/"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
+ <a href="/#"><img className={Styles.icon} src="/Icons/CMP.svg"/></a>
</div>
</div>
</>