examples/sidebar.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OpenLayers - LayerSwitcher sidebar</title>
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <link
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.css"
    />
    <link rel="stylesheet" href="ol-sidebar/ol-sidebar.css" />
    <link rel="stylesheet" href="../dist/ol-layerswitcher.css" />
    <link rel="stylesheet" href="sidebar.css" />
  </head>
  <body>
    <!-- START OF SIDEBAR DIV -->
    <div id="sidebar" class="sidebar collapsed">
      <!-- Nav tabs -->
      <div class="sidebar-tabs">
        <ul role="tablist">
          <li>
            <a href="#home" role="tab"><i class="fa fa-bars"></i></a>
          </li>
          <li>
            <a href="#profile" role="tab"><i class="fa fa-user"></i></a>
          </li>
          <li class="disabled">
            <a href="#messages" role="tab"><i class="fa fa-envelope"></i></a>
          </li>
          <li>
            <a
              href="https://github.com/Turbo87/sidebar-v2"
              role="tab"
              target="_blank"
              ><i class="fa fa-github"></i
            ></a>
          </li>
        </ul>

        <ul role="tablist">
          <li>
            <a href="#settings" role="tab"><i class="fa fa-gear"></i></a>
          </li>
        </ul>
      </div>

      <!-- Tab panes -->
      <div class="sidebar-content">
        <div class="sidebar-pane" id="home">
          <h1 class="sidebar-header">
            Layers
            <span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
          </h1>
          <!-- !!! HERE WILL GO THE CONTENT OF LAYERSWITCHER !!! -->
          <div id="layers" class="layer-switcher"></div>
        </div>

        <div class="sidebar-pane" id="profile">
          <h1 class="sidebar-header">
            Profile<span class="sidebar-close"
              ><i class="fa fa-caret-left"></i
            ></span>
          </h1>
        </div>

        <div class="sidebar-pane" id="messages">
          <h1 class="sidebar-header">
            Messages<span class="sidebar-close"
              ><i class="fa fa-caret-left"></i
            ></span>
          </h1>
        </div>

        <div class="sidebar-pane" id="settings">
          <h1 class="sidebar-header">
            Settings<span class="sidebar-close"
              ><i class="fa fa-caret-left"></i
            ></span>
          </h1>
        </div>
      </div>
    </div>
    <!-- END OF SIDEBAR DIV -->

    <div id="map" class="sidebar-map"></div>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.js"></script>
    <script src="ol-sidebar/ol-sidebar.js"></script>
    <script src="../dist/ol-layerswitcher.js"></script>
    <script src="sidebar.js"></script>
  </body>
</html>