ボトムナビゲーションの作成＆サイドバー削除

frontend/src/components/Layout.tsx

@@ -16,7 +16,10 @@ import {
   ListItemIcon,
   ListItemButton,
   Divider,
-  IconButton
+  IconButton,
+  BottomNavigation,
+  BottomNavigationAction,
+  Paper
 } from '@mui/material';
 import {
   Menu as MenuIcon,
@@ -24,6 +27,7 @@ import {
   Inventory as InventoryIcon, // テストページ用のアイコン
   Science as ScienceIcon, // 鈴木
   SoupKitchen as SoupKitchenIcon,
+  ShoppingCart as ShoppingCartIcon
 } from '@mui/icons-material';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
 
@@ -31,6 +35,7 @@ const Layout: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [bottomNavi, setBottomNavi] = useState(1);
 
   /**
    * ログアウト処理を行うハンドラー関数
@@ -41,19 +46,9 @@ const Layout: React.FC = () => {
     navigate('/login');
   };
 
-  /**
-   * 画面遷移処理を行うハンドラー関数
-   * 指定されたパスに遷移し、サイドメニューを閉じる
-   */
-  const handleNavigate = (path: string) => {
-    navigate(path);
-    setDrawerOpen(false);
-  };
+  
 
-  // 現在のパスに基づいてメニュー項目が選択状態かどうかを判定
-  const isSelected = (path: string): boolean => {
-    return location.pathname === path;
-  };
+ 
 
   // メニューを開閉するハンドラー
   const toggleDrawer = () => {
@@ -65,15 +60,6 @@ const Layout: React.FC = () => {
       {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
       <AppBar position="static" elevation={0}>
         <Toolbar>
-          <IconButton
-            edge="start"
-            color="inherit"
-            aria-label="menu"
-            onClick={toggleDrawer}
-            sx={{ mr: 2 }}
-          >
-            <MenuIcon />
-          </IconButton>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             shopchop
           </Typography>
@@ -83,52 +69,36 @@ const Layout: React.FC = () => {
         </Toolbar>
       </AppBar>
 
-      {/* サイドメニュー */}
-      <Drawer
-        anchor="left"
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-      >
-        <Box
-          sx={{ width: 250 }}
-          role="presentation"
+     
+
+
+
+      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+        <BottomNavigation
+          showLabels
+          value={bottomNavi}
+          onChange={(event, newValue) => {
+            setBottomNavi(newValue);
+            switch(newValue) {
+              case 0:
+                navigate('stock');
+                break;
+              case 1:
+                navigate('tasks');
+                break;
+              case 2:
+                navigate('recipeList');
+                break;
+            }
+            // ここでルーティング処理などを行う
+          }}
         >
-          <List>
-            <ListItemButton
-              onClick={() => handleNavigate('/tasks')}
-              selected={isSelected('/tasks')}
-            >
-              <ListItemIcon><ListAltIcon /></ListItemIcon>
-              <ListItemText primary="買うものリスト" />
-            </ListItemButton>
-            {/* テストページへのリンクを追加 */}
+          <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
+          <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
+          <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
+        </BottomNavigation>
+      </Paper>
 
-             {/* 在庫リストへのリンクを追加 */} 
-            <ListItemButton 
-              onClick={() => handleNavigate('/addRecipe')} 
-              selected={isSelected('/addRecipe')}
-            >
-              <ListItemIcon><SoupKitchenIcon /></ListItemIcon>
-              <ListItemText primary="料理の追加" />
-            </ListItemButton>
-            <ListItemButton 
-              onClick={() => handleNavigate('/recipeList')} 
-              selected={isSelected('/recipeList')}
-            >
-              <ListItemIcon><ScienceIcon /></ListItemIcon>
-              <ListItemText primary="料理リスト" />
-            </ListItemButton>
-            <ListItemButton
-              onClick={() => handleNavigate('/stock')}
-              selected={isSelected('/stock')}
-            >
-              <ListItemIcon><InventoryIcon /></ListItemIcon>
-              <ListItemText primary="在庫管理" />
-            </ListItemButton>
-            <Divider />
-          </List>
-        </Box>
-      </Drawer>
 
       {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
       <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>

frontend/src/pages/TaskListPage.tsx

@@ -294,28 +294,28 @@ const TaskListPage: React.FC = () => {
         </List>
       </div>
       {/* 新規材料作成ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '40%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
           材料のみ追加
         </Typography>
       </Box>
       <Fab
         color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
         onClick={() => setOpenAddToBuyDialog(true)}
       >
         <AddIcon />
       </Fab>
 
       {/*新規料理追加ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', 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: 16, left: '60%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
         onClick={() => {
           // setOpenAddToBuyDialog(true);
           navigate('/RecipeList');