mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-09-19 22:15:53 +02:00
70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
import { useState } from 'react'
|
|
|
|
import { HamburgerIcon } from './HamburgerIcon'
|
|
import { BrandLogo } from './BrandLogo'
|
|
import { Navigation } from './Navigation'
|
|
|
|
export const Header: React.FC = () => {
|
|
const [isActive, setIsActive] = useState(false)
|
|
|
|
const handleToggleNavbar = (): void => {
|
|
setIsActive(!isActive)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<header className='Header'>
|
|
<div className='container'>
|
|
<BrandLogo />
|
|
<HamburgerIcon
|
|
isActive={isActive}
|
|
handleToggleNavbar={handleToggleNavbar}
|
|
/>
|
|
<Navigation isActive={isActive} />
|
|
</div>
|
|
</header>
|
|
|
|
<style jsx>
|
|
{`
|
|
.Header {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 1rem;
|
|
|
|
border-bottom: var(--border-header-footer);
|
|
background-color: var(--color-background);
|
|
}
|
|
@media (min-width: 992px) {
|
|
.Header {
|
|
display: flex;
|
|
flex-basis: auto;
|
|
flex-flow: row nowrap;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
.Header > .container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
@media (min-width: 992px) {
|
|
.Header > .container {
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
`}
|
|
</style>
|
|
</>
|
|
)
|
|
}
|