-
Notifications
You must be signed in to change notification settings - Fork 19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Base authenticated layout #36
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
ea0ba04
Merge pull request #33 from PThorpe92/changelog_action
nokierae 3211537
Merge branch 'authenticated_layout' of github.com:nokierae/UnlockEdv2…
nokierae 79ab559
Merge
nokierae e32263e
feat: Add left menu component
nokierae e50106a
fix: AuthenticatedLayout usage
nokierae File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you dislike python
fstrings?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I love them! I was just making the script work in both python2 and 3.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ahhhhh that makes sense lol