Add dropdown style navbar.

This commit is contained in:
Christopher Charbonneau Wells 2017-08-17 22:15:15 -04:00
parent f474ccb8b9
commit 93b942e811
3 changed files with 94 additions and 2 deletions

View File

@ -22,7 +22,15 @@
{% block nav %}{% endblock %} {% block nav %}{% endblock %}
{% block page %}{% endblock %} {% block page %}{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"
integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>

View File

@ -0,0 +1,84 @@
{% extends 'babyblotter/base.html' %}
{% block nav %}
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/"><span class="text-info">Baby</span> Blotter</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item{% if request.path == '/' %} active{% endif %}">
<a class="nav-link" href="{% url 'index' %}">
<i class="fa fa-dashboard" aria-hidden="true"></i> Dashboard
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
id="nav-activity-menu-link"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"><i class="fa fa-child" aria-hidden="true"></i> Activites</a>
<div class="dropdown-menu" aria-labelledby="nav-activity-menu-link">
{% if perms.core.view_diaperchange %}
<a class="dropdown-item{% if request.path == '/changes/' %} active{% endif %}"
href="{% url 'diaperchange-list' %}"><i class="fa fa-trash" aria-hidden="true"></i> Changes</a>
{% endif %}
{% if perms.core.add_diaperchange %}
<a class="dropdown-item pl-5{% if request.path == '/changes/add/' %} active{% endif %}"
href="{% url 'diaperchange-add' %}"><i class="fa fa-plus" aria-hidden="true"></i> Change</a>
{% endif %}
{% if perms.core.view_feeding %}
<a class="dropdown-item{% if request.path == '/feedings/' %} active{% endif %}"
href="{% url 'feeding-list' %}"><i class="fa fa-spoon" aria-hidden="true"></i> Feedings</a>
{% endif %}
{% if perms.core.add_diaperchange %}
<a class="dropdown-item pl-5{% if request.path == '/feedings/add/' %} active{% endif %}"
href="{% url 'feeding-add' %}"><i class="fa fa-plus" aria-hidden="true"></i> Feeding</a>
{% endif %}
{% if perms.core.view_sleep %}
<a class="dropdown-item{% if request.path == '/sleep/' %} active{% endif %}"
href="{% url 'sleep-list' %}"><i class="fa fa-bed" aria-hidden="true"></i> Sleep</a>
{% endif %}
{% if perms.core.add_sleep %}
<a class="dropdown-item pl-5{% if request.path == '/sleep/add/' %} active{% endif %}"
href="{% url 'sleep-add' %}"><i class="fa fa-plus" aria-hidden="true"></i> Sleep entry</a>
{% endif %}
{% if perms.core.view_tummytime %}
<a class="dropdown-item{% if request.path == '/tummy-time/' %} active{% endif %}"
href="{% url 'tummytime-list' %}"><i class="fa fa-smile-o" aria-hidden="true"></i> Tummy Time</a>
{% endif %}
{% if perms.core.add_tummytime %}
<a class="dropdown-item pl-5{% if request.path == '/tummy-time/add/' %} active{% endif %}"
href="{% url 'tummytime-add' %}"><i class="fa fa-plus" aria-hidden="true"></i> Tummy Time entry</a>
{% endif %}
<div class="dropdown-divider"></div>
{% if perms.core.view_child %}
<a class="dropdown-item{% if request.path == '/children/' %} active{% endif %}" href="{% url 'child-list' %}">
<i class="fa fa-child" aria-hidden="true"></i> Children
</a>
{% endif %}
{% if perms.core.view_note %}
<a class="dropdown-item{% if request.path == '/notes/' %} active{% endif %}" href="{% url 'note-list' %}">
<i class="fa fa-sticky-note" aria-hidden="true"></i> Notes
</a>
{% endif %}
</div>
</li>
</ul>
</div>
</nav>
{% endblock %}

View File

@ -1,4 +1,4 @@
{% extends 'babyblotter/nav-horizontal.html' %} {% extends 'babyblotter/nav-dropdown.html' %}
{% load static %} {% load static %}
{% load timers %} {% load timers %}