« React router » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
 
(Une version intermédiaire par le même utilisateur non affichée)
Ligne 34 : Ligne 34 :
</filebox>
</filebox>


<filebox fn='src/SideMenu.tsx'>
<filebox fn='src/SideMenu.tsx' collapsed>
import { useState } from 'react';
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 { 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 (
         <Box sx={{ display: 'flex' }}>
         <>
 
             <IconButton id='hideMenuButton' onClick={toggleDrawer(true)}>
             <IconButton id='hideMenuButton' onClick={toggleDrawer(true)}>
                 <MenuIcon />
                 <MenuIcon />
             </IconButton>
             </IconButton>


             <Drawer variant="persistent" open={open} className='sideMenu'>
             <Drawer variant="persistent" open={open}>
                 <Toolbar className='menuHeader'>
                 <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>
         </Box>
         </>
     )
     )
}
}
</filebox>
</filebox>


<filebox fn='src/SideMenu.css'>
<filebox fn='src/SideMenu.css' collapsed>
.sideMenu > div {
.MuiDrawer-root > div {
     width: 140px;
     width: 140px;
     background-color: rgb(39, 39, 47);
     background-color: rgb(39, 39, 47);
}
.menuHeader {
    justify-content: space-between;
}
}


Ligne 124 : Ligne 119 :
}
}


.MuiToggleButton-root {
#menuHeader {
     justify-content: space-evenly !important;
    justify-content: space-between;
     margin: 0.25rem 1rem !important;
}
     padding: 0.75rem 0 !important;
 
     border: 0 !important;
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

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