// @ts-nocheck import { useState, useEffect } from 'react' import styled from 'styled-components' import clsx from 'clsx' import Nav from './Nav' import Logo from './Logo' export default function Header () { const [scrollY, setScrollY] = useState(0) const handleScroll = () => { const offset = window.scrollY setScrollY(offset) } useEffect(() => { window.addEventListener('scroll', handleScroll) return () => { window.removeEventListener('scroll', handleScroll) } }, []) return ( <Wrapper className={clsx({ active: scrollY > 10 })}> <Logo active={scrollY > 10} /> <Nav /> </Wrapper> ) } const Wrapper = styled.div` display: flex; align-items: center; height: 8.125rem; max-height: 8.125rem; padding: 1.875rem 5rem; background-color: rgba(0, 0, 0, 0); position: fixed; top: 0; right: 0; left: 0; z-index: 100; color: #fff; &.active { background-color: #fff; box-shadow: 0 6px 9px 0 rgba(0, 0, 0, .16); color: #0072CE; padding: .5rem 5rem; max-height: 5.5rem; transition: background-color 1s, box-shadow .2s, max-height .2s; } `