Skip to content

Commit

Permalink
chore: split sidebar up into several sub-menus
Browse files Browse the repository at this point in the history
  • Loading branch information
ngurenyaga committed Jul 17, 2021
1 parent 34fdc70 commit 08b6513
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 92 deletions.
8 changes: 8 additions & 0 deletions pepfar_mle/templates/fragments/atoms/brand.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{% load static i18n compress%}

<a class="sidebar-brand d-flex align-items-center justify-content-center" href="{% url 'home' %}">
<div class="sidebar-brand-icon rotate-n-15">
<img class="rounded-circle" width="60" height="60" src="{% static 'images/sghi_globe.png' %}" alt="PEPFAR Logo">
</div>
<div class="sidebar-brand-text mx-3">Program Database</div>
</a>
7 changes: 7 additions & 0 deletions pepfar_mle/templates/fragments/atoms/dashboard_link.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{% load static i18n compress%}

<li class="nav-item active">
<a class="nav-link" href="{% url 'home' %}">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
24 changes: 24 additions & 0 deletions pepfar_mle/templates/fragments/atoms/facilities_menu.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{% load static i18n compress%}

<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-hospital"></i>
<span>Facilities</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="{% url 'common:facilities' %}">
Facilities
</a>
<a class="collapse-item" href="{% url 'common:facilities' %}">
Systems
</a>
<a class="collapse-item" href="#">
System Versions
</a>
<a class="collapse-item" href="#">
Tickets
</a>
</div>
</div>
</li>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{% load static i18n compress%}

<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-file"></i>
<span>M & E Data Entry</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">DATIM</h6>
<a class="collapse-item" href="#">Prevention</a>
<a class="collapse-item" href="#">Testing</a>
<a class="collapse-item" href="#">Testing - Recent</a>
<a class="collapse-item" href="#">Testing - Others</a>
<a class="collapse-item" href="#">Treatment</a>
<a class="collapse-item" href="#">Viral Suppression</a>
<a class="collapse-item" href="#">Health Systems</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Surge</h6>
<a class="collapse-item" href="{% url 'about' %}">Testing</a>
<a class="collapse-item" href="{% url 'about' %}">APNS</a>
<a class="collapse-item" href="{% url 'about' %}">Treatment</a>
</div>
</div>
</li>
24 changes: 24 additions & 0 deletions pepfar_mle/templates/fragments/atoms/program_menu.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{% load static i18n compress%}

<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-tasks"></i>
<span>Program Reports</span>
</a>
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="#">
Activity Log
</a>
<a class="collapse-item" href="#">
Site Mentorship
</a>
<a class="collapse-item" href="#">
Daily Updates
</a>
<a class="collapse-item" href="#">
Timesheets
</a>
</div>
</div>
</li>
5 changes: 5 additions & 0 deletions pepfar_mle/templates/fragments/atoms/sidebar_toggle.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{% load static i18n compress%}

<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
102 changes: 10 additions & 92 deletions pepfar_mle/templates/fragments/sidebar.html
Original file line number Diff line number Diff line change
@@ -1,100 +1,18 @@
{% load static i18n compress%}

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="{% url 'home' %}">
<div class="sidebar-brand-icon rotate-n-15">
<img class="rounded-circle" width="60" height="60" src="{% static 'images/sghi_globe.png' %}" alt="PEPFAR Logo">
</div>
<div class="sidebar-brand-text mx-3">Program Database</div>
</a>
{% block brand %}
{% include "fragments/atoms/brand.html" %}
{% endblock brand %}
{% include "fragments/atoms/dashboard_link.html" %}

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

<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>

<!-- Divider -->
<hr class="sidebar-divider">
<div class="sidebar-heading">Operations</div>
{% include "fragments/atoms/facilities_menu.html" %}
{% include "fragments/atoms/program_menu.html" %}

<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>

<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-hospital"></i>
<span>Facilities</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="{% url 'common:facilities' %}">
Facility Register
</a>
<a class="collapse-item" href="#">
EMR Audit
</a>
</div>
</div>
</li>

<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-tasks"></i>
<span>Program Data</span>
</a>
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="#">Activity Log</a>
<a class="collapse-item" href="#">Site Mentorship</a>
<a class="collapse-item" href="#">Daily Updates</a>
<a class="collapse-item" href="#">Weekly Updates</a>
</div>
</div>
</li>

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

<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-file"></i>
<span>M & E</span>
</a>
<div id="collapsePages" class="collapse show" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">DATIM</h6>
<a class="collapse-item" href="#">Prevention</a>
<a class="collapse-item" href="#">Testing</a>
<a class="collapse-item" href="#">Testing - Recent</a>
<a class="collapse-item" href="#">Testing - Others</a>
<a class="collapse-item" href="#">Treatment</a>
<a class="collapse-item" href="#">Viral Suppression</a>
<a class="collapse-item" href="#">Health Systems</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Surge</h6>
<a class="collapse-item" href="{% url 'about' %}">Testing</a>
<a class="collapse-item" href="{% url 'about' %}">APNS</a>
<a class="collapse-item" href="{% url 'about' %}">Treatment</a>
</div>
</div>
</li>

<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">

<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>

<div class="sidebar-heading">Monitoring and Evaluation</div>
{% include "fragments//atoms/monitoring_and_evaluation_data_entry_menu.html" %}
{% include "fragments//atoms/sidebar_toggle.html" %}
</ul>

0 comments on commit 08b6513

Please sign in to comment.