lxd-dashboard/admin/sidebar.html

<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
  <div class="sidebar-brand-icon rotate-n-0">
    <!--<img src="theme/images/cube.png" style="width: 2rem;"></img>-->
    <i class="fas fa-cube" style="width: 2rem;"></i>
  </div>
  <div class="sidebar-brand-text mx-3"><span style="color: #e95420;">LXD</span>WARE</div>
</a>

<!-- Divider -->
<hr class="sidebar-divider">

<div id="main">
  <!-- Nav Item - Instances -->
  <li class="nav-item">
    <a class="nav-link" id="instancesLinkSidebar" href="#">
      <i id="instancesIcon" class="fas fa-fw fa-cube"></i>
      <span id="instancesSpan">Instances</span></a>
  </li>

  <!-- Nav Item - Images -->
  <li class="nav-item">
    <a class="nav-link" id="imagesLinkSidebar" href="#">
      <i id="imagesIcon" class="fas fa-fw fa-box-open"></i>
      <span id="imagesSpan">Images</span></a>
  </li>

  <!-- Nav Item - Profiles -->
  <li class="nav-item">
    <a class="nav-link" id="profilesLinkSidebar" href="#">
      <i id="profilesIcon" class="fas fa-fw fa-address-card"></i>
      <span id="profilesSpan">Profiles</span></a>
  </li>

  <!-- Nav Item - Networks -->
  <li class="nav-item">
    <a class="nav-link" id="networksLinkSidebar" href="#">
      <i id="networksIcon" class="fas fa-fw fa-network-wired"></i>
      <span id="networksSpan">Networks</span></a>
  </li>

  <!-- Nav Item - Storage Pools-->

  <li class="nav-item">
    <a class="nav-link" id="storagePoolsLinkSidebar" href="#">
      <i id="storagePoolsIcon" class="fas fa-fw fa-hdd"></i>
      <span id="storagePoolsSpan">Storage Pools</span></a>
  </li>

</div>

<!-- Divider -->
<hr class="sidebar-divider">
<div class="secondary">
  <!-- Nav Item - Cluster-->
  <li class="nav-item">
    <a class="nav-link" id="clusterLinkSidebar" href="#">
      <i id="clusterIcon" class="fas fa-fw fa-layer-group"></i>
      <span id="cluterSpan">Cluster</span>
    </a>
  </li>

  <!-- Nav Item - Projects-->
  <li class="nav-item">
    <a class="nav-link" id="projectsLinkSidebar" href="#">
      <i id="projectsIcon" class="fas fa-fw fa-project-diagram"></i>
      <span id="projectsSpan">Projects</span>
    </a>
  </li>

  <!-- Nav Item - Operations-->
  <li class="nav-item">
    <a class="nav-link" id="operationsLinkSidebar" href="#">
      <i id="operationsIcon" class="fas fa-fw fa-exchange-alt"></i>
      <span id="operationsSpan">Operations</span>
    </a>
  </li>

  <!-- Nav Item - Certificates-->
  <li class="nav-item">
    <a class="nav-link" id="certificatesLinkSidebar" href="#">
      <i id="certificatesIcon" class="fas fa-fw fa-wallet"></i>
      <span id="certificatesSpan">Certificates</span>
    </a>
  </li>
</div>

<!-- Divider -->
<hr class="sidebar-divider">
<div class="secondary">
  <!-- Nav Item - Image Simplestream Repositories-->
  <li class="nav-item">
    <a class="nav-link" id="simplestreamsLinkSidebar" href="#">
      <i id="simplestreamsIcon" class="fas fa-fw fa-archive"></i>
      <span id="simplestreamsSpan">Simplestreams</span>
    </a>
  </li>
</div>


<script>
  $("#instancesLinkSidebar").attr("href", "instances.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
  $("#imagesLinkSidebar").attr("href", "images.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
  $("#profilesLinkSidebar").attr("href", "profiles.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
  $("#networksLinkSidebar").attr("href", "networks.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
  $("#storagePoolsLinkSidebar").attr("href", "storage-pools.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));


  $("#clusterLinkSidebar").attr("href", "cluster.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
  $("#projectsLinkSidebar").attr("href", "projects.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
  $("#operationsLinkSidebar").attr("href", "operations.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));
  $("#certificatesLinkSidebar").attr("href", "certificates.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));

  $("#simplestreamsLinkSidebar").attr("href", "simplestreams.html?remote=" + encodeURI(remoteName) + "&project=" + encodeURI(projectName));

  if (location.pathname == "/admin/instances.html" || location.pathname == "/admin/instance.html"){
    $('#instancesSpan').css('color','#fff');
    $('#instancesIcon').css('color','#fff');
  }

  if (location.pathname == "/admin/images.html"){
    $('#imagesSpan').css('color','#fff');
    $('#imagesIcon').css('color','#fff');
  }

  if (location.pathname == "/admin/profiles.html"){
    $('#profilesSpan').css('color','#fff');
    $('#profilesIcon').css('color','#fff');
  }
  
  if (location.pathname == "/admin/networks.html"){
    $('#networksSpan').css('color','#fff');
    $('#networksIcon').css('color','#fff');
  }

  if (location.pathname == "/admin/storage-pools.html" || location.pathname == "/admin/storage-volumes.html"){
    $('#storagePoolsSpan').css('color','#fff');
    $('#storagePoolsIcon').css('color','#fff');
  }

  if (location.pathname == "/admin/cluster.html"){
    $('#cluterSpan').css('color','#fff');
    $('#clusterIcon').css('color','#fff');
  }

  if (location.pathname == "/admin/projects.html"){
    $('#projectsSpan').css('color','#fff');
    $('#projectsIcon').css('color','#fff');
  }

  if (location.pathname == "/admin/operations.html"){
    $('#operationsSpan').css('color','#fff');
    $('#operationsIcon').css('color','#fff');
  }

  if (location.pathname == "/admin/certificates.html"){
    $('#certificatesSpan').css('color','#fff');
    $('#certificatesIcon').css('color','#fff');
  }

  if (location.pathname == "/admin/simplestreams.html"){
    $('#simplestreamsSpan').css('color','#fff');
    $('#simplestreamsIcon').css('color','#fff');
  }

</script>