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

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,7 +35,30 @@ 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;
+        case '/tasks':
+          return 1;
+        case '/recipeList':
+          return 2;
+        default:
+          return 0;
+      }
+    };
+
+
+    
+
+
+    const [bottomNavi, setBottomNavi] = useState(getTabIndex(location.pathname));
+
+    useEffect(() => {
+      setBottomNavi(getTabIndex(location.pathname));
+    }, [location.pathname]);
 
     /**
      * ログアウト処理を行うハンドラー関数
@@ -55,6 +78,8 @@ const Layout: React.FC = () => {
       setDrawerOpen(!drawerOpen);
     };
 
+  
+
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
         {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
@@ -73,13 +98,13 @@ const Layout: React.FC = () => {
 
 
 
-      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+        <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer + 1 }} elevation={3}>
           <BottomNavigation
             showLabels
             value={bottomNavi}
             onChange={(event, newValue) => {
               setBottomNavi(newValue);
-            switch(newValue) {
+              switch (newValue) {
                 case 0:
                   navigate('stock');
                   break;
@@ -108,6 +133,7 @@ const Layout: React.FC = () => {
         </Box>
       </Box>
     );
-};
+  };
+
 
-export default Layout;
+  export default Layout;