Revert "intersectionobserver shenanigang (do not work)"
This reverts commit d9f305e30b.
This commit is contained in:
parent
d9f305e30b
commit
e7a3abe5fd
|
|
@ -2,7 +2,7 @@ import {
|
||||||
Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarText, NavbarToggler, NavItem, NavLink
|
Button, ButtonGroup, Collapse, Nav, Navbar, NavbarBrand, NavbarText, NavbarToggler, NavItem, NavLink
|
||||||
} from 'reactstrap';
|
} from 'reactstrap';
|
||||||
import {connect} from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import React, {useRef, useEffect, useState} from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import {logout} from '../api';
|
import {logout} from '../api';
|
||||||
import {notify} from 'react-notify-toast';
|
import {notify} from 'react-notify-toast';
|
||||||
|
|
@ -12,32 +12,7 @@ export class TurniereNavigation extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.toggle = this.toggle.bind(this);
|
this.toggle = this.toggle.bind(this);
|
||||||
this.togglerRef = React.createRef();
|
this.state = {collapsed: true};
|
||||||
this.state = {
|
|
||||||
collapsed: true,
|
|
||||||
isToggleVisible: true
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const observer = new IntersectionObserver(
|
|
||||||
([entry]) => {
|
|
||||||
this.setState({isToggleVisible: entry.isIntersecting});
|
|
||||||
},
|
|
||||||
{threshold: 0.1}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (this.togglerRef.current) {
|
|
||||||
observer.observe(this.togglerRef.current);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.observer = observer;
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (this.observer) {
|
|
||||||
this.observer.disconnect();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle() {
|
toggle() {
|
||||||
|
|
@ -46,7 +21,6 @@ export class TurniereNavigation extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {tournament} = this.props;
|
const {tournament} = this.props;
|
||||||
const {isToggleVisible} = this.state;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Navbar color="light" light expand="lg" sticky="top">
|
<Navbar color="light" light expand="lg" sticky="top">
|
||||||
|
|
@ -56,8 +30,7 @@ export class TurniereNavigation extends React.Component {
|
||||||
<span className={'hide-below-340-w'}>Spielzeit: </span><Timer timerEnd={tournament.timerEnd} />
|
<span className={'hide-below-340-w'}>Spielzeit: </span><Timer timerEnd={tournament.timerEnd} />
|
||||||
</NavbarText>
|
</NavbarText>
|
||||||
}
|
}
|
||||||
{isToggleVisible && <NavbarText>HALLO WELT</NavbarText>}
|
<NavbarToggler onClick={this.toggle}/>
|
||||||
<NavbarToggler ref={this.togglerRef} onClick={this.toggle}/>
|
|
||||||
<Collapse isOpen={!this.state.collapsed} navbar>
|
<Collapse isOpen={!this.state.collapsed} navbar>
|
||||||
<NavLinks/>
|
<NavLinks/>
|
||||||
<div className="ms-auto">
|
<div className="ms-auto">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue