Step by Step Guide to React Sliding-Drawer

For my Flatiron School bootcamp Mod4 project, I wanted to have a sliding-drawer that displays some user information. While there were multiple pre-made codes available on npmjs.com, I decided to make my own as I felt like it’d be easier and faster for me. Here are the following steps to do so:

1. Create a new React app and do npm i && npm start to run the app.

npx create-react-app slide-drawer

2. Create relevant files to work on including CSS files. We’re going to click on a button on the mainPage.js that triggers SlideDrawer to slide in.

App.js
  |
 Components
  |___ MainPage.js     // this is where the button live
  | 
 SlideDrawer  
  |___ SlideDrawer.js  // slide drawer
  |___ SlideDrawer.css
  |___ Backdrop.js
  |___ Backdrop.css

3. Set up the initial state of drawerOpen to false on the App.js and pass it down as a prop to <SlideDrawer />

# App.js

import React from 'react'
import MainPage from './Components/MainPage.js'
import SlideDrawer from './SlideDrawer/SlideDrawer.js'
import Backdrop from './SlideDrawer/Backdrop.js'
class App extends React.Component {
   state = { drawerOpen: false }
   render(){
      return(
      <div>
        < SlideDrawer show={this.state.drawerOpen}/>
        < Backdrop />   // refer to step 6 to define this
        < MainPage />   // refer to step 7 to define this
      </div>
      )
    }
} 

4. Define the drawer class style. Make sure the height of both html and body are 100% as well as the .side-drawer. Translate X(100%) will locate the left edge of the side-drawer right edge of the screen, which means it will hide it from the viewer. However, if the .side-drawer gets another class ‘.open’, it will animate(slide in), and locate in the right side of the screen.

# SlideDrawer.css

html { 
   height: 100% 
}
body { 
   margin: 0; 
   padding: 0; 
   height: 100% ;
}
.side-drawer { 
   height: 100%
   background: white;
   position: fixed;
   top: 0;
   right: 0;
   width: 40%;
   z-index: 200;
   box-shadow: 1px 0px 7px rgba(0,0,0,0.5); 
   transform: translateX(100%);
   transition: transform 0.3s ease-out;
}
.side-drawer.open {
   transform: translateX(0);
}

5. We will conditionally assign the class name for the div depending on the prop(state of the App) we received from the App.js.

# SlideDrawer.js
import React from 'react'
import './SlideDrawer.css'
export default class SlideDrawer extends React.Component {
   render(){
       let drawerClasses = 'side-drawer'
       if(this.props.show) {
          drawerClasses = 'side-drawer open'
       }
       return(
   
          <div className={drawerClasses}>
             <h1>Hello, I'm sliding!</h1>
          </div>
)
    }
    
}

6. Define the backdrop. It is a dark transparent pane that is sitting in between the <MainPage /> and the <SlideDrawer />. It will be used to close the drawer later on.

# Backdrop.js
import React from 'react'
import './Backdrop.css'
export default class Backdrop extends React.Component {
  render(){
    return(
      <div className="backdrop" />
    )
  }
}

====================================================
# Backdrop.css

.backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 100;
  top: 0;
  right: 0;
}

7. We will then define the drawerToggleClickHandler function, which will toggle the state, and send it down as a prop to <MainPage>. Also, we will render the backdrop conditionally so that it will only appear when the drawer is open.

# App.js

import React from 'react'
import MainPage from './Components/MainPage.js'
import SlideDrawer from './SlideDrawer/SlideDrawer.js'
import Backdrop from './SlideDrawer/Backdrop.js'
class App extends React.Component {
   state = { drawerOpen: false }

   drawerToggleClickHandler = () => {
       this.setState({
         drawerOpen: !this.state.drawerOpen
       })
   }
   render(){
      let backdrop;
      if(this.state.drawerOpen){
        backdrop = <Backdrop/>;
       }
      return(
          <div>
             < SlideDrawer show={this.state.drawerOpen}/>
             { backdrop }
             < MainPage toggle={this.drawerToggleClickHandler}/>
          </div>
      )  
    }

====================================================
# MainPage.js

import React from 'react'
export default class MainPage extends React.Component {
   render(){
     return (
        <div>
          <button onClick={this.props.toggle}>Click me!</button>
        </div>
     )
    }   
}

8. Finally, the drawer would slide in, but it would not close. We need to pass down another function that will always set the drawerOpen state ‘false’, hence, hide the drawer when the backdrop is clicked.

# App.js

import React from 'react'
import MainPage from './Components/MainPage.js'
import SlideDrawer from './SlideDrawer/SlideDrawer.js'
import Backdrop from './SlideDrawer/Backdrop.js'
export default class App extends React.Component {
   state = { drawerOpen: false }
drawerToggleClickHandler = () => {
    this.setState({
      drawerOpen: !this.state.drawerOpen
    })
  }
backdropClickHandler = () => {
    this.setState({
      drawerOpen: false
    })
  }
   render(){
      let backdrop;
      if(this.state.drawerOpen){
        backdrop = <Backdrop close={this.backdropClickHandler}/>;
       }
      return(

         <div>
           < SlideDrawer show={this.state.drawerOpen} />
           { backdrop }
           < MainPage toggle={this.drawerToggleClickHandler} />
         </div>
      )
    }
}

=========================================================
# Backdrop.js
import React from 'react'
import './Backdrop.css'
export default class Backdrop extends React.Component {
  render(){
    return(
      <div
        className="backdrop"
        onClick={this.props.close}
      />
    )
  }
}

Ta-da! We completed building a sliding drawer!

This is what we just made!

Source

https://www.academind.com/learn/react/snippets/navbar-side-drawer/