diff options
author | Vitaly Takmazov | 2022-10-28 17:07:27 +0300 |
---|---|---|
committer | Vitaly Takmazov | 2023-01-13 10:37:58 +0300 |
commit | 617f6c7a668af8139377b12079554e6e21e9a637 (patch) | |
tree | 25c57ca37b736ccedddd49b20c9d3578a0ef0f95 /vnext/src | |
parent | d724dc5ff68b8656d76eec0b4733ba166f9fa8c9 (diff) |
Drop scrolling header
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/App.js | 51 |
1 files changed, 2 insertions, 49 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index c542dec5..e6798b31 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -1,6 +1,5 @@ import { useState, useEffect, useRef } from 'react'; import { Route, Link, Routes } from 'react-router-dom'; -import { useScroll, useRafState } from 'react-use'; import qs from 'qs'; import svg4everybody from 'svg4everybody'; @@ -20,10 +19,6 @@ import { useCookies } from 'react-cookie'; import { me } from './api'; -const elClassHidden = 'header--hidden'; - -const elClassTop = 'content--top'; - /** * */ @@ -58,48 +53,6 @@ export default function App({ footer }) { }); }; - const [scrollState, setScrollState] = useRafState({ - hidden: false, - top: false, - prevScroll: 0 - }); - - let { x, y } = useScroll(contentRef); - - useEffect(() => { - let dHeight = contentRef.current.scrollHeight; - let wHeight = contentRef.current.clientHeight; - setScrollState((scrollState) => { - let wScrollDiff = scrollState.prevScroll - y; - let hidden = scrollState.hidden; - let top = scrollState.top; - if (y <= 0) { - // scrolled to the very top; element sticks to the top - hidden = false; - top = true; - } else if ((wScrollDiff > 0) && hidden) { - // scrolled up; element slides in - hidden = false; - top = false; - } else if (wScrollDiff < 0) { - // scrolled down - if ((y + wHeight) >= dHeight && hidden) { - // scrolled to the very bottom; element slides in - hidden = false; - top = false; - } else { - // scrolled down; element slides out - hidden = true; - top = false; - } - } - return { - hidden: hidden, - top: top, - prevScroll: y - }; - }); - }, [x, y, setScrollState]); const [hash, setHash] = useState(cookie.hash); const [eventSource, setEventSource] = /** @param EventSource? */ useState({}); @@ -151,7 +104,7 @@ export default function App({ footer }) { }; return ( <> - <Header visitor={visitor} className={scrollState.hidden ? elClassHidden : ''} /> + <Header visitor={visitor} /> <div id="content_wrapper"> { <aside id="sidebar"> @@ -185,7 +138,7 @@ export default function App({ footer }) { </div> </aside> } - <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}> + <section id="content" ref={contentRef}> <Routes> <Route exact path="/" element={<Discussions visitor={visitor} />} /> <Route exact path="/home" element={<Home visitor={visitor} />} /> |