diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index fa90b27..10d255d 100644 --- a/frontend/src/components/Layout.tsx +++ b/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 = () => { {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */} - - - shopchop @@ -83,52 +69,36 @@ const Layout: React.FC = () => { - {/* サイドメニュー */} - setDrawerOpen(false)} - > - + { + setBottomNavi(newValue); + switch(newValue) { + case 0: + navigate('stock'); + break; + case 1: + navigate('tasks'); + break; + case 2: + navigate('recipeList'); + break; + } + // ここでルーティング処理などを行う + }} > - - handleNavigate('/tasks')} - selected={isSelected('/tasks')} - > - - - - {/* テストページへのリンクを追加 */} + } /> + } /> + } /> + + - {/* 在庫リストへのリンクを追加 */} - handleNavigate('/addRecipe')} - selected={isSelected('/addRecipe')} - > - - - - handleNavigate('/recipeList')} - selected={isSelected('/recipeList')} - > - - - - handleNavigate('/stock')} - selected={isSelected('/stock')} - > - - - - - - - {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */} diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx index 9eccffb..1d1ec9f 100644 --- a/frontend/src/pages/TaskListPage.tsx +++ b/frontend/src/pages/TaskListPage.tsx @@ -295,28 +295,28 @@ const TaskListPage: React.FC = () => { {/* 新規材料作成ボタン - 画面下部に固定表示 */} - + 材料のみ追加 setOpenAddToBuyDialog(true)} > {/*新規料理追加ボタン - 画面下部に固定表示 */} - + 料理から追加 { // setOpenAddToBuyDialog(true); navigate('/RecipeList');