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.
67 lines
2.8 KiB
67 lines
2.8 KiB
import { PropsWithChildren, useState } from 'react';
|
|
import ApplicationLogo from '@/Components/ApplicationLogo';
|
|
import Footer from '@/Components/Footer';
|
|
import Dropdown from '@/Components/Dropdown';
|
|
import NavLink from '@/Components/NavLink';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
import { User } from '@/types';
|
|
import { ChevronDown } from 'react-feather';
|
|
|
|
export default function Authenticated({ user, children }: PropsWithChildren<{ user: User }>) {
|
|
const { url } = usePage();
|
|
const [isHiglighted, setIsHiglighted] = useState(false);
|
|
|
|
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">
|
|
<ul className="menu menu-horizontal px-1">
|
|
<li><NavLink href="/dashboard" active={url === '/dashboard'}>
|
|
Home
|
|
</NavLink></li>
|
|
<li><NavLink href="/about" active={url === '/about'}>
|
|
About
|
|
</NavLink></li>
|
|
<li><NavLink href="/help" active={url === '/help'}>
|
|
Tutorials
|
|
</NavLink></li>
|
|
|
|
<li><Dropdown>
|
|
<Dropdown.Trigger>
|
|
<button className="flex items-center py-1 px-2"
|
|
onMouseEnter={() => setIsHiglighted(true)}
|
|
onMouseDown={() => setIsHiglighted(true)}
|
|
onMouseLeave={() => setIsHiglighted(false)}>
|
|
<span className="font-semibold text-base leading-6 mr-4">
|
|
{user.name}
|
|
</span>
|
|
<ChevronDown stroke={isHiglighted ? "#FFFFFF" : "#000000"} />
|
|
</button>
|
|
</Dropdown.Trigger>
|
|
<Dropdown.Content>
|
|
<Dropdown.Link href={route('profile.edit')}>Profile</Dropdown.Link>
|
|
<Dropdown.Link href={route('logout')} method="post" as="button">
|
|
Log Out
|
|
</Dropdown.Link>
|
|
</Dropdown.Content>
|
|
</Dropdown></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
{children}
|
|
</main>
|
|
|
|
<footer>
|
|
<Footer />
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|