サイドバーの作成

dev-frontend-with-api
Haru.Kusano 5 months ago
parent b3aad60800
commit 45040b7880
  1. 25
      frontend/src/App.tsx
  2. 29
      frontend/src/components/Layout.tsx
  3. 16
      frontend/src/pages/StockPage.tsx

@ -9,6 +9,7 @@ import Layout from './components/Layout';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import TaskListPage from './pages/TaskListPage';
import StockPage from './pages/StockPage';
import './App.css';
/**
@ -93,6 +94,30 @@ const App: React.FC = () => {
}
/>
</Route>
<Route path="/" element={<Layout />}>
{/* ルートパスへのアクセスはタスク一覧にリダイレクト */}
<Route index element={<Navigate to="/stock" replace />} />
{/* タスク一覧は認証が必要なため、PrivateRouteでラップ */}
<Route
path="stock"
element={
<PrivateRoute>
<StockPage />
</PrivateRoute>
}
/>
{/* テストページへのルートを追加 */}
<Route
path="stock"
element={
<PrivateRoute>
<StockPage />
</PrivateRoute>
}
/>
</Route>
</Routes>
</BrowserRouter>
</Box>

@ -3,13 +3,13 @@
* AppBar
*/
import React, { useState } from 'react';
import {
AppBar,
Toolbar,
Typography,
Container,
Box,
Button,
import {
AppBar,
Toolbar,
Typography,
Container,
Box,
Button,
Drawer,
List,
ListItemText,
@ -18,9 +18,10 @@ import {
Divider,
IconButton
} from '@mui/material';
import {
import {
Menu as MenuIcon,
ListAlt as ListAltIcon,
Inventory as InventoryIcon, // テストページ用のアイコン
} from '@mui/icons-material';
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
@ -91,13 +92,21 @@ const Layout: React.FC = () => {
role="presentation"
>
<List>
<ListItemButton
onClick={() => handleNavigate('/tasks')}
<ListItemButton
onClick={() => handleNavigate('/tasks')}
selected={isSelected('/tasks')}
>
<ListItemIcon><ListAltIcon /></ListItemIcon>
<ListItemText primary="タスク一覧" />
</ListItemButton>
{/* テストページへのリンクを追加 */}
<ListItemButton
onClick={() => handleNavigate('/stock')}
selected={isSelected('/stock')}
>
<ListItemIcon><InventoryIcon /></ListItemIcon>
<ListItemText primary="在庫管理" />
</ListItemButton>
<Divider />
</List>
</Box>

@ -0,0 +1,16 @@
/**
*
*
*/
import React from 'react';
import { Box } from '@mui/material';
const StockPage: React.FC = () => {
return (
<Box>
{/* 白紙のページ - 何も表示しない */}
</Box>
);
};
export default StockPage;
Loading…
Cancel
Save