From 62824a6b83adc6664f9a8ae6be37c99ce0469ab6 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Thu, 25 May 2023 13:56:53 +0100
Subject: [PATCH] Added logout button

---
 src/app/components/Navbar.tsx                 | 128 ++++++++++++++++++
 src/app/components/ProfileDropDown.tsx        |  62 +++++++++
 .../components/signin/GoogleSignInButton.jsx  |   3 -
 src/app/home/page.tsx                         |  10 +-
 4 files changed, 197 insertions(+), 6 deletions(-)
 create mode 100644 src/app/components/Navbar.tsx
 create mode 100644 src/app/components/ProfileDropDown.tsx

diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
new file mode 100644
index 00000000..fa459e90
--- /dev/null
+++ b/src/app/components/Navbar.tsx
@@ -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;
diff --git a/src/app/components/ProfileDropDown.tsx b/src/app/components/ProfileDropDown.tsx
new file mode 100644
index 00000000..6c5a20ed
--- /dev/null
+++ b/src/app/components/ProfileDropDown.tsx
@@ -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;
diff --git a/src/app/components/signin/GoogleSignInButton.jsx b/src/app/components/signin/GoogleSignInButton.jsx
index e61abefc..6dad75b2 100644
--- a/src/app/components/signin/GoogleSignInButton.jsx
+++ b/src/app/components/signin/GoogleSignInButton.jsx
@@ -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"
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 4e12382f..1207eb4a 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -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;