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

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