
{% load static %}
{% load custom_tags %}

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <!-- Font Awesome icons (free version)-->
  <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>

  <div style=" font-family: Helvetica, Verdana, 'Segoe UI', sans-serif">
    <nav class="navbar navbar-fixed-top" role="navigation" style="z-index:5;">
      <div class="header" >
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" style="color:#003c58; font-size: 1.5em;" href="{% url 'home' %}">zDB</a>
            <a href="#menu-toggle"  id="menu-toggle" style="margin-top:0.1em; margin-right: 0em; font-size: 2.5em" > <i class="fa fa-bars "  style="font-size:0.8em !Important;" aria-hidden="true" aria-hidden="true"></i></a>
        </div>
        <div style="padding-left:250px">
          <div id="page_title" class="navbar-brand"><p class="home-title">{{page_title}}</p></div>
        </div>
      </div> <!-- /.container-fluid -->
    </nav>


    
    <div class="sidenav" id="menu_box" >      <!-- Sidebar -->
          <ul class="sidebar-nav" >
              <li class="sidebar-brand">
                <nav id="sidebar-wrapper">
                  <li><form class="example" role="search" action='{% url "search_bar" %}' method="GET" >
                    <button type="submit"><i class="fa fa-search"></i></button>
                    <div class="ui-widget">
                      <input type="text" placeholder="Gene, product, orthogroup, COG, KEGG id, ..."  name="search2" id="searchbar">
                    </div>
                    
                  </form></li>
               
                  <li class="sidebar-nav-item" id="menu_element"><a href="{% url 'home' %}#home"><b>Home</b></a></li>
                  <li class="sidebar-nav-item" id="menu_element"><a href="{% url 'genomes' %}" ><b>Genomes</b></a></li>
                  <li class="sidebar-nav-item" id="menu_element"><a href="{% url 'phylogeny' %}" ><b>Phylogeny</b></a></li>
                  <hr class="line-menu">
                  <li class="analyses"><b>Analyses</b></a></li>
                  <li class="sidebar-dropdown" ><p> Homology search</p> 
                  <li class="analyses_intra" ><a href="{% url 'blast' %}">Blast</a></li>
                  <li class="sidebar-dropdown" ><p> Orthology</p> 
                  <li class="analyses_intra"><a href="{% url 'index_comp' 'orthology' %}">Orthogroups</a></il>
                   <li class="sidebar-dropdown" ><p> Annotations</p> 
                  {% if optional2status|keyvalue:"COG" == 1 %}
                  <li class="analyses_intra" ><a   href="{% url 'index_comp' 'COG' %}">COGs</a></li>
                  {% endif %}
                  {% if optional2status|keyvalue:"pfam" == 1 %}
                  <li class="analyses_intra"><a   href="{% url 'index_comp' 'Pfam' %}">Pfam domains</a></li>
                  {% endif %}
                  {% if optional2status|keyvalue:"KEGG" == 1 %}
                  <li class="analyses_intra" ><a   href="{% url 'index_comp' 'ko' %}">Kegg Orthologs</a></li>
                  {% endif %}
                  
        <li class="sidebar-dropdown" ><p> Genome alignments</p>
              <li class="analyses_intra"><a   href="{% url 'plot_region' %}">Plot region</a></li>
              <li class="analyses_intra"><a   href="{% url 'circos' %}">Circos</a></li>
              {% if optional2status|keyvalue:"KEGG" %}
          <li  class="sidebar-dropdown" ><p>Metabolism</p>
          <li class="analyses_intra"><a    href="{% url 'kegg' %}">Kegg based</a></li>
                {% endif %}

          <hr class="line-menu">
          <li class="sidebar-nav-item"><a  href="{% url 'FAQ' %}"><b>FAQ</b></a></li>
          <li class="sidebar-nav-item"><a  href='https://zdb.readthedocs.io/en/latest/'target="_blank"><b>Documentation</b></a></li>
          <li class="sidebar-nav-item"><a   href="{% url 'about' %}"><b>References</b></a></li>
          <li class="sidebar-nav-item" style="margin-bottom: 5em"><a href="https://github.com/metagenlab/annotation_pipeline_nextflow"><i class="fab fa-github" ></i><b> Project and contacts</b></a></li> 
            



        </ul>
    </div> <!-- /.container-fluid -->
  </div> <!-- /#sidebar-wrapper -->

</div>

<script>

/*
$(document).ready(function(){ 
    $("#searchbar").autocomplete({
        source: "/search_suggest/",
        minLength: 3,
        position: {
        offset: '20 4' // Shift 20px to the left, 4px down.
    }
      });        
});
*/

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled"); 

});


$(document).ready(function() {
    breakpoint = 800;
    function changeMenuStyle() {
        var w = document.documentElement.clientWidth;
        console.log('size');
        console.log(w);
        if (w < breakpoint) {
          $("#wrapper").toggleClass("toggled"); 
        } 
      }

    window.addEventListener("resize", changeMenuStyle);
    changeMenuStyle();
});


$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('#page_title').fadeOut();
  } else {
    $('#page_title').fadeIn();
  }
});
</script>
<style>
.ui-autocomplete { position: absolute; cursor: default;z-index:3000 !important; background: #29a0e6}  
.right-caret {
    border-bottom: 4px solid transparent;
    border-top: 4px solid #FAFAFA;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    display: inline-block;
    height: 0;
    opacity: 1;
    width: 0;
}
.bottom-caret {
    border-bottom: 4px solid transparent;
    border-top: 4px solid #FAFAFA;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    display: inline-block;
    height: 0;
    opacity: 1;
    width: 0;
}
ul{
  list-style-type: none;
  padding-left: 0px;
}

.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    padding-right: 0px;
    color: grey;         /* adjust as needed */
}

.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
* {
  box-sizing: border-box;
}




</style>
