¿Cómo hacer Drawer usando Material UI?

Material UI Drawer es el componente más utilizado de Material UI. Material UI Drawer se usa como una barra de navegación del sitio web que muestra una lista de elementos y luego, al hacer clic en el elemento, el usuario será redirigido a la parte específica de la página web/sitio web. Se ve en casi todos los sitios web, ya que brindan una mejor interacción con el usuario y facilitan la navegación entre las diferentes partes de la aplicación. 

A continuación se muestran algunos accesorios y tipos importantes de Material UI Drawer:

Material UI proporciona tres tipos de cajones en términos generales:

1. Cajón Temporal:Este cajón se mostrará en la página web solo cuando se pase un valor verdadero a la propiedad abierta . El cajón aparece como un modal en la parte superior de la página web actual dando un fondo sombreado al contenido como en nuestro ejemplo a continuación.

2. Cajón persistente: este cajón es visible en la página web cuando se pasa un valor verdadero a la propiedad abierta pero, a diferencia de un cajón temporal, ocupa una cierta cantidad de espacio en la página web actual ajustando el contenido de la página web.

3. Cajón Permanente: Aquí el cajón siempre está visible para el usuario. Aquí no es necesario pasar el objeto abierto al componente Cajón.

Requisitos previos: un proyecto ReactJS de trabajo a pequeña escala.

Ejemplo: diseñaremos una página de inicio que tenga un icono de menú en la parte superior izquierda cuando se haga clic en él y se muestren dos elementos de menú como se indica a continuación:

1. Sobre nosotros
2. Contáctenos

Donde cada menú al hacer clic, nos lleva a la página correspondiente de la aplicación.

Instalación del módulo: Pero antes de continuar, debemos instalar los siguientes paquetes en nuestro proyecto. Abre tu terminal y escribe los siguientes comandos:

npm i @material-ui/core

Instala React Components en nuestro proyecto. En nuestro caso, instala el componente Cajón.

npm i react-router-dom

Esto proporciona los componentes de enrutamiento para los sitios web. En palabras simples, esto es necesario para redirigir al usuario de una parte de la aplicación a otra.

npm i @material-ui/icons

El comando anterior instalará los iconos de la interfaz de usuario del material. Es opcional de instalar.

Todos los comandos anteriores deberían hacer cambios en su paquete.json en su proyecto que se ve así:

"dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    // Other dependencies starts from here
    ...................... 
  },

Ejemplo: 1 Muévase a su carpeta src usando el siguiente comando:

cd src

Ahora vamos a crear tres páginas web llamadas Home.js, About.js y Contact.js como se muestra a continuación:

Nombre de archivo: Home.js

import React from 'react';
const styles = {
  home: {
    padding: '50px',
    textAlign: 'center',
    backgroundColor: '#28462f',
    color: 'white',
  }
};
export default class Home extends React.Component {
  render() {
    return <div style={styles.home}>
    <h1>Home Page</h1>
      
    <p>This is the Landing Page of the Application</p>
  </div>;
  }
}

Producción:  

Nombre de archivo: Contacto.js

import React from 'react';
const styles = {
  contact: {
    padding: '50px',
    textAlign: 'center',
    backgroundColor: '#46282d',
    color: 'white',
  }
};
  
export default class Contact extends React.Component {
  render() {
    return <div style={styles.contact}>
    <h1>Contact Us Page</h1>
      
    <p>Some text about how to contact us.</p>
  </div>;
  }
}

Producción:

Nombre de archivo: Acerca de.js

import React from 'react';
const styles = {
  about: {
    padding: '50px',
    textAlign: 'center',
    backgroundColor: '#474e5d',
    color: 'white',
  }
};
  
export default class About extends React.Component {
  render() {
    return <div style={styles.about}>
    <h1>About Us Page</h1>
      
    <p>Some text about who we are and what we do.</p>
  </div>;
  }
}

Producción:

