39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import clsx from 'clsx';
|
|
import { Container } from '@/components/container';
|
|
import { HeaderLogo, HeaderTopbar } from '.';
|
|
import { useDemo2Layout } from '../';
|
|
import { useEffect } from 'react';
|
|
import { toAbsoluteUrl } from '@/utils';
|
|
|
|
const Header = () => {
|
|
const { headerSticky } = useDemo2Layout();
|
|
|
|
useEffect(() => {
|
|
if (headerSticky) {
|
|
document.body.setAttribute('data-sticky-header', 'on');
|
|
} else {
|
|
document.body.removeAttribute('data-sticky-header');
|
|
}
|
|
}, [headerSticky]);
|
|
|
|
return (
|
|
<header
|
|
className={clsx(
|
|
'flex items-center transition-[height] shrink-0 h-[--tw-header-height] bg-[length:600px] bg-no-repeat bg-red-600',
|
|
headerSticky &&
|
|
'transition-[height] fixed z-10 top-0 left-0 right-0 shadow-sm backdrop-blur-md bg-white/70 dark:bg-coal-500/70 dark:border-b dark:border-b-coal-100'
|
|
)}
|
|
style={{
|
|
backgroundImage: `url('${toAbsoluteUrl('/media/images/2600x1200/bg-14.png')}')`
|
|
}}
|
|
>
|
|
<Container className="flex justify-between items-center lg:gap-4">
|
|
<HeaderLogo />
|
|
<HeaderTopbar />
|
|
</Container>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export { Header };
|