hugo-toha/layouts/partials/navigators/next-prev-navigator.html

{{ $curPage := . }}
{{ $prevPage := "" }}
{{ $nextPage := "" }}

<!-- List all the pages. It uses the sidebar menu to discover the page order. -->
{{ $pages := partial "helpers/get-pages.html" site.Menus.sidebar }}

<!-- Now, find the current page index in the pages list. Then, find previous page and next page. -->
{{ $idx := 0 }}
{{ range $pages }}
  {{ if eq .RelPermalink $curPage.RelPermalink }}
    {{ $prevPage = index $pages (sub $idx 1) }}
    {{ $nextPage = index $pages (add $idx 1) }}
  {{ end }}
  {{ $idx = add $idx 1 }}
{{ end }}

<div class="row next-prev-navigator">
  {{ if $prevPage }}
    <div class="col-md-6 previous-article">
      <a href="{{ $prevPage.RelPermalink }}" title="{{ $prevPage.Title }}" class="btn btn-outline-info">
        <div><i class="fas fa-chevron-circle-left"></i> {{ i18n "prev" }}</div>
        <div class="next-prev-text">{{ $prevPage.Title }}</div>
      </a>
    </div>
  {{ end }}
  {{ if $nextPage }}
      {{ $columnWidth:="col-md-12" }}
      {{ if $prevPage }}
        {{ $columnWidth = "col-md-6" }}
      {{ end}}
      <div class="{{ $columnWidth }} next-article">
        <a href="{{ $nextPage.RelPermalink }}" title="{{ $nextPage.Title }}" class="btn btn-outline-info">
          <div>{{ i18n "next" }} <i class="fas fa-chevron-circle-right"></i></div>
          <div class="next-prev-text">{{ $nextPage.Title }}</div>
        </a>
      </div>
    {{ end }}
</div>