0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/docs/_includes/nav-docs.html
Mark Otto 42c52a278f Improve docs sidenav active link highlighting
Capture the slug once before applying it and add a slash to it to so we get a unique string to match against instead of a fuzzy partial 'contains'. Helps avoid 'grid' highlighting 'flexbox-grid', for example.
2016-02-06 00:22:31 -08:00

59 lines
2.1 KiB
HTML

<form class="bd-search hidden-sm-down">
<input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
<div class="dropdown-menu bd-search-results" id="search-results"></div>
</form>
<nav class="bd-links" id="docsNavbarContent">
{% for group in site.data.nav %}
{% assign link = group.pages | first %}
{% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
{% assign active = nil %}
{% if page.url contains slug %}
{% assign active = 'active' %}
{% endif %}
<div class="bd-toc-item {{ active }}">
{% if slug == "examples" %}
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/">
{% else %}
<a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' }}">
{% endif %}
{{ group.title }}
</a>
<ul class="nav bd-sidenav">
{% for doc in group.pages %}
{% assign slug = doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
{% capture slug %}/{{ slug }}{% endcapture %}
{% assign active = nil %}
{% if page.url contains slug %}
{% assign active = 'active bd-sidenav-active' %}
{% endif %}
<li class="{{ active }}">
<a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}">
{{ doc.title }}
</a>
{% comment %}
{% unless doc.sections == nil %}
<ul class="nav">
{% for section in doc.sections %}
<li>
<a href="#{{ section.title | downcase | replace: ' ', '-' }}">
{{ section.title }}
</a>
</li>
{% endfor %}
</ul>
{% endunless %}
{% endcomment %}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</nav>