Estas son las páginas que cambiamos haciendo clic en el cajón. Ahora es el momento de integrar todos los componentes anteriores. Cree otro archivo llamado cajón.js como se muestra a continuación:

Nombre de archivo: cajón.js

import React from 'react';
import { Drawer, Divider, IconButton } 
    from '@material-ui/core';
import { List, ListItem, ListItemIcon, ListItemText } 
    from '@material-ui/core';
import PermContactCalendarIcon from 
    '@material-ui/icons/PermContactCalendar';
import ReorderIcon from '@material-ui/icons/Reorder';
import AccountCircleIcon from 
    '@material-ui/icons/AccountCircle';
import { Link } from 'react-router-dom';
  
const styles = {
  sideNav: {
    marginTop: '-60px',
    zIndex: 3,
    marginLeft: '0px',
    position: 'fixed',
  },
  link: {
    color: 'black',
    textDecoration: 'none',
  }
};
  
export default class MarerialUIDrawer 
    extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDrawerOpened: false,
    };
  }
  toggleDrawerStatus = () => {
    this.setState({
      isDrawerOpened: true,
    })
  }
  closeDrawer = () => {
    this.setState({
      isDrawerOpened: false,
    })
  }
  render() {
    const { isDrawerOpened } = this.state;
    return (
      <div>
         <div style={styles.sideNav}>
            <IconButton onClick={this.toggleDrawerStatus}>
              {!isDrawerOpened ? <ReorderIcon /> : null }
            </IconButton>
          </div>
          <Divider/>
        <Drawer
          variant="temporary"
          open={isDrawerOpened}
          onClose={this.closeDrawer}
        >
          <Link to='/about' style={styles.link}>
            <List>
              <ListItem button key='About Us'>
                <ListItemIcon><AccountCircleIcon/>
                </ListItemIcon>
                <ListItemText primary='About Us' />
              </ListItem>
            </List>
          </Link>
          <Link to='/contact' style={styles.link}>
          <List>
            <ListItem button key='Contact Us'>
              <ListItemIcon><PermContactCalendarIcon/>
              </ListItemIcon>
              <ListItemText primary='Contact Us' />
            </ListItem>
            </List>
          </Link>
        </Drawer>
      </div>
    );
  }
}

Aquí, en este ejemplo, hemos utilizado íconos para Acerca de nosotros, Contáctenos y también para el botón que nos abrirá el cajón. También se pueden dar algunos nombres simples e intuitivos (texto) en lugar de iconos.

El último y último paso es dar el patrón de enrutamiento adecuado a cada componente e importar nuestro Cajón en App.js como se muestra a continuación:

Nombre de archivo: App.js

import './App.css';
import Home from './Home';
import Contact from './Contact';
import About from './About';
import MarerialUIDrawer from './drawer';
import { BrowserRouter, Route, Switch } 
    from 'react-router-dom';
  
function App() {
  return (
    <div className="App">
     <h1 style={{color: '#323576'}}>Material-UI Drawer</h1>
     <BrowserRouter>
     <MarerialUIDrawer/>
      <Switch>
        <Route exact path='/' render=
            {props => <Home {...props} /> }/>
        <Route exact path='/about' render=
            {props => <About {...props} /> }/>
        <Route exact path='/contact' render=
            {props => <Contact {...props} /> }/>
      </Switch>
    </BrowserRouter>
    </div>
  );
}
  
export default App;

Producción:

Nota: Este es un ejemplo de un Cajón Temporal. Mostró la lista como un modal en el lado izquierdo (por defecto). Agregue una propiedad de anclaje al componente Cajón en el cajón.js y proporcione algunos valores para observar los cambios. Del mismo modo, cambie los valores de propiedad de la variante para verificar los cajones persistentes y permanentes.

Referencia: Conozca más sobre Material UI Drawer, consulte la documentación oficial desde el siguiente enlace: https://material-ui.com/