From 06bf84715d9bd17e4260d3188a07ea843fc57499 Mon Sep 17 00:00:00 2001
From: oyajun <oyamadajun@outlook.jp>
Date: Tue, 27 Aug 2024 00:54:03 +0900
Subject: [PATCH] =?UTF-8?q?update:=20=E3=83=88=E3=83=83=E3=83=97=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC=E5=90=8D?=
 =?UTF-8?q?=E3=81=8C=E3=80=81=E3=82=B5=E3=82=A4=E3=83=B3=E3=82=A2=E3=82=A6?=
 =?UTF-8?q?=E3=83=88=E3=81=AE=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/compornents/TopBar.tsx   |  7 ++----
 src/compornents/UserMenu.tsx | 42 ++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/compornents/UserMenu.tsx

diff --git a/src/compornents/TopBar.tsx b/src/compornents/TopBar.tsx
index 891d9d3..5c3519c 100644
--- a/src/compornents/TopBar.tsx
+++ b/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 >
     </>
diff --git a/src/compornents/UserMenu.tsx b/src/compornents/UserMenu.tsx
new file mode 100644
index 0000000..5f42bb0
--- /dev/null
+++ b/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>
+    </>
+  );
+}
\ No newline at end of file