discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

fix

Browse Source
This commit is contained in:
Igor Lobanov 2022-09-15 20:18:07 +02:00
parent cc396da3ee
commit 38ba5be728
2 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Nav/Header.tsx
View File

@ -1,4 +1,4 @@
import {For, Show, createSignal, createMemo, createEffect, onMount} from 'solid-js' import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js'
import Private from './Private' import Private from './Private'
import Notifications from './Notifications' import Notifications from './Notifications'
import Icon from './Icon' import Icon from './Icon'
@ -20,6 +20,7 @@ const resources = [
export const Header = () => { export const Header = () => {
// signals // signals
const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
const [fixed, setFixed] = createSignal(false) const [fixed, setFixed] = createSignal(false)
const [visibleWarnings, setVisibleWarnings] = createSignal(false) const [visibleWarnings, setVisibleWarnings] = createSignal(false)
// stores // stores
@ -45,25 +46,29 @@ export const Header = () => {
const enterClick = route(() => showModal('auth')) const enterClick = route(() => showModal('auth'))
const bellClick = createMemo(() => (authorized() ? route(toggleWarnings) : enterClick)) const bellClick = createMemo(() => (authorized() ? route(toggleWarnings) : enterClick))
const root = null; const root = null
onMount(() => { onMount(() => {
let scrollTop = window.scrollY; let scrollTop = window.scrollY
window.addEventListener('scroll', () => { const handleScroll = () => {
const scrolledTop = scrollTop < window.scrollY; setIsScrollingBottom(window.scrollY > scrollTop)
scrollTop = window.scrollY
}
window.console.log(scrolledTop); window.addEventListener('scroll', handleScroll, { passive: true })
onCleanup(() => {
root.classList.toggle('header--scrolled-top', scrolledTop); window.removeEventListener('scroll', handleScroll)
root.classList.toggle('header--scrolled-bottom', !scrolledTop); })
})
scrollTop = window.scrollY;
});
});
return ( return (
<header ref={root}> <header
classList={{
['header--scrolled-top']: !getIsScrollingBottom(),
['header--scrolled-bottom']: getIsScrollingBottom()
}}
>
<Modal name="auth"> <Modal name="auth">
<AuthModal /> <AuthModal />
</Modal> </Modal>

2
src/layouts/zine.astro
View File

@ -21,7 +21,7 @@ router.open(Astro.url.pathname) // looks like doesn't work!
<title>{t('Discours')}</title> <title>{t('Discours')}</title>
</head> </head>
<body> <body>
<Header /> <Header client:load />
<main class="main-content"> <main class="main-content">
<Suspense> <Suspense>
<slot /> <slot />