Simple Responsive Sidebar

Create a very simple responsive sidebar in HTML, CSS and one tiny line of JavaScript.

DEMO

🦁 LION

🦄 UNICORN

🤗 CONTENT AREA

HTML

<div id="AreaBody">
  <!-- (A) SIDEBAR -->
  <div id="AreaSide">
    <!-- (A1) EXPAND/COLLAPSE SIDEBAR -->
    <button id="btnToggle" onclick="document.getElementById('AreaBody').classList.toggle('open')">
      &#9776;
    </button>
 
    <!-- (A2) SIDEBAR ITEMS -->
    <div class="item">
      <span class="ico">&#129409;</span> 
      <span class="txt">LION</span>
    </div>
    <div class="item">
      <span class="ico">&#129412;</span> 
      <span class="txt">UNICORN</span>
    </div>
  </div>
 
  <!-- (B) MAIN CONTENTS -->
  <div id="AreaContent">&#129303; CONTENT AREA</div>
</div>

CSS

/* (A) BIG SCREEN */
/* (A1) 2 COLUMN LAYOUT */
#AreaBody { display: flex; }
#AreaSide, #AreaContent { padding: 10px; }
#AreaSide {
  width: 200px;
  background: Gold;
}
#AreaSide * { margin-bottom: 10px; }
#AreaContent {
  width: 100%;
  background: PowderBlue;
}
/* (A2) HIDE DRAWER BUTTON */
#btnToggle { display: none; }
 
/* (B) SMALL SCREEN */
@media screen AND (max-width:768px) {
  /* (B1) SHOW TOGGLE SIDEBAR BUTTON */
  #btnToggle {
    display: inline-block;
    width: 100%;
    font-size: 24px;
  }

  /* (B2) COLLAPSED SIDEBAR BY DEFAULT */
  #AreaSide { 
    width: 50px; 
    text-align: center;
    transition: all 0.2s;
  }
  #AreaSide .ico { font-size: 30px; }
  #AreaSide .txt { display: none; }

  /* (B3) EXPAND SIDEBAR */
  #AreaBody.open #AreaSide {
    width: 200px;
    text-align: left;
  }
  #AreaBody.open .ico { font-size: inherit; }
  #AreaBody.open .txt { display: inline; }
}