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

Fixed header

Browse Source
This commit is contained in:
kvakazyambra 2022-10-04 00:44:21 +03:00
parent fff349d478
commit c28a824ebf
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Nav/Header.module.scss
View File

@ -169,7 +169,7 @@
} }
} }
.headerScrolledBottom { .headerWithTitle.headerScrolledBottom {
.mainNavigation, .mainNavigation,
.userControl { .userControl {
opacity: 0; opacity: 0;
@ -296,7 +296,7 @@
transition: opacity 0.3s; transition: opacity 0.3s;
z-index: 1; z-index: 1;
.headerScrolledBottom & { .headerWithTitle.headerScrolledBottom & {
transition: opacity 0.3s, z-index 0s 0.3s; transition: opacity 0.3s, z-index 0s 0.3s;
opacity: 0; opacity: 0;
z-index: -1; z-index: -1;

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

@ -72,6 +72,8 @@ export const Header = (props: Props) => {
onMount(() => { onMount(() => {
let scrollTop = window.scrollY let scrollTop = window.scrollY
window.console.log(props.title)
const handleScroll = () => { const handleScroll = () => {
setIsScrollingBottom(window.scrollY > scrollTop) setIsScrollingBottom(window.scrollY > scrollTop)
setIsScrolled(window.scrollY > 0) setIsScrolled(window.scrollY > 0)
@ -90,7 +92,8 @@ export const Header = (props: Props) => {
classList={{ classList={{
[styles.headerFixed]: props.isHeaderFixed, [styles.headerFixed]: props.isHeaderFixed,
[styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(), [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
[styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled() [styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled(),
[styles.headerWithTitle]: props.title
}} }}
> >
<Modal name="auth"> <Modal name="auth">
@ -104,7 +107,9 @@ export const Header = (props: Props) => {
</a> </a>
</div> </div>
<div class={clsx(styles.mainNavigationWrapper, 'col')}> <div class={clsx(styles.mainNavigationWrapper, 'col')}>
<div class={styles.articleHeader}>{props.title}</div> <Show when={props.title}>
<div class={styles.articleHeader}>{props.title}</div>
</Show>
<ul <ul
class={clsx(styles.mainNavigation, 'col text-xl inline-flex')} class={clsx(styles.mainNavigation, 'col text-xl inline-flex')}
@ -156,14 +161,16 @@ export const Header = (props: Props) => {
<Private /> <Private />
</Show> </Show>
</div> </div>
<div class={styles.articleControls}> <Show when={props.title}>
<Icon name="share-outline" class={styles.icon} /> <div class={styles.articleControls}>
<a href="#comments"> <Icon name="share-outline" class={styles.icon} />
<Icon name="comments-outline" class={styles.icon} /> <a href="#comments">
</a> <Icon name="comments-outline" class={styles.icon} />
<Icon name="pencil-outline" class={styles.icon} /> </a>
<Icon name="bookmark" class={styles.icon} /> <Icon name="pencil-outline" class={styles.icon} />
</div> <Icon name="bookmark" class={styles.icon} />
</div>
</Show>
</div> </div>
<div class={styles.burgerContainer}> <div class={styles.burgerContainer}>
<div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}> <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>