codehub_/resources/js/Layouts/AuthenticatedLayout.tsx

import { useState, PropsWithChildren, ReactNode } 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';

export default function Authenticated({ user, children }: PropsWithChildren<{ user: User }>) {
    const { url } = usePage();

    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">
                                    <span className="font-semibold text-base leading-6 mr-4">
                                        {user.name}
                                    </span>
                                    <img src="./assets/images/icons/ico-dropdown.png" alt="Dropdown Icon" className="flex-end" />
                                </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>
    );
}