title: Making a sidebar collapsable on mobile
body: <p>I have a row of two columns. The left column has a sidebar that stacks on top of the column on the right column on and below the iPad's width. I want it to be collapsible, show active link on as the title and dropdown to show the menu when clicked.</p>
  <p>I have tried a few ways to achieve this but I cannot get it to work.</p>
  <p>Here's the HTML:</p>
  <pre><code>&lt;div class=&quot;col-lg-3 customer-portal-base&quot;&gt;
        &lt;ul class=&quot;side-bar&quot;&gt;
            &lt;li class=&quot;side-bar__item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;side-bar__item-link&quot;&gt;Account&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;side-bar__item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;side-bar__item-link&quot;&gt;Orders&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;side-bar__item&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;side-bar__item-link&quot;&gt;Order details&lt;/a&gt;
          &lt;/li&gt;
            &lt;li class=&quot;side-bar__item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;side-bar__item-link&quot;&gt;My details&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;side-bar__item side-bar__item--is-active&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;side-bar__item-link side-bar__item-link--is-active&quot;&gt;Account settings&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;side-bar__item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;side-bar__item-link&quot;&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;side-bar__item&quot;&gt;
                &lt;a href=&quot;#&quot; class=&quot;side-bar__item-link&quot;&gt;Logout&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  <p>And here's the SCSS:</p>
  <pre><code>.side-bar {
    padding: 0;
    background-color: white;
    list-style: none;
    margin-top: 0;
    width: 97%;
  
    &amp;__item {
      &amp;-link {
        font-weight: lighter;
        transition: all 0.5s;
  
        &amp;--is-active {
          color: blue;
          font-weight: 600;
  
          &amp;::after {
            background-image: url(&quot;&quot;);
            content: &quot;&quot;;
            display: inline-block;
            background-repeat: no-repeat;
            background-position: center center;
            width: 1.8rem;
            height: 1rem;
            margin-left: 3rem;
            transform: translateY(0.2rem);
  
            @include sidebar-breakpoint {
              display: none;
            }
          }
        }
  
        &amp;:hover, &amp;:active {
          color: blue;
        }
      }
      cursor: pointer;
      padding: 1.1rem 0 1.1rem 1.5rem;
      border-bottom: solid 1px grey;
      font-size: 0.9rem;
  
      &amp;:last-child {
        border-bottom: 0;
      }
    }
  }
  </code></pre>