Merge pull request #56 from tokomath/topbar

トップバーのユーザー名をクリックすると、サインアウトのメニューが出てくるように

src/compornents/TopBar.tsx

@@ -2,6 +2,7 @@ import { AccountCircle, ExitToAppSharp } from "@mui/icons-material";
 import { AppBar, Button, Toolbar, Typography } from "@mui/material";
 import { signOut } from "next-auth/react";
 import React from "react";
+import UserMenu from "./UserMenu";
 
 interface QuestionProps {
   page_name: string;
@@ -16,11 +17,7 @@ export default function TopBar({ page_name = "", user_name = "Unknown User" }: Q
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             {page_name}
           </Typography>
-          <AccountCircle />
-          <Typography marginLeft={1} marginRight={4}>
-            {user_name}
-          </Typography>
-          <Button color="inherit" startIcon={<ExitToAppSharp />} onClick={() => signOut()}>SignOut</Button>
+          <UserMenu user_name={user_name} />
         </Toolbar >
       </AppBar >
     </>

src/compornents/UserMenu.tsx

@@ -0,0 +1,42 @@
+// トップバーに表示するための、ユーザーメニューを表示するコンポーネント
+// アイコンとユーザー名を表示し、クリックするとメニューが表示される
+
+import React from 'react';
+import { AccountCircle, ExitToAppSharp } from "@mui/icons-material";
+import { Button, Menu, MenuItem } from "@mui/material";
+import { signOut } from "next-auth/react";
+import { ArrowDropDownIcon } from '@mui/x-date-pickers';
+
+interface UserMenuProps {
+  user_name: string;
+}
+
+export default function UserMenu({ user_name }: UserMenuProps) {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <>
+      <Button
+        color="inherit"
+        size='large'
+        startIcon={<AccountCircle />}
+        endIcon={<ArrowDropDownIcon />}
+        onClick={handleClick}
+        style={{ textTransform: 'none' }}
+      >
+        {user_name}
+      </Button >
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={() => setAnchorEl(null)}
+      >
+        <MenuItem onClick={() => signOut()}><ExitToAppSharp />SignOut</MenuItem>
+      </Menu>
+    </>
+  );
+}