78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
import { useSidebarContext } from '../context/SidebarContext';
|
|
import { DarkThemeToggle, Navbar } from 'flowbite-react';
|
|
import Image from 'next/image';
|
|
|
|
function Header() {
|
|
const { isOpenOnSmallScreens, isPageWithSidebar, setOpenOnSmallScreens } =
|
|
useSidebarContext();
|
|
|
|
return (
|
|
<header className="sticky top-0 z-20">
|
|
<Navbar fluid>
|
|
{isPageWithSidebar && (
|
|
<button
|
|
aria-controls="sidebar"
|
|
aria-expanded="true"
|
|
className="mr-2 cursor-pointer rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:bg-gray-700 dark:focus:ring-gray-700 lg:hidden"
|
|
onClick={() => setOpenOnSmallScreens(!isOpenOnSmallScreens)}
|
|
>
|
|
{isOpenOnSmallScreens ? (
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<svg
|
|
className="h-6 w-6"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
)}
|
|
<Navbar.Brand href="/">
|
|
<Image
|
|
alt="Flowbite logo"
|
|
height="24"
|
|
src="/favicon.png"
|
|
width="24"
|
|
/>
|
|
<span className="self-center whitespace-nowrap px-3 text-xl font-semibold dark:text-white">
|
|
Flowbite
|
|
</span>
|
|
</Navbar.Brand>
|
|
<div className="flex md:order-2">
|
|
<Navbar.Toggle />
|
|
<DarkThemeToggle />
|
|
</div>
|
|
<Navbar.Collapse>
|
|
<Navbar.Link href="/" active>
|
|
Home
|
|
</Navbar.Link>
|
|
<Navbar.Link href="/">About</Navbar.Link>
|
|
<Navbar.Link href="/">Services</Navbar.Link>
|
|
<Navbar.Link href="/">Pricing</Navbar.Link>
|
|
<Navbar.Link href="/">Contact</Navbar.Link>
|
|
</Navbar.Collapse>
|
|
</Navbar>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Header;
|