You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import { PropsWithChildren, useState } from 'react'; import ApplicationLogo from '@/Components/ApplicationLogo'; import Footer from '@/Components/Footer'; import { Link, usePage } from '@inertiajs/react'; import { User } from '@/types'; import { AlertOctagon, Bell, Bookmark, ChevronDown, Grid, Home, LogOut } from 'react-feather'; import Modal from '@/Components/Modal'; import axios from 'axios'; import ModalButton from '@/Components/ModalButton'; import NavIconLink from '@/Components/NavIconLink';
export default function Authenticated({ user, children }: PropsWithChildren<{ user: User }>) { const { url } = usePage(); const [isUserOptionsHiglighted, setIsUserOptionsHiglighted] = useState(false); const [isDashboardHiglighted, setIsDashboardHiglighted] = useState(false); const [isNotificationsHiglighted, setIsNotificationsHiglighted] = useState(false); const [isBookmarksHiglighted, setIsBookmarksHiglighted] = useState(false);
const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); const handleCloseLogoutModal = () => { setIsLogoutModalOpen(false);
axios.post('/logout') .then(response => { console.log(response.data); window.location.href = '/'; }) .catch(error => { console.error(error); }); };
return ( <div> <header className="navbar px-4 bg-primary-background border-b-2 border-secondary-main"> <div id="ProjectTitle" className="navbar-start"> <Link href="/dashboard"> <ApplicationLogo /> </Link> </div>
<nav className="navbar-end"> <NavIconLink href="/dashboard" active={url === '/dashboard'} onMouseEnter={() => setIsDashboardHiglighted(true)} onMouseLeave={() => setIsDashboardHiglighted(false)} > <Home className={isDashboardHiglighted || url === '/dashboard' ? "stroke-neutral-10 active" : "stroke-secondary-main"} /> </NavIconLink> <NavIconLink href="/notifications" active={url === '/notifications'} onMouseEnter={() => setIsNotificationsHiglighted(true)} onMouseLeave={() => setIsNotificationsHiglighted(false)} > <Bell className={isNotificationsHiglighted || url === '/notifications' ? "stroke-neutral-10 active" : "stroke-secondary-main"} /> </NavIconLink> <NavIconLink href="/bookmarks" active={url === '/bookmarks'} onMouseEnter={() => setIsBookmarksHiglighted(true)} onMouseLeave={() => setIsBookmarksHiglighted(false)} > <Bookmark className={isBookmarksHiglighted || url === '/bookmarks' ? "stroke-neutral-10 active" : "stroke-secondary-main"} /> </NavIconLink> <div className="dropdown" id='UserOptions'> <div tabIndex={0} role="button" onMouseEnter={() => setIsUserOptionsHiglighted(true)} onMouseLeave={() => setIsUserOptionsHiglighted(false)} className="btn m-0 bg-primary-background border-primary-background shadow-xl text-md hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white"> {user.username} <ChevronDown className={isUserOptionsHiglighted ? "stroke-neutral-10" : "stroke-secondary-main"} /> </div> <ul tabIndex={0} className="dropdown-content z-[1] menu rounded-btn bg-neutral-10 shadow-md px-0"> <li><Link href={route('profile.edit')} className="hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white rounded-none"> Settings </Link></li> <li><Link href='/about' className="hover:bg-secondary-hover hover:text-white active:bg-secondary-pressed active:text-white rounded-none"> About CodeHub </Link></li> <li><button onClick={() => setIsLogoutModalOpen(true)} className='outline-none hover:bg-secondary-hover hover:text-white focus:bg-secondary-pressed focus:text-white transition duration-150 ease-in-out'> Log Out </button></li> </ul> </div> </nav> </header>
<main> {children} </main>
<footer> <Footer /> </footer>
<Modal show={isLogoutModalOpen} onClose={() => setIsLogoutModalOpen(false)} maxWidth="lg" styling='warning'> <div className="p-4 flex flex-col items-center"> <AlertOctagon stroke='#E5C100' size={80} /> <h2 className="text-xl font-bold mt-2">Confirm Logout</h2> <p className="mt-4">Are you sure you want to logout?</p>
<div className='flex items-center justify-center mt-3'> <ModalButton onClick={() => setIsLogoutModalOpen(false)} className="mx-1 bg-neutral-40 text-black hover:bg-neutral-60 hover:text-white active:bg-neutral-80 active:text-white"> Cancel </ModalButton> <ModalButton onClick={handleCloseLogoutModal} className="mx-1 bg-error-main text-white hover:bg-error-hover active:bg-error-pressed"> Logout <LogOut stroke='#FFFFFF' /> </ModalButton> </div> </div> </Modal> </div> ) }
|