You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.2 KiB
113 lines
3.2 KiB
/**
|
|
* アプリケーションの共通レイアウトを提供するコンポーネント
|
|
* ヘッダー（AppBar）とメインコンテンツ領域を含む基本的なページ構造を定義
|
|
*/
|
|
import React, { useState } from 'react';
|
|
import {
|
|
AppBar,
|
|
Toolbar,
|
|
Typography,
|
|
Container,
|
|
Box,
|
|
Button,
|
|
Drawer,
|
|
List,
|
|
ListItemText,
|
|
ListItemIcon,
|
|
ListItemButton,
|
|
Divider,
|
|
IconButton,
|
|
BottomNavigation,
|
|
BottomNavigationAction,
|
|
Paper
|
|
} from '@mui/material';
|
|
import {
|
|
Menu as MenuIcon,
|
|
ListAlt as ListAltIcon,
|
|
Inventory as InventoryIcon, // テストページ用のアイコン
|
|
Science as ScienceIcon, // 鈴木
|
|
SoupKitchen as SoupKitchenIcon,
|
|
ShoppingCart as ShoppingCartIcon
|
|
} from '@mui/icons-material';
|
|
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
|
|
|
|
const Layout: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
const [bottomNavi, setBottomNavi] = useState(1);
|
|
|
|
/**
|
|
* ログアウト処理を行うハンドラー関数
|
|
* ローカルストレージからトークンを削除し、ログインページにリダイレクト
|
|
*/
|
|
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>
|
|
|
|
|
|
|
|
|
|
|
|
<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;
|
|
}
|
|
// ここでルーティング処理などを行う
|
|
}}
|
|
>
|
|
<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; |