« React router » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
|||
Ligne 38 : | Ligne 38 : | ||
import { Link } from 'react-router-dom' | import { Link } from 'react-router-dom' | ||
import { | import { Drawer, ToggleButton, ToggleButtonGroup, Toolbar, Typography, IconButton } from '@mui/material'; | ||
import ChecklistIcon from '@mui/icons-material/Checklist'; | import ChecklistIcon from '@mui/icons-material/Checklist'; | ||
Ligne 62 : | Ligne 62 : | ||
return ( | return ( | ||
< | <> | ||
<IconButton id='hideMenuButton' onClick={toggleDrawer(true)}> | <IconButton id='hideMenuButton' onClick={toggleDrawer(true)}> | ||
<MenuIcon /> | <MenuIcon /> | ||
</IconButton> | </IconButton> | ||
<Drawer variant="persistent" open={open} | <Drawer variant="persistent" open={open}> | ||
<Toolbar | <Toolbar id='menuHeader'> | ||
<Typography variant="h6" color='info'>Items</Typography> | <Typography variant="h6" color='info'>Items</Typography> | ||
<IconButton onClick={toggleDrawer(false)}> | <IconButton onClick={toggleDrawer(false)}> | ||
Ligne 103 : | Ligne 102 : | ||
</ToggleButtonGroup> | </ToggleButtonGroup> | ||
</Drawer> | </Drawer> | ||
</ | </> | ||
) | ) | ||
} | } | ||
Ligne 109 : | Ligne 108 : | ||
<filebox fn='src/SideMenu.css' collapsed> | <filebox fn='src/SideMenu.css' collapsed> | ||
. | .MuiDrawer-root > div { | ||
width: 140px; | width: 140px; | ||
background-color: rgb(39, 39, 47); | background-color: rgb(39, 39, 47); | ||
} | } | ||
Ligne 124 : | Ligne 119 : | ||
} | } | ||
.MuiToggleButton-root { | #menuHeader { | ||
justify-content: space-evenly | justify-content: space-between; | ||
margin: 0.25rem 1rem | } | ||
padding: 0.75rem 0 | |||
border: 0 | a.MuiToggleButton-root { | ||
justify-content: space-evenly; | |||
margin: 0.25rem 1rem; | |||
padding: 0.75rem 0; | |||
border: 0; | |||
border-radius: 8px !important; | border-radius: 8px !important; | ||
} | } |
Dernière version du 27 octobre 2024 à 15:53
Links
Example
src/App.tsx |
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import Home from './pages/Home.tsx';
import About from './pages/About.tsx';
import SideMenu from './SideMenu';
export default function App() {
return (
<BrowserRouter>
{/* use basic menu */}
<nav style={{ margin: '20px' }}>
<Link to="/" style={{ marginRight: '10px' }}>Home</Link>
<Link to="/about" style={{ marginRight: '10px' }}>About</Link>
</nav>
{/* or the side menu */}
<SideMenu />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
)
}
|
src/SideMenu.tsx |
import { useState } from 'react';
import { Link } from 'react-router-dom'
import { Drawer, ToggleButton, ToggleButtonGroup, Toolbar, Typography, IconButton } from '@mui/material';
import ChecklistIcon from '@mui/icons-material/Checklist';
import InfoIcon from '@mui/icons-material/Info';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import MenuIcon from '@mui/icons-material/Menu';
import './SideMenu.css';
export default function SideMenu() {
const [open, setOpen] = useState(true);
const [selectedButton, setSelectedButton] = useState('home');
const toggleDrawer = (x: boolean) => () => {
setOpen(x);
};
const handleSelection = (event: React.MouseEvent<HTMLElement>, newSelection: string) => {
if (newSelection !== null) {
setSelectedButton(newSelection);
}
};
return (
<>
<IconButton id='hideMenuButton' onClick={toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<Drawer variant="persistent" open={open}>
<Toolbar id='menuHeader'>
<Typography variant="h6" color='info'>Items</Typography>
<IconButton onClick={toggleDrawer(false)}>
<ChevronLeftIcon />
</IconButton>
</Toolbar>
<ToggleButtonGroup
orientation="vertical"
value={selectedButton}
exclusive
onChange={handleSelection}
aria-label="navigation menu"
>
<ToggleButton
value="home"
component={Link}
to="/"
aria-label="home"
>
<ChecklistIcon color='success' />
Home
</ToggleButton>
<ToggleButton
value="about"
component={Link}
to="/about"
aria-label="about"
>
<InfoIcon color='warning' />
About
</ToggleButton>
</ToggleButtonGroup>
</Drawer>
</>
)
}
|
src/SideMenu.css |
.MuiDrawer-root > div {
width: 140px;
background-color: rgb(39, 39, 47);
}
#hideMenuButton {
position: absolute;
top: 1rem;
left: 1rem;
}
#menuHeader {
justify-content: space-between;
}
a.MuiToggleButton-root {
justify-content: space-evenly;
margin: 0.25rem 1rem;
padding: 0.75rem 0;
border: 0;
border-radius: 8px !important;
}
|
Installation
npm i react-router-dom |