Add current section element in quick_navigation

Author: Erik2609

assets/scss/_custom.scss

@@ -33,6 +33,17 @@
 	font-style: normal;
 }
 
+.highlight-potential-sm {
+	border: rgba(255, 255, 255, 0) 0.3rem solid;
+	border-radius: 0.75rem;
+	padding: 0.25rem 0.5rem !important;
+	color: #005aa7;
+	font-style: normal;
+}
+.highlight-red-sm {
+	background-color: rgba(255, 203, 189, 0.5);
+}
+
 .yellow-button {
 	margin-left: 20px;
 	background-color: #005aa7;

assets/scss/templates/_main.scss

@@ -448,7 +448,7 @@ a.post-title {
       padding-left: 20px;
       position: relative;
 
-      &:not(.ms-slider__word)::before {
+      &:not(.ms-slider__word):not(.quick_navigation_li)::before {
         position: absolute;
         content: '';
         height: 8px;
@@ -698,7 +698,7 @@ vertical-align: top;
   padding-top: 5px;
 }
 
-.content ul li:not(.ms-slider__word):before{
+.content ul li:not(.ms-slider__word):not(.quick_navigation_li):before{
   height: 0px;
   width: 0px;
 }

content/english/algoprudence/submit-a-case.md

@@ -8,9 +8,9 @@ subtitle: >
 image: /images/svg-illustrations/case_repository.svg
 form1:
   title: Case information
-  content: ''
+  content: ""
   button_text: Submit
-  backend_link: 'https://formspree.io/f/xzbnrlan'
+  backend_link: "https://formspree.io/f/xzbnrlan"
   id: submit-a-case
   questions:
     - label: |
@@ -61,9 +61,9 @@ form1:
       type: checkbox
 form2:
   title: Case information
-  content: ''
-  button_text: 'Submit '
-  backend_link: 'https://formspree.io/f/xleqlakw'
+  content: ""
+  button_text: "Submit "
+  backend_link: "https://formspree.io/f/xleqlakw"
   id: case-for-repository
   questions:
     - label: Name organisation
@@ -88,7 +88,7 @@ form2:
       file_upload_text: Choose file
       file_type: .pdf
       type: file
-      placeholder: ''
+      placeholder: ""
     - label: >
         Terms and conditions <br> <span style="font-size:12px;
         color=#777;">Submitted data will only be processed for the purpose
@@ -103,7 +103,7 @@ reports_preview:
   button_text: Case repository
   button_link: /algoprudence
   feature_item:
-    - name: 'Risk Profiling Social Welfare Re-examination '
+    - name: "Risk Profiling Social Welfare Re-examination "
       image: /images/algoprudence/AA202302/AA202302A_cover_EN.png
       link: >-
         /algoprudence/cases/aa202302_risk-profiling-for-social-welfare-reexamination/
@@ -122,11 +122,11 @@ quick_navigation:
   title: Content overview
   links:
     - title: Submit a case
-      url: '#case-for-review'
+      url: "#case-for-review_tab_btn"
     - title: Next steps
-      url: '#next-steps'
+      url: "#next-steps"
     - title: Recent cases
-      url: '#case-repository'
+      url: "#case-repository"
 ---
 
 {{< tab_header width="6" tab1_id="case-for-review" default_tab="case-for-review" tab1_title="Submit a case for normative review" tab2_id="case-repository" tab2_title="Add a case to algoprudence repository" >}}
@@ -155,4 +155,4 @@ Your submission is reviewed by Team Algoprudence. The team assesses whether de c
 
 {{< container_close >}}
 
-{{< reports_preview id="case-repository">}}
+{{< reports_preview id="case-repository">}}

content/nederlands/algoprudence/submit-a-case.md

@@ -9,7 +9,7 @@ image: /images/svg-illustrations/case_repository.svg
 form1:
   title: Informatie over de case
   button_text: Verstuur
-  backend_link: 'https://formspree.io/f/xzbnrlan'
+  backend_link: "https://formspree.io/f/xzbnrlan"
   id: submit-a-case
   questions:
     - label: |
@@ -58,9 +58,9 @@ form1:
       type: checkbox
 form2:
   title: Informatie over het oordeel
-  content: ''
+  content: ""
   button_text: Verstuur
-  backend_link: 'https://formspree.io/f/xleqlakw'
+  backend_link: "https://formspree.io/f/xleqlakw"
   id: case-for-repository
   questions:
     - label: Naam organisatie
@@ -115,11 +115,11 @@ quick_navigation:
   title: Inhoudsopgave
   links:
     - title: Dien een case in
-      url: '#case-for-review'
+      url: "#case-for-review_tab_btn"
     - title: Vervolgstappen
-      url: '#next-steps'
+      url: "#next-steps"
     - title: Recente cases
-      url: '#case-repository'
+      url: "#case-repository"
 ---
 
 {{< tab_header width="6" tab1_id="case-for-review" default_tab="case-for-review" tab1_title="Dien een case in voor beoordeling" tab2_id="case-repository" tab2_title="Voeg oordeel toe aan algoprudentie uitspraken" >}}

layouts/partials/head.html

@@ -54,6 +54,7 @@
 
 <!-- page header script -->
 <script src="/js/main.js"></script>
+<script src="/js/quicknavigation.js"></script>
 <!-- /page header script -->
 
 <!-- accordion -->

layouts/section/sublandingpage.html

@@ -12,28 +12,17 @@
             <h3>{{.Params.quick_navigation.title}}</h3>
             <ul>
               {{ range .Params.quick_navigation.links }}
-              <li>
-                <a href='{{.url}}'>
+              <li class="quick_navigation_li d-flex align-items-center mb-0">
+                <a href='{{.url}}' class="highlight-potential-sm d-inline-block ml-3">
                   {{.title}}
                 </a>
-                {{ if .links }}
-                <ul>
-                  {{ range .links }}
-                  <li>
-                    <a href='{{.url}}'>
-                      {{.title}}
-                    </a>
-                  </li>
-                  {{ end }}
-                  
-                </ul>
-                {{ end }}
               </li>
               {{ end }}
             </ul>
           </div>
         </div>
       </div>
+
       <div class="col-lg-8 col-12 mx-auto">
         <div class="content">{{ .Content }}</div>
       </div>

static/js/quicknavigation.js

@@ -0,0 +1,27 @@
+docReady(function () {
+  const setActiveSideNavigation = function () {
+    // Highlight the active link in the quick navigation depending on the scroll position
+    var quickLinks = $(".quicklinks-mobile-sticky-top ul li a");
+    var sections = quickLinks.map(function () {
+      return $(this).attr("href");
+    });
+    var sectionOffsets = sections.map(function (index, section) {
+      return $(section).offset().top - 300; // Adjust offset as needed
+    });
+    let highestActiveIndex = -1;
+    var scrollPos = $(this).scrollTop();
+    quickLinks.each(function () {
+      $(this).removeClass("highlight-red-sm");
+    });
+    sectionOffsets.each(function (index) {
+      if (scrollPos >= this) {
+        highestActiveIndex = index;
+      }
+    });
+    if (highestActiveIndex >= 0) {
+      quickLinks.eq(highestActiveIndex).addClass("highlight-red-sm");
+    }
+  };
+  $(window).on("scroll", setActiveSideNavigation);
+  setActiveSideNavigation();
+});

themes/bigspring-light/layouts/_default/single.html

@@ -37,28 +37,17 @@ <h2 class="mb-4" style="color: #005aa7;">{{ .Title }}</h2>
             <h3>{{.Params.quick_navigation.title}}</h3>
             <ul>
               {{ range .Params.quick_navigation.links }}
-              <li>
-                <a href='{{.url}}'>
+              <li class="quick_navigation_li d-flex align-items-center mb-0">
+                <a href='{{.url}}' class="highlight-potential-sm d-inline-block ml-3">
                   {{.title}}
                 </a>
-                {{ if .links }}
-                <ul>
-                  {{ range .links }}
-                  <li>
-                    <a href='{{.url}}'>
-                      {{.title}}
-                    </a>
-                  </li>
-                  {{ end }}
-                  
-                </ul>
-                {{ end }}
               </li>
               {{ end }}
             </ul>
           </div>
         </div>
       </div>
+      
       <div class="col-lg-8 col-12 mx-auto">
         <div class="content">{{ .Content }}</div>
       </div>

tina/collections/shared/page/quick_navigation.ts

@@ -35,32 +35,6 @@ const quick_navigation: TinaField = {
           required: true,
         },
         url,
-        {
-          type: "object",
-          name: "links",
-          label: "Links",
-          required: false,
-          list: true,
-          ui: {
-            itemProps: (item) => {
-              return { label: item?.title };
-            },
-          },
-          fields: [
-            {
-              type: "string",
-              name: "title",
-              label: "Title",
-              required: true,
-            },
-            {
-              type: "string",
-              name: "url",
-              label: "Url",
-              required: true,
-            },
-          ],
-        },
       ],
     },
   ],