SideBar Live Demo

Live Demo

Code Preview

  <div class="your-outer-container">
    <SideBar
      ref="sideBar"
      :envVars="envVars"
      :visible="sideBarVisibility"
      :class="['side-bar', { 'start-up': startUp }]"
      :activeId="activeDockedId"
      :open-at-start="startUp"
      @actionClick="actionClick"
      @tabClicked="tabClicked"
      @search-changed="searchChanged($event)"
      @contextUpdate="contextUpdate($event)"
    />
  </div>

  <script>
    import { SideBar } from "@abi-software/map-side-bar";

    export default {
      components: { SideBar },
      data: function () {
        return {
          sideBarVisibility: true,
          startUp: true,
          search: '',
          activeDockedId : 1,
        }
      }
    }
  </script>