Add support for bottom navigation for single page

3 files changed, 48 insertions, 0 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 9cfc888..a5a2993 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -418,6 +418,30 @@ mark {
   background-color: #eeff00;
 }
 
+.bottomnav {
+  list-style: none;
+  text-align: center;
+  padding-left: 0;
+}
+
+.bottomnav ul {
+  display: block;
+}
+
+.bottomnav li {
+  display: inline;
+}
+
+.bottomnav .previous > a  {
+  float: left;
+  display: block;
+}
+
+.bottomnav .next > a {
+  float: right;
+  display: block;
+}
+
 .pager {
   list-style: none;
   text-align: center;
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index ceeb928..7bf379e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -13,6 +13,8 @@
           {{ end }}
         </div>
       {{ end }}
+
+      {{ partial "bottomnav.html" . }}
     </article>
     {{ if and (gt .WordCount 400) (.Param "backtotop") }}
       <button onclick="topFunction()" id="backtotopButton">
diff --git a/layouts/partials/bottomnav.html b/layouts/partials/bottomnav.html
new file mode 100644
index 0000000..80ac689
--- /dev/null
+++ b/layouts/partials/bottomnav.html
@@ -0,0 +1,22 @@
+<ul class="bottomnav">
+  {{- with .NextInSection -}}
+    <li class="previous">
+      {{- $title := .Title | safeHTML -}}
+      {{- if $title -}}
+        <a href="{{- .RelPermalink -}}"
+          ><span><<&nbsp;</span>{{- $title | truncate 20 -}}</a
+        >{{- end -}}
+
+    </li>
+  {{- end -}}
+  {{- with .PrevInSection -}}
+    <li class="next">
+      {{- $title := .Title | safeHTML -}}
+      {{- if $title -}}
+        <a href="{{- .RelPermalink -}}"
+          >{{- $title | truncate 20 -}}<span>&nbsp;>></span></a
+        >{{- end -}}
+
+    </li>
+  {{- end -}}
+</ul>