Added avatar with option to logout/in (#85)

Author: lille-morille

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.6.0",
+    "@headlessui/react": "^2.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@prisma/client": "^5.14.0",
     "@radix-ui/react-avatar": "^1.0.4",

pnpm-lock.yaml

@@ -0,0 +1,72 @@
+"use client";
+
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import { UserRound } from "lucide-react";
+import { Button } from "../ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Session } from "next-auth";
+import { useMemo } from "react";
+import { signIn, signOut } from "next-auth/react";
+
+interface DropdownItem {
+  name: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export default function AvatarDropdown({ user }: { user: Session | null }) {
+  const solutions: DropdownItem[] = useMemo(() => {
+    if (user === null) {
+      return [
+        {
+          name: "Logg inn",
+          onClick: () => signIn(),
+        },
+      ];
+    }
+
+    return [{ name: "Logg ut", onClick: () => signOut() }];
+  }, [user]);
+
+  return (
+    <Popover className="relative">
+      <PopoverButton as={Button} size={"icon"} variant={"ghost"}>
+        <Avatar className="duration-100 hover:brightness-90">
+          {Boolean(user?.user.image) && (
+            <AvatarImage src={user!.user.image ?? undefined} alt="@profile" />
+          )}
+          <AvatarFallback>
+            <UserRound className="text-foreground" />
+          </AvatarFallback>
+        </Avatar>
+      </PopoverButton>
+
+      <PopoverPanel
+        transition
+        className="absolute left-1/2 z-10 mt-5 flex w-fit max-w-40 -translate-x-1/2 px-2 transition data-[closed]:translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in"
+      >
+        <div className="w-56 shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg ring-1 ring-gray-900/5">
+          {solutions.map((item) =>
+            Boolean(item.href) ? (
+              <a
+                key={item.name}
+                href={item.href}
+                className="block p-2 hover:text-indigo-600"
+              >
+                {item.name}
+              </a>
+            ) : (
+              <span
+                key={item.name}
+                onClick={item.onClick!}
+                className="block cursor-pointer p-2 hover:text-indigo-600"
+              >
+                {item.name}
+              </span>
+            ),
+          )}
+        </div>
+      </PopoverPanel>
+    </Popover>
+  );
+}

src/components/layout/avatar-dropdown.tsx

@@ -1,10 +1,12 @@
 "use server";
-import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
-import { Button } from "~/components/ui/button";
+
 import { ThemeModeToggler } from "~/components/ui/theme-mode-toggler";
-import { UserRound } from "lucide-react";
+import { getServerAuthSession } from "../../server/auth";
+import AvatarDropdown from "./avatar-dropdown";
 
 export default async function Navbar() {
+  const user = await getServerAuthSession();
+
   return (
     <nav className="flex w-full flex-col content-start bg-background">
       <div className="flex w-full items-center justify-between gap-3 border-b-[1px] p-3">
@@ -23,14 +25,7 @@ export default async function Navbar() {
           </p>
         </div>
         <div className="flex gap-3">
-          <Button size={"icon"} variant={"ghost"}>
-            <Avatar className="duration-100 hover:brightness-90">
-              <AvatarImage src="https://github.com/shadcn.png" alt="@profile" />
-              <AvatarFallback>
-                <UserRound className="text-foreground" />
-              </AvatarFallback>
-            </Avatar>
-          </Button>
+          <AvatarDropdown user={user} />
           <ThemeModeToggler />
         </div>
       </div>