Add the sidebar

The first thing I want to do here is to add a sidebar to the single house page.

Here’s Airbnb:

and here’s our page now:

I want to add a little sidebar in our page, to host the calendar.

The first thing we’ll do is the markup.

Right now this is the markup generated by the pages/houses/[id].js page:

pages/houses/[id].js

const House = props => (
  <Layout
    content={
      <div>
        <Head>
          <title>{props.house.title}</title>
        </Head>
        <img src={props.house.picture} width='100%' alt='House picture' />
        <p>
          {props.house.type} - {props.house.town}
        </p>
        <p>{props.house.title}</p>
        <p>
          {props.house.rating} ({props.house.reviewsCount})
        </p>
      </div>
    }
  />
)

I want to wrap all this content in a article tag, and add an aside tag, at the end of the <div> container (I’m also going to assign a container class to it):

pages/houses/[id].js

const House = props => (
  <Layout
    content={
      <div className="container">
        <Head>
          <title>{props.house.title}</title>
        </Head>
        <article>
          <img src={props.house.picture} width='100%' alt='House picture' />
          <p>
            {props.house.type} - {props.house.town}
          </p>
          <p>{props.house.title}</p>
          <p>
            {props.house.rating} ({props.house.reviewsCount})
          </p>
        </article>
        <aside>
          <h2>Add dates for prices</h2>
        </aside>
      </div>
    }
  />
)

The aside tag is generally used to add a piece of content that is related to the main content. In our case, it’s perfect.

Let’s add some CSS to make the main part of the page and the aside align like in the Airbnb page:

<style jsx>{`
  .container {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-gap: 30px;
  }

  aside {
    border: 1px solid #ccc;
    padding: 20px;
  }
`}</style>

Here’s the full code of pages/houses/[id].js right now:

pages/houses/[id].js

import Head from 'next/head'
import Layout from '../../components/Layout'

import houses from '../houses.json'

const House = props => (
  <Layout
    content={
      <div className='container'>
        <Head>
          <title>{props.house.title}</title>
        </Head>
        <article>
          <img src={props.house.picture} width='100%' alt='House picture' />
          <p>
            {props.house.type} - {props.house.town}
          </p>
          <p>{props.house.title}</p>
          <p>
            {props.house.rating} ({props.house.reviewsCount})
          </p>
        </article>
        <aside>
          <h2>Add dates for prices</h2>
        </aside>

        <style jsx>{`
          .container {
            display: grid;
            grid-template-columns: 60% 40%;
            grid-gap: 30px;
          }

          aside {
            border: 1px solid #ccc;
            padding: 20px;
          }
        `}</style>
      </div>
    }
  />
)

House.getInitialProps = ({ query }) => {
  const { id } = query

  return {
    house: houses.filter(house => house.id === id)[0]
  }
}

export default House

Here’s our result:

The code for this lesson is available at https://github.com/flaviocopes/airbnb-clone-react-nextjs/commit/087089e4ba0177dfa789e66d57d605089efab44f

Go to the next lesson