63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import {Burger, Group, Image, Text} from "@mantine/core";
|
|
import {ThemeToggle} from "./subs/ThemeToggle.tsx";
|
|
import React, {useEffect, useState} from "react";
|
|
|
|
|
|
export function PageHeader({opened, toggle, appendTitle}: {opened: boolean, toggle: () => void, appendTitle?: string}) {
|
|
const [width, setWidth] = useState(window.innerWidth)
|
|
// const [height, setHeight] = useState(window.innerHeight)
|
|
const [title, setTitle] = useState('HMS Dashboard');
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setWidth(window.innerWidth);
|
|
// setHeight(window.innerHeight);
|
|
};
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
};
|
|
}, []);
|
|
|
|
// useEffect(() => {
|
|
// const titleElement = document.querySelector('title');
|
|
// const observer = new MutationObserver((mutations) => {
|
|
// mutations.forEach((mutation) => {
|
|
// mutation.target.textContent && setTitle(mutation.target.textContent);
|
|
// });
|
|
// });
|
|
//
|
|
// if (titleElement) {
|
|
// observer.observe(titleElement, { childList: true });
|
|
// }
|
|
//
|
|
// return () => {
|
|
// observer.disconnect();
|
|
// };
|
|
// }, []);
|
|
|
|
|
|
return (
|
|
<Group justify="space-between">
|
|
<Group>
|
|
<Burger
|
|
opened={opened}
|
|
onClick={toggle}
|
|
hiddenFrom="sm"
|
|
size="sm"
|
|
/>
|
|
<Image src="/favicon.ico" w={30} h={30}/>
|
|
{width >= 290 && <Text size="lg" fw={700}>{title}</Text>}
|
|
{appendTitle && <Text size="sm">{appendTitle}</Text>}
|
|
</Group>
|
|
|
|
<Group>
|
|
<ThemeToggle/>
|
|
</Group>
|
|
|
|
</Group>
|
|
)
|
|
}
|