login dropdown

Author: clee2000

torchci/components/layout/LoginSection.tsx

@@ -1,10 +1,10 @@
 import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
 import SyncIcon from "@mui/icons-material/Sync";
-import { Button as _Button, Menu, MenuItem } from "@mui/material";
+import { Button as _Button, Link } from "@mui/material";
+import { Box } from "@mui/system";
 import { signIn, signOut, useSession } from "next-auth/react";
-import Link from "next/link";
-import React from "react";
 import styles from "./LoginSection.module.css";
+import { NavBarGroupDropdown, NavItem } from "./NavBarGroupDropdown";
 
 const Button = (props: any) => {
   // Make button as small as possible
@@ -13,64 +13,78 @@ const Button = (props: any) => {
 
 export default function LoginSection() {
   const { data: session, status } = useSession();
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const onClick = (event: any) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const onClose = () => {
-    setAnchorEl(null);
-  };
 
-  return (
-    <>
-      {status == "loading" && (
-        // Shows up very briefly while api responds
-        <Button disabled>
-          <SyncIcon fontSize="inherit" />
-        </Button>
-      )}
-      {status != "loading" && !session?.user && (
-        <Link
-          href={`/api/auth/signin`}
+  if (status === "loading") {
+    return (
+      <Button disabled>
+        <SyncIcon fontSize="inherit" />
+      </Button>
+    );
+  }
+
+  // If not signed in, just show a sign in button (no dropdown)
+  if (!session?.user) {
+    return (
+      <Link
+        href={`/api/auth/signin`}
+        onClick={(e) => {
+          e.preventDefault();
+          signIn();
+        }}
+      >
+        <Button variant="contained">Sign in</Button>
+      </Link>
+    );
+  }
+
+  // If signed in, show dropdown with user info
+  const items: NavItem[] = [
+    {
+      label: (
+        <Box
+          component="span"
+          sx={{ color: "text.secondary" }}
+          onClick={(e) => e.preventDefault()}
+        >
+          Signed in as {session.user.name}
+        </Box>
+      ),
+      type: "item",
+      route: "#",
+    },
+    {
+      type: "item",
+      route: "/api/auth/signout",
+      label: (
+        <Box
+          component="span"
           onClick={(e) => {
             e.preventDefault();
-            signIn();
+            signOut();
+          }}
+          style={{
+            textDecoration: "none",
+            color: "inherit",
+            cursor: "pointer",
           }}
         >
-          <Button variant="contained">Sign in</Button>
-        </Link>
-      )}
-      {session && (
-        <>
-          <Button onClick={onClick}>
-            {session.user?.image ? (
-              <img
-                style={{
-                  backgroundImage: `url('${session.user.image}')`,
-                }}
-                className={styles.avatar}
-              />
-            ) : (
-              // Hopefully shouldn't get here
-              <QuestionMarkIcon fontSize="inherit" />
-            )}
-          </Button>
-          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={onClose}>
-            {session.user?.name && (
-              <MenuItem>Signed in as {session.user.name}</MenuItem>
-            )}
-            <Link
-              href={`/api/auth/signout`}
-              onClick={(e) => {
-                e.preventDefault();
-                signOut();
-              }}
-            >
-              <MenuItem>Sign out</MenuItem>
-            </Link>
-          </Menu>
-        </>
-      )}
-    </>
+          Sign out
+        </Box>
+      ),
+    },
+  ];
+
+  const title = session?.user?.image ? (
+    <img
+      style={{
+        backgroundImage: `url('${session.user.image}')`,
+      }}
+      className={styles.avatar}
+    />
+  ) : (
+    // Hopefully shouldn't get here
+    <QuestionMarkIcon fontSize="inherit" />
   );
+
+  return <NavBarGroupDropdown items={items} title={title} showCarrot={false} />;
 }

torchci/components/layout/NavBar.tsx

@@ -268,9 +268,7 @@ function NavBar() {
           <li>
             <ThemeModePicker />
           </li>
-          <li>
-            <LoginSection></LoginSection>
-          </li>
+          <LoginSection></LoginSection>
         </ul>
       </div>
     </div>

torchci/components/layout/NavBarGroupDropdown.tsx

@@ -10,7 +10,11 @@ import {
 import { Box } from "@mui/system";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 
-export type NavItem = { label: string; route: string; type: "item" };
+export type NavItem = {
+  label: string | JSX.Element;
+  route: string;
+  type: "item";
+};
 export type NavCategory = { label: string; items: NavItem[]; type: "group" };
 export type NavDivider = { type: "divider" };
 
@@ -23,9 +27,11 @@ export type NavDivider = { type: "divider" };
 export function NavBarGroupDropdown({
   title,
   items,
+  showCarrot = true,
 }: {
-  title: string;
+  title: string | JSX.Element;
   items: (NavCategory | NavItem | NavDivider)[];
+  showCarrot?: boolean;
 }) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
@@ -86,9 +92,11 @@ export function NavBarGroupDropdown({
           fontFamily: "inherit",
           fontSize: "inherit",
           fontWeight: 400,
+          minWidth: 0,
         }}
       >
-        {title} ▾
+        {title}
+        {showCarrot && " ▾"}
       </Button>
       <Popper
         open={open}