Preface
Step Ten: Dashboard with native bootstrap class.
We can make dashboard using only native bootstrap class.
1: Chapter Overview
We have the example content such as datatable and chartjs.
Now we can explore dashboard.
Source Code: Step-10
To obtain the source code for this chapter, please follow the link provided below:
Sidebar
One most important part of the dashboard is the sidebar menu. This have been discussed in previous article.
We have already experience with sidebar in previous article, now we can fill the dashboard.
Nunjucks Directory Structure
I invite you to inspect the code yourself on my GitHub repository.
❯ tree -C views
views
├── 105-dashboard.njk
├── 106-dashboard.njk
├── contents
│ ├── 105-main.njk
│ ├── 106-chart-header.njk
│ ├── 106-chart.njk
│ ├── 106-main.njk
│ ├── soccer-tbody.njk
│ └── soccer-thead.njk
├── heads
│ ├── links-chart.njk
│ ├── links-dashboard.njk
│ ├── links-datatables.njk
│ ├── links-sidebar.njk
│ ├── meta.njk
│ └── style-icons.njk
├── layouts
│ └── base.njk
└── shared
├── dashboard-collapsible.njk
├── dashboard-header.njk
├── dashboard-sidebar.njk
└── symbols.njk
5 directories, 19 files
As usual, no need to go in explain for each file.
2: Simple Dashboard
Consider start from simple example.
Blocks
Nunjucks Document Source
We have assets, and dashboard-header.
{% extends './layouts/base.njk' %}
{% block htmlhead %}
{% include './heads/meta.njk' %}
{% include './heads/links-dashboard.njk' %}
{% include './heads/links-sidebar.njk' %}
{% include './heads/style-icons.njk' %}
{% endblock %}
{% block header %}
{% include './shared/symbols.njk' %}
{% include './shared/dashboard-header.njk' %}
{% endblock %}
The sidebar reside in content block.
This time our block full of HTML tags.
{% block content %}
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu"
class="col-md-3 col-lg-3 col-xl-2 d-md-block
bg-light sidebar collapse">
{% include './shared/dashboard-sidebar.njk' %}
</nav>
<main class="col-md-9 col-lg-9 col-xl-10
ms-sm-auto px-md-4 bg-white">
{% include './contents/105-main.njk' %}
</main>
</div>
</div>
{% endblock %}
Nunjucks: Links
To avoid confusion, the dashboard assets is just common assets.
<link rel="stylesheet" type="text/css"
href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
href="assets/css/helper.css">
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
Dashboard Header
I grab the example code from bootstrap official.
<header class="navbar navbar-dark sticky-top
bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2
me-0 px-3 fs-6"
href="#">Company name</a>
<button type="button"
class="navbar-toggler position-absolute
d-md-none collapsed"
data-bs-toggle="collapse"
data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input type="text"
class="form-control form-control-dark
w-100 rounded-0 border-0"
placeholder="Search"
aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3"
href="#">Sign out</a>
</div>
</div>
</header>
Nunjucks: Main
After the complex content block above,
we got our simple main template.
<h2>Community Soccer Club</h2>
<div class="table-responsive">
<table class="table table-striped table-hover">
{% include './soccer-thead.njk' %}
{% include './soccer-tbody.njk' %}
</table>
</div>
The rest is, you have already know about this thead and tbody chunks.
No we are ready for our preview page.
Preview in Browser
The following image showcases how the layout appears on tablet display:
3: More Dashboard Example
We are ready for example with more contents.
Blocks
Nunjucks Document Source
We have some more assets now.
{% extends './layouts/base.njk' %}
{% block htmlhead %}
{% include './heads/meta.njk' %}
{% include './heads/links-dashboard.njk' %}
{% include './heads/links-sidebar.njk' %}
{% include './heads/links-chart.njk' %}
{% include './heads/links-datatables.njk' %}
{% include './heads/style-icons.njk' %}
{% endblock %}
{% block header %}
{% include './shared/symbols.njk' %}
{% include './shared/dashboard-header.njk' %}
{% endblock %}
The sidebar reside in content block.
This is just basically changing the main template
{% block content %}
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu"
class="col-md-3 col-lg-3 col-xl-2 d-md-block
bg-white sidebar collapse">
{% include './shared/dashboard-sidebar.njk' %}
</nav>
<main class="col-md-9 col-lg-9 col-xl-10
ms-sm-auto px-md-4 bg-white">
{% include './contents/106-main.njk' %}
</main>
</div>
</div>
{% endblock %}
And this time with javascript to trigger the chart.
{% block footer %}
<script>
$(document).ready( function () {
$('#myTable').DataTable({
"pageLength": 5
});
});
</script>
{% endblock %}
Nunjucks: Main
Again, after the complex content block above,
we got our simple main template.
{% include './106-chart-header.njk' %}
{% include './106-chart.njk' %}
<h2>Community Soccer Club</h2>
<div class="table-responsive">
<table id="myTable"
class="display table
table-striped table-hover">
{% include './soccer-thead.njk' %}
{% include './soccer-tbody.njk' %}
</table>
</div>
Really just this simple. Only chart addition above.
Nunjucks: Chart Header
I also gran this example form bootstrap official site.
<div class="d-flex justify-content-between
flex-wrap flex-md-nowrap align-items-center
pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button"
class="btn btn-sm btn-outline-secondary"
>Share</button>
<button type="button"
class="btn btn-sm btn-outline-secondary"
>Export</button>
</div>
<button type="button" class="btn btn-sm
btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"
class="align-text-bottom"></span>
This Year
</button>
</div>
</div>Nunjucks: ChartJS
And the ChartJS itself is so simple
<canvas class="my-4 w-100"
id="myChart"
width="900"
height="180"></canvas>No we are ready for our preview page.
Preview in Browser
The layout on tablet display is illustrated in the following figure:
4: Admin LTE
Third Party