You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
5.0 KiB
React
103 lines
5.0 KiB
React
2 years ago
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { ToastContainer, toast } from 'react-toastify';
|
||
|
|
import ApplicationLogo from '@/Components/Defaults/ApplicationLogo';
|
||
|
|
import Dropdown from '@/Components/Defaults/Dropdown';
|
||
|
|
import { Link } from '@inertiajs/react';
|
||
|
|
import { Breadcrumb } from 'flowbite-react';
|
||
|
|
import { HiMenu, HiChevronDown, HiHome } from 'react-icons/hi'
|
||
|
|
import { router } from '@inertiajs/react';
|
||
|
|
import SidebarNav from './Partials/SidebarNav';
|
||
|
|
|
||
|
|
export default function Authenticated({ auth, children, flash, page = '', action = ''}) {
|
||
|
|
const [showingNavigationDropdown, setShowingNavigationDropdown] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (flash.message !== null) {
|
||
|
|
toast(flash.message.message, {type: flash.message.type})
|
||
|
|
}
|
||
|
|
}, [flash])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-700">
|
||
|
|
<nav className="bg-white dark:bg-gray-800 border-b dark:border-gray-700">
|
||
|
|
<div className="mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="flex justify-between h-16">
|
||
|
|
<div className="flex">
|
||
|
|
<div className="shrink-0 flex items-center">
|
||
|
|
<Link href={route('dashboard')}>
|
||
|
|
<ApplicationLogo className="block pt-2 h-12 w-full font-bold text-2xl fill-current" />
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="hidden sm:flex sm:items-center sm:ml-6">
|
||
|
|
<div className="ml-3 relative">
|
||
|
|
<Dropdown>
|
||
|
|
<Dropdown.Trigger>
|
||
|
|
<span className="inline-flex rounded-md">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150 dark:bg-gray-700 dark:hover:text-gray-50 dark:text-gray-200 gap-2"
|
||
|
|
>
|
||
|
|
{auth.user.name}
|
||
|
|
<HiChevronDown/>
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="-mr-2 flex items-center sm:hidden space-x-2">
|
||
|
|
<button
|
||
|
|
onClick={() => setShowingNavigationDropdown((previousState) => !previousState)}
|
||
|
|
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
|
||
|
|
>
|
||
|
|
<HiMenu/>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className='flex-1 flex flex-row'>
|
||
|
|
<div className={`w-fit ${showingNavigationDropdown ? 'absolute h-screen z-10' : 'md:block hidden'}`}>
|
||
|
|
<SidebarNav user={auth.user}/>
|
||
|
|
</div>
|
||
|
|
<main className='w-full'>
|
||
|
|
{page !== '' && (
|
||
|
|
<Breadcrumb
|
||
|
|
className="bg-gray-200 py-3 px-5 mb-2 dark:bg-gray-700"
|
||
|
|
>
|
||
|
|
<Breadcrumb.Item
|
||
|
|
onClick={() => router.visit(route('dashboard'))}
|
||
|
|
icon={HiHome}
|
||
|
|
>
|
||
|
|
<p className='mt-0.5'>{page}</p>
|
||
|
|
</Breadcrumb.Item>
|
||
|
|
{action !== '' && (
|
||
|
|
<Breadcrumb.Item>
|
||
|
|
{action}
|
||
|
|
</Breadcrumb.Item>
|
||
|
|
)}
|
||
|
|
</Breadcrumb>
|
||
|
|
)}
|
||
|
|
<div className='py-4'>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
<ToastContainer />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|