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.
114 lines
6.1 KiB
114 lines
6.1 KiB
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>
|
|
)
|
|
}
|