feat: add footer menu, change paginator design

packages/base/Configuration/Sets/SitePackage/TypoScript/constants.typoscript

@@ -0,0 +1,4 @@
+# Define the footer menu PID as a constant to make it easily configurable
+page {
+    footerMenuPid = 7
+}

packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript

@@ -1,5 +1,7 @@
 # Include existing configuration
 <INCLUDE_TYPOSCRIPT: source="DIR:EXT:base/ContentBlocks" extensions="typoscript">
+# Include constants
+#<INCLUDE_TYPOSCRIPT: source="FILE:EXT:base/Configuration/Sets/SitePackage/TypoScript/constants.typoscript">
 
 page = PAGE
 page {
@@ -23,6 +25,12 @@ page {
             as = mainnavigation
         }
         30 = page-content
+        40 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
+        40 {
+            special = directory
+            special.value = 7
+            as = metanavigation
+        }
     }
   }
 
@@ -50,8 +58,6 @@ page {
   }
 
   # Use includeAssets to properly preload fonts with TYPO3 v13 asset handling.
-  # Make sure the font filenames do not have spaces. Convert them to use hyphens or underscores.
-  # After that, the AssetCollector will handle publishing to _assets folder.
   includeAssets {
     hajimeSansTtf {
       path = EXT:base/Resources/Public/Fonts/Hajime-Sans.woff2
@@ -77,6 +83,8 @@ page {
       }
     }
   }
+
+  footerMenuPid = {$footerMenuPid}
 }
 
 lib.contentElement {
@@ -101,3 +109,17 @@ lib.parseFunc_RTE {
     }
   }
 }
+
+# Define the footer menu to show subpages of the configured footerMenuPid
+# special = directory will list all direct subpages of the given pid, not the page itself
+lib.footerMenu = HMENU
+lib.footerMenu {
+  special = directory
+  special.value = {$footerMenuPid}
+  1 = TMENU
+  1 {
+    wrap = <ul>|</ul>
+    NO = 1
+    NO.wrapItemAndSub = <li>|</li>
+  }
+}

packages/base/Resources/Private/Extensions/News/Partials/List/Pagination.html

@@ -19,7 +19,7 @@
         </li>
     </f:if>
     <f:for each="{pagination.allPageNumbers}" as="page">
-        <li class="{f:if(condition: page == paginator.currentPageNumber, then:'current')}">
+        <li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'current')}">
             <a href="{f:uri.action(action:actionName, arguments:{currentPage: page},addQueryString:'untrusted')}">{page}</a>
         </li>
     </f:for>

packages/base/Resources/Private/PageView/Layouts/Default.html

@@ -26,7 +26,13 @@
         <div class="site-footer__bottom">
             <div class="site-footer__bottom-grid">
                 <ul class="site-footer__legal">
-                    <f:cObject typoscriptObjectPath="lib.footerMenu" />
+                    <f:for each="{metanavigation}" as="item">
+                        <li{f:if(condition: item.active, then:' class="active"')}>
+                            <a href="{item.link}"{f:if(condition: '{item.target}', then: ' target="{item.target}"')}{f:if(condition: '{item.target} == "_blank"', then: ' rel="noopener noreferrer"')} title="{item.title}">
+                                <span>{item.title}</span>
+                            </a>
+                        </li>
+                    </f:for>
                 </ul>
                 <p class="site-footer__copyright">© All Right Reserved</p>
             </div>

packages/base/Resources/Public/Scss/components/_buttons.scss

@@ -2,6 +2,7 @@
   background-color: var(--bs-primary);
   color: var(--bs-yellow);
   font-family: 'Inter', sans-serif;
+  font-weight: 700;
   border-radius: .5rem;
   padding: 0.75rem 1.5rem;
   border: none;

packages/base/Resources/Public/Scss/components/_news.scss

@@ -46,9 +46,10 @@
         color: $primary-color;
       }
 
-      &.current a {
-        background: lighten($primary-color, 20%);
-        color: $secondary-color;
+      &.current a, a:hover {
+        background: var(--bs-primary);
+        color: var(--bs-yellow);
+        font-weight: bold;
       }
 
       a {
@@ -57,16 +58,10 @@
         height: 2.5rem;
         line-height: 2.5rem;
         text-align: center;
-        border-radius: 50%;
-        background: $primary-color;
-        color: $secondary-color;
-        font-weight: bold;
+        border-radius: 0.5rem;
+        background: transparent;
         text-decoration: none;
         transition: background 0.3s ease-in-out;
-
-        &:hover {
-          background: lighten($primary-color, 10%);
-        }
       }
     }
   }