navigator修正

src/layouts/dashbord/navigator.tsx

@@ -18,6 +18,12 @@ import usePage from "hooks/usePage";
 import { PageID, TabID } from "pages";
 import * as React from "react";
 import { PathKey, PathOption, getPageId, getPath } from "routes/path";
+import PersonIcon from "@mui/icons-material/Person";
+import LocalParkingIcon from "@mui/icons-material/LocalParking";
+import StoreIcon from "@mui/icons-material/Store";
+import LogoutIcon from "@mui/icons-material/Logout";
+import UndoIcon from "@mui/icons-material/Undo";
+
 type Group = {
   label: string;
   children: SubGroup[];
@@ -75,79 +81,74 @@ export default function Navigator(props: DrawerProps) {
   const categories: Group[] = [
     {
       label: "管理メニュー",
-      children: [],
-    },
-    {
-      label: "ログインユーザ管理",
       children: [
         {
-          label: "顧客一覧",
-          icon: <ArticleIcon />,
-          id: PageID.ログインユーザ_顧客一覧,
-        },
-        {
-          label: "顧客新規登録",
-          icon: <ArticleIcon />,
-          id: PageID.ログインユーザ_顧客新規登録,
-        },
-        {
-          label: "店舗一覧",
-          icon: <ArticleIcon />,
-          id: PageID.ログインユーザ_店舗一覧,
-        },
-        {
-          label: "店舗新規登録",
-          icon: <ArticleIcon />,
-          id: PageID.ログインユーザ_店舗新規登録,
-        },
-      ],
-    },
-    {
-      label: "店舗管理",
-      children: [
-        {
-          label: "店舗一覧",
-          icon: <ArticleIcon />,
-          id: PageID.店舗一覧,
-        },
-        {
-          label: "店舗新規登録",
-          icon: <ArticleIcon />,
-          id: PageID.店舗新規登録,
+          label: "店舗管理",
+          icon: <StoreIcon />,
+          children: [
+            {
+              label: "店舗一覧",
+              id: PageID.店舗一覧,
+            },
+            {
+              label: "店舗新規登録",
+              id: PageID.店舗新規登録,
+            },
+          ],
         },
-      ],
-    },
-    {
-      label: "駐車場管理",
-      children: [
         {
-          // label: "QRサービス券駐車場グループ管理",
-          label: (
-            <Box>
-              <Typography variant="body2">QRサービス券</Typography>
-              <Typography variant="body2">駐車場グループ管理</Typography>
-            </Box>
-          ),
-          icon: <ArticleIcon />,
-          id: [
-            PageID.QRサービス券駐車場グループ管理,
-            TabID.QRサービス券駐車場グループ管理_一覧,
+          label: "駐車場管理",
+          icon: <LocalParkingIcon />,
+          children: [
+            {
+              label: (
+                <Box>
+                  <Typography variant="body2">QRサービス券</Typography>
+                  <Typography variant="body2">駐車場グループ管理</Typography>
+                </Box>
+              ),
+              id: [
+                PageID.QRサービス券駐車場グループ管理,
+                TabID.QRサービス券駐車場グループ管理_一覧,
+              ],
+            },
           ],
         },
-      ],
-    },
-    {
-      label: "QRサービス券",
-      children: [
         {
-          label: "サービス券発行",
+          label: "QRサービス券",
           icon: <ArticleIcon />,
-          id: PageID.サービス券発行用QRコード,
+          children: [
+            {
+              label: "サービス券発行",
+              id: PageID.サービス券発行用QRコード,
+            },
+            {
+              label: "利用履歴",
+              id: PageID.利用履歴,
+            },
+          ],
         },
         {
-          label: "利用履歴",
-          icon: <ArticleIcon />,
-          id: PageID.利用履歴,
+          label: "ログインユーザ管理",
+          icon: <PersonIcon />,
+          children: [
+            {
+              label: "顧客一覧",
+              id: PageID.ログインユーザ_顧客一覧,
+            },
+            {
+              label: "顧客新規登録",
+              id: PageID.ログインユーザ_顧客新規登録,
+            },
+            {
+              label: "店舗一覧",
+              id: PageID.ログインユーザ_店舗一覧,
+            },
+            {
+              label: "店舗新規登録",
+              id: PageID.ログインユーザ_店舗新規登録,
+            },
+          ],
         },
       ],
     },
@@ -156,11 +157,11 @@ export default function Navigator(props: DrawerProps) {
       children: [
         {
           label: "成り代わり終了",
-          icon: <SettingsIcon />,
+          icon: <UndoIcon />,
           id: PageID.成り代わり終了,
           whenIsSwitched: true,
         },
-        { label: "ログアウト", icon: <SettingsIcon />, id: PageID.LOGOUT },
+        { label: "ログアウト", icon: <LogoutIcon />, id: PageID.LOGOUT },
       ],
     },
   ];
@@ -272,34 +273,36 @@ function SubGroup({ icon, label, id, children, option }: SubGroup) {
 function useContents(children: Child[]) {
   const { pageId } = usePage();
   const { navigateWhenChanged } = useNavigateCustom();
-  const { initialized } = useAuth();
+  const { initialized, currentRole } = useAuth();
 
   const [shouldOpen, setShouldOpen] = React.useState(false);
 
   const elements = React.useMemo(() => {
     setShouldOpen(false);
-    return children.map(({ label, id, option }, index) => {
-      const selected = getPageId(id) === pageId;
-      if (selected) {
-        setShouldOpen(true);
-      }
+    return children
+      .filter(({ id }) => ページアクセス許可判定(currentRole, getPageId(id)))
+      .map(({ label, id, option }, index) => {
+        const selected = getPageId(id) === pageId;
+        if (selected) {
+          setShouldOpen(true);
+        }
 
-      const handleClick = () => {
-        const path = getPath(id, option);
-        navigateWhenChanged(path, undefined, { reload: true });
-      };
+        const handleClick = () => {
+          const path = getPath(id, option);
+          navigateWhenChanged(path, undefined, { reload: true });
+        };
 
-      return (
-        <ListItemButton
-          selected={selected}
-          sx={{ ...item, pl: 4 }}
-          key={index}
-          onClick={handleClick}
-        >
-          <ListItemText primary={label} />
-        </ListItemButton>
-      );
-    });
+        return (
+          <ListItemButton
+            selected={selected}
+            sx={{ ...item, pl: 4 }}
+            key={index}
+            onClick={handleClick}
+          >
+            <ListItemText primary={label} />
+          </ListItemButton>
+        );
+      });
   }, [pageId, initialized]);
 
   return {