@ -3,31 +3,51 @@ import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image" import { StaticImage } from "gatsby-plugin-image"
import { Link as AnchorLink } from "react-scroll" ; import { Link as AnchorLink } from "react-scroll" ;
import { useLocation } from '@reach/router' ; import { useLocation } from '@reach/router' ;
import { disableBodyScroll , enableBodyScroll } from "body-scroll-lock" ;
const Header = ( { siteTitle, menu } ) => { const Header = ( { } ) => {
const ref = useRef ( null ) ;
const ref = useRef ( null ) ;
const location = useLocation ( ) ;
const location = useLocation ( ) ;
const [ menuH , setMenuH ] = useState ( 0 ) ;
const [ menuH , setMenuH ] = useState ( 0 ) ;
const [ burgerMenu , setBurgerMenu ] = useState ( 0 ) ;
const [ burgerMenu , setBurgerMenu ] = useState ( 0 ) ;
const menuGeneralClasses = "container top-0 mx-auto flex items-center sm:justify-between justify-center max-sm:flex-col max-sm:overflow-y-hidden max-sm:bg-black max-sm:fixed transition-all" ;
const menuGeneralClasses = "md:container max-md:w-full max-md:-mx-3 top-0 mx-auto flex items-center md:justify-between justify-center max-md:flex-col max-md:overflow-y-hidden max-md:bg-black max-md:fixed transition-all" ;
const burgerGeneralClasses = "bg-white w-7 h-[3px] before:w-7 before:h-[3px] before:bg-white before:block before:relative after:w-7 after:h-[3px] after:bg-white after:block after:relative transition-all before:transition-all after:transition-all" ;
const burgerActivation = ( ) => {
window . addEventListener ( "resize" , ( e ) => {
if ( window . screen . width > 767 ) {
setBurgerMenu ( 0 ) ;
enableBodyScroll ( document . body ) ;
}
} ) ;
if ( burgerMenu ) {
setBurgerMenu ( 0 ) ;
enableBodyScroll ( document . body ) ;
} else {
setBurgerMenu ( 1 ) ;
disableBodyScroll ( document . body ) ;
}
}
useEffect ( ( ) => {
useEffect ( ( ) => {
if ( location . pathname === '/' ) {
if ( location . pathname === '/' ) {
setMenuH ( ref . current . scrollHeight ) ;
setMenuH ( ref . current . scrollHeight ) ;
}
}
} , [ ] ) ;
} , [ location . pathname ] ) ;
return (
return (
< header className = "bg-black h-9 flex w-full fixed top-0 z-30" >
< header className = "bg-black h-9 flex w-full fixed top-0 z-30 max-md:justify-between max-md:px-3 max-md:items-center ">
< nav className = { burgerMenu ? menuGeneralClasses + " max-sm:h-screen max-sm:translate-y-0" : menuGeneralClasses + " max-sm:h-0 max-sm:-translate-y-full" } >
< nav className = { burgerMenu ? menuGeneralClasses + " max- md :h-screen max-md :translate-y-0" : menuGeneralClasses + " max- md :h-0 max-md :-translate-y-full"} >
< div className = "flex items-center" >
< div className = "flex items-center" >
< Link to = "/" className = "max-sm:hidden" > < StaticImage src = "../images/logo.svg" alt = "logo" placeholder = "none" className = "w-8 mr-5" / > < / Link >
< Link to = "/" className = "max- md :hidden"> < StaticImage src = "../images/logo.svg" alt = "logo" placeholder = "none" className = "w-8 mr-5" / > < / Link >
< a href = "tel:+79200745505" className = "text-white text-xs max-sm:text-xl max-sm:mb-12" > 8 ( 920 ) 074 55 - 05 < / a >
< a href = "tel:+79200745505" className = "text-white text-xs max- md :text-xl max-md :mb-12"> 8 ( 920 ) 074 55 - 05 < / a >
< / div >
< / div >
{ location . pathname === '/'
{ location . pathname === '/'
?
?
< ul className = 'flex items-center max-sm:flex-col' >
< ul className = 'flex items-center max- md :flex-col'>
< li className = "mr-12 max-sm:mr-0 text-white text-xs max-sm:text-lg max-sm:mb-3" > < AnchorLink className = "cursor-pointer" to = "about" smooth = { true } > О компании < / AnchorLink > < / li >
< li className = "mr-12 max- md :mr-0 text-white text-xs max-md :text-lg max-md :mb-3"> < AnchorLink className = "cursor-pointer" to = "about" smooth = { true } > О компании < / AnchorLink > < / li >
< li style = { { '--menu-h' : ` ${ menuH + 65 } px ` } } className = { "mr-12 max-sm:mr-0 text-white text-xs max-sm:text-lg max-sm:mb-3 relative [&>.drop-menu]:hover:h-[var(--menu-h)]" } >
< li style = { { '--menu-h' : ` ${ menuH + 65 } px ` } } className = { "mr-12 max- md :mr-0 text-white text-xs max-md :text-lg max-md :mb-3 relative [&>.drop-menu]:hover:h-[var(--menu-h)]"} >
< p className = "cursor-pointer" > Услуги < / p >
< p className = "cursor-pointer" > Услуги < / p >
< ul ref = { ref } className = "absolute flex flex-col justify-center drop-menu bg-black px-4 -left-3 h-0 overflow-hidden transition-all" >
< ul ref = { ref } className = "absolute flex flex-col justify-center drop-menu bg-black px-4 -left-3 h-0 overflow-hidden transition-all" >
< li className = "mr-0 mb-2" > < AnchorLink className = "cursor-pointer" to = "games" smooth = { true } > Бизнес - игры < / AnchorLink > < / li >
< li className = "mr-0 mb-2" > < AnchorLink className = "cursor-pointer" to = "games" smooth = { true } > Бизнес - игры < / AnchorLink > < / li >
@ -36,18 +56,24 @@ const Header = ({ siteTitle, menu }) => {
< li className = "mr-0" > < AnchorLink className = "cursor-pointer" to = "legosp" smooth = { true } > Lego SP < / AnchorLink > < / li >
< li className = "mr-0" > < AnchorLink className = "cursor-pointer" to = "legosp" smooth = { true } > Lego SP < / AnchorLink > < / li >
< / ul >
< / ul >
< / li >
< / li >
< li className = "mr-12 max- s m:mr-0 text-white text-xs max-s m:text-lg max-s m:mb-3"> < AnchorLink className = "cursor-pointer" to = "team" smooth = { true } > Наша команда < / AnchorLink > < / li >
< li className = "mr-12 max- md :mr-0 text-white text-xs max-md :text-lg max-md :mb-3"> < AnchorLink className = "cursor-pointer" to = "team" smooth = { true } > Наша команда < / AnchorLink > < / li >
< li className = "text-white text-xs max- s m:text-lg max-s m:mb-3"> < AnchorLink className = "cursor-pointer" to = "contacts" smooth = { true } > Контакты < / AnchorLink > < / li >
< li className = "text-white text-xs max- md :text-lg max-md :mb-3"> < AnchorLink className = "cursor-pointer" to = "contacts" smooth = { true } > Контакты < / AnchorLink > < / li >
< / ul >
< / ul >
:
:
< ul className = 'flex items-center last:[&>li]:mr-0' >
< ul className = 'flex items-center last:[&>li]:mr-0' >
< li className = "mr-12 max- s m:mr-0 text-white text-xs max-s m:text-lg max-s m:mb-3"> < Link to = "/" > Главная < / Link > < / li >
< li className = "mr-12 max- md :mr-0 text-white text-xs max-md :text-lg max-md :mb-3"> < Link to = "/" > Главная < / Link > < / li >
{ menu . map ( item =>
{ menu . map ( item =>
< li key = { item . id } className = "mr-12 max- s m:mr-0 text-white text-xs max-s m:text-lg max-s m:mb-3"> < AnchorLink className = "cursor-pointer" to = { item . to } smooth = { true } > { item . title } < / AnchorLink > < / li >
< li key = { item . id } className = "mr-12 max- md :mr-0 text-white text-xs max-md :text-lg max-md :mb-3"> < AnchorLink className = "cursor-pointer" to = { item . to } smooth = { true } > { item . title } < / AnchorLink > < / li >
) }
) }
< / ul >
< / ul >
}
}
< / nav >
< / nav >
< div className = "md:hidden" >
< a href = "tel:+79200745505" className = "text-white text-md" > 8 ( 920 ) 074 55 - 05 < / a >
< / div >
< div className = "md:hidden cursor-pointer" role = "presentation" onClick = { e => burgerActivation ( ) } onKeyDown = { e => this . handleKeyDown } >
< div className = { burgerMenu ? burgerGeneralClasses + ' before:rotate-45 before:top-0 after:-rotate-45 after:bottom-[3px]' : burgerGeneralClasses + ' before:top-[7px] after:bottom-[10px]' } > < / div >
< / div >
< / header >
< / header >
)
)
} }
