« React router » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 35 : Ligne 35 :


<filebox fn='src/SideMenu.tsx'>
<filebox fn='src/SideMenu.tsx'>
import { Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar, Typography, Divider } from '@mui/material';
import { useState } from 'react';
import { Link } from 'react-router-dom'


import { Link } from 'react-router-dom'
import { Box, Drawer, ToggleButton, ToggleButtonGroup, Toolbar, Typography, IconButton } from '@mui/material';


import ChecklistIcon from '@mui/icons-material/Checklist';
import ChecklistIcon from '@mui/icons-material/Checklist';
import InfoIcon from '@mui/icons-material/Info';
import InfoIcon from '@mui/icons-material/Info';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import MenuIcon from '@mui/icons-material/Menu';


const drawerWidth = 240;
import './SideMenu.css';


export default function SideMenu() {
export default function SideMenu() {
  return (
    const [open, setOpen] = useState(true);
     <Drawer
     const [selectedButton, setSelectedButton] = useState('home');
      sx={{
 
         width: drawerWidth,
    const toggleDrawer = (x: boolean) => () => {
         flexShrink: 0,
         setOpen(x);
         '& .MuiDrawer-paper': {
    };
          width: drawerWidth,
 
          boxSizing: 'border-box',
    const handleSelection = (event: React.MouseEvent<HTMLElement>, newSelection: string) => {
        },
        if (newSelection !== null) {
      }}
            setSelectedButton(newSelection);
      variant="permanent"
         }
      anchor="left"
    };
      className='sideMenu'
 
    >
    return (
      <Toolbar>
         <Box sx={{ display: 'flex' }}>
        <Typography variant="h6">Items</Typography>
 
      </Toolbar>
            <IconButton id='hideMenuButton' onClick={toggleDrawer(true)}>
      <Divider />
                <MenuIcon />
      <List>
            </IconButton>
        <ListItem disablePadding component={Link} to="/">
 
          <ListItemButton>
            <Drawer variant="persistent" open={open} className='sideMenu'>
            <ListItemIcon>
                <Toolbar className='menuHeader'>
              <ChecklistIcon />
                    <Typography variant="h6" color='info'>Items</Typography>
            </ListItemIcon>
                    <IconButton onClick={toggleDrawer(false)}>
            <ListItemText primary="Items" />
                        <ChevronLeftIcon />
          </ListItemButton>
                    </IconButton>
        </ListItem>
                </Toolbar>
        <ListItem disablePadding component={Link} to="/about">
 
          <ListItemButton>
                <ToggleButtonGroup
            <ListItemIcon>
                    orientation="vertical"
              <InfoIcon />
                    value={selectedButton}
            </ListItemIcon>
                    exclusive
            <ListItemText primary="About" />
                    onChange={handleSelection}
          </ListItemButton>
                    aria-label="navigation menu"
         </ListItem>
                >
      </List>
                    <ToggleButton
    </Drawer>
                        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>
         </Box>
    )
}
</filebox>
 
<filebox fn='src/SideMenu.css'>
.sideMenu > div {
    width: 140px;
    background-color: rgb(39, 39, 47);
}
 
.menuHeader {
    justify-content: space-between;
}
 
#hideMenuButton {
    position: absolute;
    top: 1rem;
    left: 1rem;
}
 
.MuiToggleButton-root {
    justify-content: space-evenly !important;
    margin: 0.25rem 1rem !important;
    padding: 0.75rem 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
}
}
</filebox>
</filebox>

Version du 27 octobre 2024 à 15:40

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 { Box, 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 (
        <Box sx={{ display: 'flex' }}>

            <IconButton id='hideMenuButton' onClick={toggleDrawer(true)}>
                <MenuIcon />
            </IconButton>

            <Drawer variant="persistent" open={open} className='sideMenu'>
                <Toolbar className='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>
        </Box>
    )
}
src/SideMenu.css 
.sideMenu > div {
    width: 140px;
    background-color: rgb(39, 39, 47);
}

.menuHeader {
    justify-content: space-between; 
}

#hideMenuButton {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.MuiToggleButton-root {
    justify-content: space-evenly !important;
    margin: 0.25rem 1rem !important;
    padding: 0.75rem 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
}

Installation

Bash.svg 
npm i react-router-dom
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=React_router&oldid=31271 »