header dark mode implemented

This commit is contained in:
Lucas Oliveira 2023-02-28 21:48:59 -03:00
commit b7cfbe6224

View file

@ -28,7 +28,7 @@ export default function Header({user, userNavigation}){
})
const {dark, setDark} = useContext(darkContext);
return (
<header className="relative flex h-16 w-full shrink-0 items-center bg-white">
<header className="relative flex h-16 w-full shrink-0 items-center bg-white dark:bg-slate-800">
{/* Logo area */}
<div className="static shrink-0">
<a
@ -51,14 +51,14 @@ export default function Header({user, userNavigation}){
<div className="ml-10 flex shrink-0 items-center space-x-10 pr-4">
<div className="flex items-center space-x-8">
<span className="inline-flex gap-6">
<button className="text-gray-400 hover:text-gray-500 dark:text-slate-700 dark:hover:text-slate-600" onClick={()=>{setDark(!dark)}}>
<button className="text-gray-400 hover:text-gray-500 " onClick={()=>{setDark(!dark)}}>
{dark ?
<SunIcon className="h-6 w-6" />
:
<MoonIcon className="h-6 w-6" />
}
</button>
<button type="button" {...triggerProps} className="-mx-1 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
<button type="button" {...triggerProps} className="-mx-1 rounded-full p-1 text-gray-400 hover:text-gray-500 relative" onClick={()=>{setNotificationCenter(false);setIsOpen(true)}}>
<span className="sr-only">View notifications</span>
{notificationCenter&&<div className='absolute top-[2px] w-2 h-2 rounded-full bg-red-600 right-[7px]'></div>}