Add next page button at bottom of training resources (#84)

Author: rly

assets/css/style.css

@@ -1149,3 +1149,15 @@ ol.custom-ordered-list li::before {
     grid-template-columns: 1fr;
   }
 }
+
+/* Training Materials pages */
+a.next-page-btn {
+  background-color: white;
+  border: 2px solid #114b7c;
+  transition: all 0.3s ease;
+}
+a.next-page-btn:hover {
+  background-color: #e6f0f9;
+  border: 2px solid #114b7c;
+  text-decoration: none !important;
+}

layouts/training-and-event-resources/single.html

@@ -10,42 +10,66 @@ <h1 class="inter-700 text-48 text-white text-center z-4">{{ .Title | markdownify
 {{/*  Main Section with Side Navigation  */}}
 <section class="section">
   <div class="container-lg">
-    
+
     <div class="row gy-5 justify-content-center justify-content-lg-between">
       <!-- Side Navigation -->
       <div id="eventResourcesSidebar" class="d-lg-block event-resources-nav sidebar-container" style="width: 280px !important;">
         <div class="d-flex flex-column row-gap-3 my-2">
-          <a href="/training-materials/" 
+          <a href="/training-materials/"
           class="bg-white rounded-3 shadow-sm px-3 py-2 d-flex align-items-center gap-2 nav-link sideLink {{ if eq .RelPermalink "/training-materials/" }}active{{ end }}">
             <span class="inter-400 dark-700 text-16 mb-0 pt-1 filter-icon animate {{ if eq .RelPermalink "/training-materials/" }}active-text{{ end }}">Training Materials</span>
           </a>
-          <a href="/organizing-nwb-events/" 
+          <a href="/organizing-nwb-events/"
              class="bg-white rounded-3 shadow-sm px-3 py-2 d-flex align-items-center gap-2 nav-link sideLink {{ if eq .RelPermalink "/organizing-nwb-events/" }}active{{ end }}">
             <span class="inter-400 dark-700 text-16 mb-0 pt-1 filter-icon animate {{ if eq .RelPermalink "/organizing-nwb-events/" }}active-text{{ end }}">Organizing NWB Events</span>
           </a>
-          <a href="/agenda-templates/" 
+          <a href="/agenda-templates/"
              class="bg-white rounded-3 shadow-sm px-3 py-2 d-flex align-items-center gap-2 nav-link sideLink {{ if eq .RelPermalink "/agenda-templates/" }}active{{ end }}">
             <span class="inter-400 dark-700 text-16 mb-0 pt-1 filter-icon animate {{ if eq .RelPermalink "/agenda-templates/" }}active-text{{ end }}">Agenda Templates</span>
           </a>
-          <a href="/email-templates/" 
+          <a href="/email-templates/"
              class="bg-white rounded-3 shadow-sm px-3 py-2 d-flex align-items-center gap-2 nav-link sideLink {{ if eq .RelPermalink "/email-templates/" }}active{{ end }}">
             <span class="inter-400 dark-700 text-16 mb-0 pt-1 filter-icon animate {{ if eq .RelPermalink "/email-templates/" }}active-text{{ end }}">Email Templates</span>
           </a>
-          <a href="/create-event-website/" 
+          <a href="/create-event-website/"
              class="bg-white rounded-3 shadow-sm px-3 py-2 d-flex align-items-center gap-2 nav-link sideLink {{ if eq .RelPermalink "/create-event-website/" }}active{{ end }}">
             <span class="inter-400 dark-700 text-16 mb-0 pt-1 filter-icon animate {{ if eq .RelPermalink "/create-event-website/" }}active-text{{ end }}">Creating an Event Website</span>
           </a>
-          <a href="/organizing-events-faq/" 
+          <a href="/organizing-events-faq/"
              class="bg-white rounded-3 shadow-sm px-3 py-2 d-flex align-items-center gap-2 nav-link sideLink {{ if eq .RelPermalink "/organizing-events-faq/" }}active{{ end }}">
             <span class="inter-400 dark-700 text-16 mb-0 pt-1 filter-icon animate {{ if eq .RelPermalink "/organizing-events-faq/" }}active-text{{ end }}">Organizing Events FAQ</span>
           </a>
         </div>
       </div>
-      
+
       <!-- Main Content -->
       <div class="col-12 col-sm-11 col-lg-8 col-xl-9">
-        <div class="content inter-400 text-18 dark-700 rounded-3 p-2 p-sm-5 shadow-sm bg-white"> 
+        <div class="content inter-400 text-18 dark-700 rounded-3 p-2 p-sm-5 shadow-sm bg-white">
           {{ .Content | markdownify }}
+
+          <!-- Next Page Navigation -->
+          {{ $currentPage := .RelPermalink }}
+          {{ if eq $currentPage "/training-materials/" }}
+            <div class="d-flex justify-content-end mt-4">
+              <a href="/organizing-nwb-events/" class="btn next-page-btn">Next: Organizing NWB Events &rarr;</a>
+            </div>
+          {{ else if eq $currentPage "/organizing-nwb-events/" }}
+            <div class="d-flex justify-content-end mt-4">
+              <a href="/agenda-templates/" class="btn next-page-btn">Next: Agenda Templates &rarr;</a>
+            </div>
+          {{ else if eq $currentPage "/agenda-templates/" }}
+            <div class="d-flex justify-content-end mt-4">
+              <a href="/email-templates/" class="btn next-page-btn">Next: Email Templates &rarr;</a>
+            </div>
+          {{ else if eq $currentPage "/email-templates/" }}
+            <div class="d-flex justify-content-end mt-4">
+              <a href="/create-event-website/" class="btn next-page-btn">Next: Creating an Event Website &rarr;</a>
+            </div>
+          {{ else if eq $currentPage "/create-event-website/" }}
+            <div class="d-flex justify-content-end mt-4">
+              <a href="/organizing-events-faq/" class="btn next-page-btn">Next: Organizing Events FAQ &rarr;</a>
+            </div>
+          {{ end }}
         </div>
       </div>
     </div>