Open Event search sidebar

by Niranjan Rajendran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<div class="ui vertical menu">
  <div class="item">
    Map can go here
  </div>
  <div class="item">
    <div class="ui input"><input type="text" placeholder="Location..."></div>
  </div>
  <div class="item">
    Categories
    <div class="menu">
      <a class="item">One</a>
      <a class="item">Two</a>
      <div class="active item">
        Three
        <div class="sub menu">
          <a class="item">Three -> One</a>
          <a class="item">Three -> Two</a>
          <a class="item">Three -> Three</a>
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    Event Type
    <div class="menu">
      <a class="item">One</a>
      <a class="item">Two</a>
      <a class="item">Three</a>
    </div>
  </div>
  <div class="item">
    Date
    <div class="menu">
      <a class="item">One</a>
      <a class="item">Two</a>
      <a class="item">Three</a>
    </div>
  </div>

</div>

SCSS

body {
  padding: 16px !important;
}
* {
 border-radius: 0 !important; 
}

/** All CSS Below this is needed for this to work as expected **/

.sub.menu {
  padding-left: 8px;
  
  .item {
    font-size: inherit !important;
  }
}