You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import styles from './topBar.module.scss';
|
|
import { LangSwitcher } from '@/components/langSwitcher';
|
|
import { Logo, LogoType } from '@/components/logo';
|
|
import { GithubLink } from '@/components/githubLink';
|
|
import { GooglePlayLink } from '@/components/googlePlayLink';
|
|
import { useRef } from 'react';
|
|
import useScroll from '@/utils/useScroll';
|
|
import { CursorEffect } from '@/components/cursor';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import { TelegramLink } from '../telegramLink';
|
|
|
|
type TopBarProps = {
|
|
notHide?: boolean;
|
|
};
|
|
|
|
export function TopBar(props: TopBarProps) {
|
|
const { notHide = false } = props;
|
|
const router = useRouter();
|
|
const rootRef = useRef<HTMLDivElement>(null);
|
|
|
|
useScroll((scrollY, deltaTime, time) => {
|
|
if (notHide) {
|
|
return;
|
|
}
|
|
|
|
if (rootRef.current) {
|
|
rootRef.current.style.transform = `translate3D(0, ${Math.max(-Math.expm1(scrollY / 6), -400)}px, 1000px)`;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className={styles.root} ref={rootRef}>
|
|
{router.pathname === '/' && (
|
|
<Logo className={styles.logo} variant={LogoType.Full} />
|
|
)}
|
|
{router.pathname !== '/' && (
|
|
<CursorEffect
|
|
cursorPadding={4}
|
|
cursorBorderRadius={26}
|
|
className={styles.logo}
|
|
>
|
|
<Link href="/" className={styles.homeLink}>
|
|
<Logo variant={LogoType.Full} />
|
|
</Link>
|
|
</CursorEffect>
|
|
)}
|
|
<GooglePlayLink className={styles.googlePlayLink} />
|
|
<GithubLink />
|
|
<TelegramLink />
|
|
<LangSwitcher />
|
|
</div>
|
|
);
|
|
} |