83 lines
3.5 KiB
JavaScript
83 lines
3.5 KiB
JavaScript
import { themeChange } from 'theme-change'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import BellIcon from '@heroicons/react/24/outline/BellIcon'
|
|
import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon'
|
|
import MoonIcon from '@heroicons/react/24/outline/MoonIcon'
|
|
import SunIcon from '@heroicons/react/24/outline/SunIcon'
|
|
import { openRightDrawer } from './features/common/rightDrawerSlice'
|
|
import { RIGHT_DRAWER_TYPES } from '../../../public/utils/globalConstantUtil'
|
|
import { Link } from '@inertiajs/react'
|
|
import { useForm, usePage } from '@inertiajs/react'
|
|
|
|
function Header() {
|
|
const dispatch = useDispatch()
|
|
const { noOfNotifications, pageTitle } = useSelector(state => state.header)
|
|
|
|
const [theme, setTheme] = useState(localStorage.getItem("theme") ||
|
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light")
|
|
);
|
|
|
|
const { auth } = usePage().props
|
|
|
|
useEffect(() => {
|
|
themeChange(false);
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
localStorage.setItem("theme", theme);
|
|
}, [theme]);
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(prevTheme => prevTheme === "dark" ? "light" : "dark");
|
|
}
|
|
|
|
// const openNotification = () => {
|
|
// dispatch(openRightDrawer({ header: "Notifications", bodyType: RIGHT_DRAWER_TYPES.NOTIFICATION }))
|
|
// }
|
|
|
|
const { post } = useForm()
|
|
const logoutUser = (e) => {
|
|
e.preventDefault()
|
|
post('/logout')
|
|
}
|
|
|
|
return (
|
|
<div className="navbar sticky top-0 bg-base-100 z-10 shadow-md">
|
|
<div className="flex-1">
|
|
<label htmlFor="left-sidebar-drawer" className="btn btn-primary drawer-button lg:hidden">
|
|
<Bars3Icon className="h-5 inline-block w-5" />
|
|
</label>
|
|
<h1 className="text-2xl font-semibold ml-2">{pageTitle}</h1>
|
|
</div>
|
|
|
|
<div className="flex-none">
|
|
<button onClick={toggleTheme} className="btn btn-ghost">
|
|
{theme === "dark" ? <SunIcon className="w-6 h-6" /> : <MoonIcon className="w-6 h-6" />}
|
|
</button>
|
|
|
|
{/* <button className="btn btn-ghost ml-4 btn-circle" onClick={openNotification}>
|
|
<div className="indicator">
|
|
<BellIcon className="h-6 w-6" />
|
|
{noOfNotifications > 0 && <span className="indicator-item badge badge-secondary badge-sm">{noOfNotifications}</span>}
|
|
</div>
|
|
</button> */}
|
|
|
|
<div className="dropdown dropdown-end ml-4">
|
|
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
|
|
<div className="w-10 rounded-full">
|
|
<img src={auth.user.foto ? `${auth.user.foto}` : `/fotoSantri/no-pic.png`} alt="profile" />
|
|
</div>
|
|
</label>
|
|
<ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li className="ml-3" >Welcome, {auth.user.nama}</li>
|
|
<div className="divider mt-0 mb-0"></div>
|
|
<li><Link href={route('profile.edit')}>Profile Settings</Link></li>
|
|
<li><a href="#" onClick={logoutUser}>Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Header;
|