Airbnb clone, add the sidebar

Join the 2022 Full-Stack Web Dev Bootcamp!


This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.

The first thing I want to do here is to add a sidebar to the single house page, that’s where we’ll add our date picker.

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 our pages/houses/[id].js content:

pages/houses/[id].js

export default function House(props) {
  return (
    <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>
        </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

export default function House(props) {
  return (
    <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>
          </article>
          <aside></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 houses from '../../houses.js'
import Layout from '../../components/Layout'

export default function House(props) {
  return (
    <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>
          </article>
          <aside></aside>

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

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

export async function getServerSideProps({ query }) {
  const { id } = query

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

Here’s our result:

See the code on GitHub

Next part: Add react-day-picker

Want to become a better Web Developer? Join the 2022 Web Development Bootcamp!

⭐️⭐️⭐️ Join the 2022 Web Development Bootcamp ⭐️⭐️⭐️