bulma/docs/_includes/navbar.html
2018-04-09 01:12:55 +01:00

127 lines
4.9 KiB
HTML

<nav id="navbar" class="navbar is-fixed-top {% if include.transparent %}is-transparent{% endif %}">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
</a>
<!-- <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fab fa-lg fa-twitter"></i>
</span>
</a> -->
<div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenu{{ include.id }}" class="navbar-menu is-active">
<div class="navbar-start">
<a class="navbar-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
<span class="icon has-text-primary">
<i class="fas fa-book"></i>
</span>
<span>Documentation</span>
</a>
<a class="navbar-item {% if page.route == 'templates' %}is-active{% endif %}" href="{{ site.url }}/templates/">
<span class="icon has-text-info">
<i class="fas fa-code"></i>
</span>
<span>Templates</span>
</a>
<a class="navbar-item {% if page.route == 'videos' %}is-active{% endif %}" href="{{ site.url }}/videos/">
<span class="icon has-text-success">
<i class="fas fa-play-circle"></i>
</span>
<span>Videos</span>
</a>
<a class="navbar-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
<span class="icon" style="color: #f26522;">
<i class="fas fa-rss"></i>
</span>
<span>Blog</span>
</a>
<a class="navbar-item {% if page.route == 'expo' %}is-active{% endif %}" href="{{ site.url }}/expo/">
<span class="icon" style="color: #FFD257;">
<i class="fas fa-star"></i>
</span>
<span>Expo</span>
</a>
<a class="navbar-item {% if page.route == 'love' %}is-active{% endif %}" href="{{ site.url }}/love/">
<span class="icon has-text-danger">
<i class="fas fa-heart"></i>
</span>
<span>Love</span>
</a>
<div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link">
More
</div>
<div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
{% for item in site.data.global.more_items %}
<a class="navbar-item {% if page.route == item.id %}is-active{% endif %}" href="{{ site.url }}/{{ item.id }}/">
<div class="media">
<div class="media-left">
<span class="icon is-large has-text-{{ item.color }}">
<i class="{{ item.fa_type }} {{ item.fa_icon }} fa-2x"></i>
</span>
</div>
<div class="media-content">
<p>
<strong>{{ item.title }}</strong>
<br>
<small>{{ item.description }}</small>
</p>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
<div class="navbar-end">
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.github }}" target="_blank">
<span class="icon" style="color: #333;">
<i class="fab fa-lg fa-github"></i>
</span>
</a>
<a class="navbar-item is-hidden-desktop-only" href="{{ site.data.meta.twitter }}" target="_blank">
<span class="icon" style="color: #55acee;">
<i class="fab fa-lg fa-twitter"></i>
</span>
</a>
<div class="navbar-item">
<div class="field is-grouped is-grouped-multiline">
<p class="control">
<a href="https://www.patreon.com/jgthms" target="_blank" style="display: block;">
<img
style="border-radius: 3px; display: block; max-height: 36px;"
src="/images/become_a_patron_button.png"
width="153"
height="36"
srcset="/images/become_a_patron_button@3x.png 3x,
/images/become_a_patron_button@2x.png 2x,
/images/become_a_patron_button.png 1x"
alt="Become a patron">
</a>
</p>
<p class="control">
<a class="button is-primary" href="{{ site.data.meta.download }}">
<strong>Download</strong>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>