Merge remote-tracking branch 'origin/feature-frontend-top' into develop-frontend

frontend/src/components/Layout.tsx

@@ -38,7 +38,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]);
 
     /**
      * ログアウト処理を行うハンドラー関数
@@ -91,21 +114,7 @@ const Layout: React.FC = () => {
     sessionStorage.removeItem('globalMessage');
   };
 
-  const handleBottomNavigation = (event: React.SyntheticEvent, newValue: any) => {
-    setBottomNavi(newValue);
-    switch(newValue) {
-      case 0:
-        navigate('stock');
-        break;
-      case 1:
-        navigate('tasks');
-        break;
-      case 2:
-        navigate('recipeList');
-        break;
-    }
-    // ここでルーティング処理などを行う
-  }
+  
 
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
@@ -121,7 +130,11 @@ const Layout: React.FC = () => {
           </Toolbar>
         </AppBar>
 
-      <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}
@@ -147,10 +160,10 @@ const Layout: React.FC = () => {
           </BottomNavigation>
         </Paper>
 
+
         {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
         <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
           <Container>
-
             <MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
             <MessageAlert
               open={msgOpen}
@@ -160,11 +173,11 @@ const Layout: React.FC = () => {
             />
             <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
           </MessageContext.Provider>
-
           </Container>
         </Box>
       </Box>
     );
   };
 
+
   export default Layout;

frontend/src/pages/TaskListPage.tsx

@@ -330,21 +330,21 @@ const TaskListPage: React.FC = () => {
         </List>
       </div>
       {/* 新規材料作成ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
-          材料のみ追加
+          材料の追加
         </Typography>
       </Box>
       <Fab
         color="primary"
-        sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
         onClick={() => setOpenAddToBuyDialog(true)}
       >
         <AddIcon />
       </Fab>
 
       {/*新規料理追加ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
+      {/* <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
           料理から追加
         </Typography>
@@ -359,7 +359,7 @@ const TaskListPage: React.FC = () => {
       //selected={isSelected('/test')}
       >
         <SoupKitchenIcon />
-      </Fab>
+      </Fab> */}
 
 
       {/* 買うものリストへの材料追加ダイアログ */}