Links

React Router

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