ボトムナビゲーションの修正

frontend/src/components/Layout.tsx

@@ -2,7 +2,7 @@
  * アプリケーションの共通レイアウトを提供するコンポーネント
  * ヘッダー（AppBar）とメインコンテンツ領域を含む基本的なページ構造を定義
  */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   AppBar,
   Toolbar,
@@ -35,79 +35,105 @@ const Layout: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [bottomNavi, setBottomNavi] = useState(1);
-
-  /**
-   * ログアウト処理を行うハンドラー関数
-   * ローカルストレージからトークンを削除し、ログインページにリダイレクト
-   */
-  const handleLogout = () => {
-    localStorage.removeItem('token');
-    navigate('/login');
-  };
 
 
+    const getTabIndex = (pathname: string) => {
+      switch (pathname) {
+        case '/stock':
+          return 0;
+        case '/tasks':
+          return 1;
+        case '/recipeList':
+          return 2;
+        default:
+          return 0;
+      }
+    };
 
 
     
-  // メニューを開閉するハンドラー
-  const toggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
 
-  return (
+
-    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+    const [bottomNavi, setBottomNavi] = useState(getTabIndex(location.pathname));
-      {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
+
-      <AppBar position="static" elevation={0}>
+    useEffect(() => {
-        <Toolbar>
+      setBottomNavi(getTabIndex(location.pathname));
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+    }, [location.pathname]);
-            shopchop
+
-          </Typography>
+    /**
-          <Button color="inherit" onClick={handleLogout}>
+     * ログアウト処理を行うハンドラー関数
-            ログアウト
+     * ローカルストレージからトークンを削除し、ログインページにリダイレクト
-          </Button>
+     */
-        </Toolbar>
+    const handleLogout = () => {
-      </AppBar>
+      localStorage.removeItem('token');
-
+      navigate('/login');
-     
+    };
-
+
-
+
-
+
-      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+
-        <BottomNavigation
+
-          showLabels
+    // メニューを開閉するハンドラー
-          value={bottomNavi}
+    const toggleDrawer = () => {
-          onChange={(event, newValue) => {
+      setDrawerOpen(!drawerOpen);
-            setBottomNavi(newValue);
+    };
-            switch(newValue) {
+
-              case 0:
+  
-                navigate('stock');
+
-                break;
+    return (
-              case 1:
+      <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
-                navigate('tasks');
+        {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
-                break;
+        <AppBar position="static" elevation={0}>
-              case 2:
+          <Toolbar>
-                navigate('recipeList');
+            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-                break;
+              shopchop
-            }
+            </Typography>
-            // ここでルーティング処理などを行う
+            <Button color="inherit" onClick={handleLogout}>
-          }}
+              ログアウト
-        >
+            </Button>
-          <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
+          </Toolbar>
-          <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
+        </AppBar>
-          <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
+
-        </BottomNavigation>
+
-      </Paper>
+
-
+
-
+
-      {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
+        <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer + 1 }} elevation={3}>
-      <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
+          <BottomNavigation
-        <Container>
+            showLabels
-          <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
+            value={bottomNavi}
-        </Container>
+            onChange={(event, newValue) => {
+              setBottomNavi(newValue);
+              switch (newValue) {
+                case 0:
+                  navigate('stock');
+                  break;
+                case 1:
+                  navigate('tasks');
+                  break;
+                case 2:
+                  navigate('recipeList');
+                  break;
+              }
+              // ここでルーティング処理などを行う
+            }}
+          >
+            <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
+            <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
+            <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
+          </BottomNavigation>
+        </Paper>
+
+
+        {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
+        <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
+          <Container>
+            <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
+          </Container>
+        </Box>
       </Box>
-    </Box>
+    );
-  );
+  };
-};
+
 
-export default Layout;
+  export default Layout;