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>
|
||
|
</>
|
||
|
)
|
||
|
}
|