mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-30 12:55:02 +00:00
Added logout button
This commit is contained in:
Khalim Conn-Kowlessar
parent
69ae460536
commit
62824a6b83
4 changed files with 197 additions and 6 deletions
128
src/app/components/Navbar.tsx
Normal file
128
src/app/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import ProfileDropDown from "./ProfileDropDown";
|
||||
|
||||
function makeLink(href: string, label: string) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
|
||||
>
|
||||
{label}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function Nav({ pageName }: { pageName: string }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
return (
|
||||
<div>
|
||||
<nav className="bg-gray-800">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="h-8 w-8"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
|
||||
alt="Workflow"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<div className="ml-10 flex items-baseline space-x-4">
|
||||
{makeLink("/home", "Home")}
|
||||
{makeLink("/help", "Help")}
|
||||
<ProfileDropDown></ProfileDropDown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mr-2 flex md:hidden">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
type="button"
|
||||
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
|
||||
aria-controls="mobile-menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
{!isOpen ? (
|
||||
<svg
|
||||
className="block h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
className="block h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
show={isOpen}
|
||||
enter="transition ease-out duration-100 transform"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75 transform"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
{(ref) => (
|
||||
<div className="md:hidden" id="mobile-menu">
|
||||
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a
|
||||
href="/home"
|
||||
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/help"
|
||||
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
|
||||
>
|
||||
Help
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Transition>
|
||||
</nav>
|
||||
|
||||
<header className="bg-white shadow">
|
||||
<div className="max-w-7xl mx-auto py-1 px-4 sm:px-6 lg:px-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">{pageName}</h1>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Nav;
|
||||
62
src/app/components/ProfileDropDown.tsx
Normal file
62
src/app/components/ProfileDropDown.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
"use client";
|
||||
|
||||
import { Menu } from "@headlessui/react";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
function ProfileDropDown() {
|
||||
const { data: session, status } = useSession({
|
||||
required: true,
|
||||
onUnauthenticated() {
|
||||
redirect("/?callbackUrl=/home");
|
||||
},
|
||||
});
|
||||
|
||||
if (status !== "authenticated" || !session || !session.user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu as="div" className="relative">
|
||||
<Menu.Button className="rounded-full">
|
||||
{session.user.image ? (
|
||||
<img
|
||||
src={session.user.image}
|
||||
alt={session.user.image}
|
||||
className="inline h-12 w-12 rounded-full "
|
||||
/>
|
||||
) : (
|
||||
<span className="inline-block h-12 w-12 overflow-hidden rounded-full bg-stone-100">
|
||||
<svg
|
||||
className="h-full w-full text-stone-300"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
</Menu.Button>
|
||||
<Menu.Items className="absolute right-0 mt-2 w-48 origin-top-right overflow-hidden rounded-md border bg-white shadow-lg focus:outline-none">
|
||||
<Menu.Item>
|
||||
<Link href="/help" className="flex px-4 py-2 text-sm text-gray-700">
|
||||
Help
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<a>
|
||||
<button
|
||||
className="flex px-4 py-2 text-sm text-gray-700"
|
||||
onClick={() => signOut()}
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</a>
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfileDropDown;
|
||||
|
|
@ -9,9 +9,6 @@ const GoogleSignInButton = () => {
|
|||
const searchParams = useSearchParams();
|
||||
const callbackUrl = searchParams.get("callbackUrl");
|
||||
|
||||
console.log("WYF");
|
||||
console.log(callbackUrl);
|
||||
|
||||
return (
|
||||
<Button
|
||||
className="w-full"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
import { getServerSession } from "next-auth";
|
||||
import { AuthOptions } from "../api/auth/[...nextauth]/route";
|
||||
import { redirect } from "next/navigation";
|
||||
import Nav from "../components/Navbar";
|
||||
|
||||
const Home = async () => {
|
||||
const session = await getServerSession(AuthOptions);
|
||||
|
||||
console.log("SESSION", session);
|
||||
|
||||
if (!session) {
|
||||
redirect("/?callbackUrl=/home");
|
||||
}
|
||||
|
||||
return <div>Home</div>;
|
||||
return (
|
||||
<>
|
||||
<Nav pageName="Home"></Nav>
|
||||
<div> Home </div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Home;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue