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 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> ); }
|