-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #36 from nokierae/authenticated_layout
Base authenticated layout
- Loading branch information
Showing
13 changed files
with
296 additions
and
3,213 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| export default function Brand() { | ||
| return ( | ||
| <div className="flex justify-between items-center space-x-2"> | ||
| <img className="h-6" src="/ul-logo.png" /> | ||
| <div className="text-2xl"> | ||
| <span className="text-primary">Unlock</span> | ||
| <span className="text-secondary">Ed</span> | ||
| <span className="text-base">v2</span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import Brand from "./Brand"; | ||
| import { HomeIcon, UsersIcon, ArchiveBoxIcon } from "@heroicons/react/24/solid"; | ||
|
|
||
| export default function LeftMenu() { | ||
| return ( | ||
| <ul className="menu bg-base-200 w-64 rounded-box"> | ||
| <li> | ||
| <a href="/" className="mb-4"> | ||
| <Brand /> | ||
| </a> | ||
| </li> | ||
|
|
||
| <li> | ||
| <a> | ||
| <HomeIcon className="w-4" /> Dashboard | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a> | ||
| <UsersIcon className="w-4" /> Users | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <details> | ||
| <summary> | ||
| <ArchiveBoxIcon className="w-4" /> | ||
| Category 1 | ||
| </summary> | ||
| <ul> | ||
| <li> | ||
| <a>Link 1</a> | ||
| </li> | ||
| <li> | ||
| <a>Link 2</a> | ||
| </li> | ||
| </ul> | ||
| </details> | ||
| </li> | ||
| <li> | ||
| <details> | ||
| <summary> | ||
| <ArchiveBoxIcon className="w-4" /> | ||
| Category 2 | ||
| </summary> | ||
| <ul> | ||
| <li> | ||
| <a>Link 1</a> | ||
| </li> | ||
| <li> | ||
| <a>Link 2</a> | ||
| </li> | ||
| </ul> | ||
| </details> | ||
| </li> | ||
| </ul> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,179 +1,22 @@ | ||
| import { useState, PropsWithChildren, ReactNode } from "react"; | ||
| import ApplicationLogo from "@/Components/ApplicationLogo"; | ||
| import Dropdown from "@/Components/Dropdown"; | ||
| import NavLink from "@/Components/NavLink"; | ||
| import ResponsiveNavLink from "@/Components/ResponsiveNavLink"; | ||
| import { Link } from "@inertiajs/react"; | ||
| import { PropsWithChildren } from "react"; | ||
| import { User } from "@/types"; | ||
| import { Head } from "@inertiajs/react"; | ||
| import LeftMenu from "@/Components/LeftMenu"; | ||
|
|
||
| export default function Authenticated({ | ||
| user, | ||
| header, | ||
| title, | ||
| children, | ||
| }: PropsWithChildren<{ user: User; header?: ReactNode }>) { | ||
| const [showingNavigationDropdown, setShowingNavigationDropdown] = | ||
| useState(false); | ||
|
|
||
| }: PropsWithChildren<{ user: User; title: string }>) { | ||
| return ( | ||
| <div className="min-h-screen bg-slate-100 dark:bg-slate-900"> | ||
| <nav className="bg-white dark:bg-slate-800 border-b border-slate-100 dark:border-slate-700"> | ||
| <div className="max-w-7xl 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="/"> | ||
| <ApplicationLogo className="block h-8 w-auto fill-current text-slate-800 dark:text-slate-200" /> | ||
| </Link> | ||
| </div> | ||
|
|
||
| <div className="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"> | ||
| <NavLink | ||
| href={route("dashboard")} | ||
| active={route().current("dashboard")} | ||
| > | ||
| Dashboard | ||
| </NavLink> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="hidden sm:flex sm:items-center sm:ms-6"> | ||
| <div className="ms-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-slate-500 dark:text-slate-400 bg-white dark:bg-slate-800 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none transition ease-in-out duration-150" | ||
| > | ||
| {`${user.name_first} ${user.name_last}`} | ||
|
|
||
| <svg | ||
| className="ms-2 -me-0.5 h-4 w-4" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 20 20" | ||
| fill="currentColor" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| </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="-me-2 flex items-center sm:hidden"> | ||
| <button | ||
| onClick={() => | ||
| setShowingNavigationDropdown( | ||
| (previousState) => !previousState, | ||
| ) | ||
| } | ||
| className="inline-flex items-center justify-center p-2 rounded-md text-slate-400 dark:text-slate-500 hover:text-slate-500 dark:hover:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 focus:outline-none focus:bg-slate-100 dark:focus:bg-slate-900 focus:text-slate-500 dark:focus:text-slate-400 transition duration-150 ease-in-out" | ||
| > | ||
| <svg | ||
| className="h-6 w-6" | ||
| stroke="currentColor" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <path | ||
| className={ | ||
| !showingNavigationDropdown | ||
| ? "inline-flex" | ||
| : "hidden" | ||
| } | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth="2" | ||
| d="M4 6h16M4 12h16M4 18h16" | ||
| /> | ||
| <path | ||
| className={ | ||
| showingNavigationDropdown | ||
| ? "inline-flex" | ||
| : "hidden" | ||
| } | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth="2" | ||
| d="M6 18L18 6M6 6l12 12" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div | ||
| className={ | ||
| (showingNavigationDropdown ? "block" : "hidden") + | ||
| " sm:hidden" | ||
| } | ||
| > | ||
| <div className="pt-2 pb-3 space-y-1"> | ||
| <ResponsiveNavLink | ||
| href={route("dashboard")} | ||
| active={route().current("dashboard")} | ||
| > | ||
| Dashboard | ||
| </ResponsiveNavLink> | ||
| </div> | ||
|
|
||
| <div className="pt-4 pb-1 border-t border-slate-200 dark:border-slate-600"> | ||
| <div className="px-4"> | ||
| <div className="font-medium text-base text-slate-800 dark:text-slate-200"> | ||
| {`${user.name_first} ${user.name_last}`} | ||
| </div> | ||
| <div className="font-medium text-sm text-slate-500"> | ||
| {user.email} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="mt-3 space-y-1"> | ||
| <ResponsiveNavLink href={route("profile.edit")}> | ||
| Profile | ||
| </ResponsiveNavLink> | ||
| <ResponsiveNavLink | ||
| method="post" | ||
| href={route("logout")} | ||
| as="button" | ||
| > | ||
| Log Out | ||
| </ResponsiveNavLink> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
|
|
||
| {header && ( | ||
| <header className="bg-white dark:bg-slate-800 shadow"> | ||
| <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> | ||
| {header} | ||
| </div> | ||
| </header> | ||
| )} | ||
|
|
||
| <main>{children}</main> | ||
| <div> | ||
| <Head title={title} /> | ||
| <div className="flex"> | ||
| <LeftMenu /> | ||
| <main className="w-full min-h-screen bg-slate-300 text-base-100 p-4"> | ||
| {children} | ||
| </main> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,10 @@ | ||
| import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; | ||
| import { Head } from "@inertiajs/react"; | ||
| import { PageProps } from "@/types"; | ||
|
|
||
| export default function Dashboard({ auth }: PageProps) { | ||
| return ( | ||
| <AuthenticatedLayout user={auth.user}> | ||
| <Head title="Dashboard" /> | ||
|
|
||
| <div className="py-12"> | ||
| <div className="max-w-7xl mx-auto sm:px-6 lg:px-8"> | ||
| <div className="bg-white dark:bg-slate-800 overflow-hidden shadow-sm sm:rounded-lg"> | ||
| <div className="p-6 text-slate-900 dark:text-slate-100"> | ||
| You're logged in! | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <AuthenticatedLayout user={auth.user} title="Dashboard"> | ||
| <h1 className="font-semibold text-2xl">Dashboard</h1> | ||
| </AuthenticatedLayout> | ||
| ); | ||
| } |
Oops, something went wrong.