98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
'use client'
|
|
import EntGamers from '@/assets/logos/EntGamers'
|
|
import Menu from '@/components/layout/Menu'
|
|
import Tooltip from '@/components/ui/Tooltip'
|
|
import { css } from '@/styled-system/css'
|
|
import { Container } from '@/styled-system/jsx'
|
|
import { iconButton } from '@/styled-system/recipes'
|
|
import { faUser } from '@fortawesome/free-solid-svg-icons'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import NextLink from 'next/link'
|
|
import { useCallback, useEffect, useState, type FC } from 'react'
|
|
|
|
const Header: FC = () => {
|
|
const [isScrolled, setIsScrolled] = useState(typeof window !== 'undefined' ? window.scrollY > 0 : false)
|
|
const handleScroll = useCallback(() => {
|
|
if (typeof window === 'undefined') return
|
|
console.log(window.scrollY)
|
|
setIsScrolled(window.scrollY > 0)
|
|
}, [])
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<header
|
|
className={css({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'transparent',
|
|
color: 'text',
|
|
minHeight: '60px',
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
zIndex: 'sticky',
|
|
boxShadow: 'none',
|
|
transitionProperty: 'background-color, box-shadow',
|
|
transitionDuration: '0.25s',
|
|
transitionTimingFunction: 'easeInOut',
|
|
willChange: 'background-color, box-shadow',
|
|
'&[data-scrolled=true]': {
|
|
backgroundColor: 'surface',
|
|
boxShadow: '2px 2px 4px 0px rgba(0, 0, 0, 0.25)'
|
|
}
|
|
})}
|
|
data-scrolled={isScrolled}
|
|
>
|
|
<Container
|
|
className={css({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between'
|
|
})}
|
|
>
|
|
<div>
|
|
<NextLink
|
|
href="/"
|
|
>
|
|
<EntGamers
|
|
width="40px"
|
|
/>
|
|
</NextLink>
|
|
</div>
|
|
<div>
|
|
<Tooltip
|
|
title="Próximamente"
|
|
position="bottom"
|
|
>
|
|
<NextLink
|
|
href="/login"
|
|
className={
|
|
iconButton()
|
|
}
|
|
>
|
|
<FontAwesomeIcon icon={faUser} fixedWidth />
|
|
</NextLink>
|
|
</Tooltip>
|
|
<Menu />
|
|
</div>
|
|
</Container>
|
|
</header>
|
|
<div
|
|
className={css({
|
|
height: '60px'
|
|
})}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
export default Header
|