feat: use Navi for primary navigation

.npmrc

@@ -8,5 +8,5 @@ registry=https://registry.npmjs.org
 minimum-release-age=10080
 
 # Exclude own packages from minimum release age check
-minimum-release-age-exclude=@yardinternet
+minimum-release-age-exclude=@yardinternet/*
 

composer.json

@@ -37,6 +37,7 @@
 		"composer/installers": "^2.2",
 		"gravitykit/gravity-forms-zero-spam": "^1.7",
 		"johnbillion/user-switching": "^1.11",
+		"log1x/navi": "^3.1",
 		"log1x/poet": "^2.0",
 		"lukasbesch/bedrock-plugin-disabler": "^1.4",
 		"oscarotero/env": "^2.1",

package.json

@@ -25,17 +25,17 @@
 		"yard-toolkit": "yard-toolkit"
 	},
 	"devDependencies": {
-		"@yardinternet/eslint-config": "^1.2.5",
-		"@yardinternet/prettier-config": "^2.0.5",
-		"@yardinternet/stylelint-config": "^1.1.4",
-		"@yardinternet/toolkit": "^2.1.3",
-		"@yardinternet/vite-config": "^1.1.2",
+		"@yardinternet/eslint-config": "^1.2.7",
+		"@yardinternet/prettier-config": "^2.0.6",
+		"@yardinternet/stylelint-config": "^1.1.5",
+		"@yardinternet/toolkit": "^2.1.4",
+		"@yardinternet/vite-config": "^1.2.1",
 		"tailwindcss": "^4.2.0",
 		"vite": "^7.3.1"
 	},
 	"dependencies": {
 		"@yardinternet/a11y-cookie-yes": "^1.2.12",
-		"@yardinternet/brave-frontend-kit": "^0.7.3",
+		"@yardinternet/brave-frontend-kit": "^0.8.0",
 		"@yardinternet/gutenberg-block-restrictions": "^1.0.1",
 		"@yardinternet/gutenberg-components": "^1.3.3"
 	},

web/app/themes/sage/app/View/Composers/NaviComposer.php

@@ -0,0 +1,48 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Composers;
+
+use Log1x\Navi\Navi;
+use Roots\Acorn\View\Composer;
+
+class NaviComposer extends Composer
+{
+	/**
+	 * List of views served by this composer.
+	 *
+	 * @var array
+	 */
+	protected static $views = [
+		'components.header.*',
+		'sections.footer',
+	];
+
+	/**
+	 * Data to be passed to view before rendering, but after merging.
+	 */
+	public function override(): array
+	{
+		return [
+			'footerNavigation' => $this->footerNavigation(),
+			'primaryNavigation' => $this->primaryNavigation(),
+			'topBarNavigation' => $this->topBarNavigation(),
+		];
+	}
+
+	public function footerNavigation(): Navi
+	{
+		return Navi::make()->build('footer_navigation');
+	}
+
+	public function primaryNavigation(): Navi
+	{
+		return Navi::make()->build('primary_navigation');
+	}
+
+	public function topBarNavigation(): Navi
+	{
+		return Navi::make()->build('top_bar_navigation');
+	}
+}

web/app/themes/sage/config/view.php

@@ -86,6 +86,7 @@
 		'app' => App\View\Composers\App::class,
 		'postDataCollection' => App\View\Composers\PostDataCollectionComposer::class,
 		'postData' => App\View\Composers\PostDataComposer::class,
+		'navi' => App\View\Composers\NaviComposer::class,
 	],
 
 	/*

web/app/themes/sage/resources/scripts/frontend/frontend.js

@@ -5,11 +5,10 @@ import A11yCookieYes from '@yardinternet/a11y-cookie-yes';
 import {
 	A11yCards,
 	A11yFacetWP,
-	A11yMobileMenu,
 	Accordion,
+	BraveNavigationManager,
 	DialogManager,
 	FocusStyle,
-	Navigation,
 	WebShareApi,
 } from '@yardinternet/brave-frontend-kit';
 
@@ -20,10 +19,9 @@ window.addEventListener( 'DOMContentLoaded', () => {
 	new A11yCards();
 	A11yCookieYes.getInstance();
 	new A11yFacetWP();
-	new A11yMobileMenu();
 	new Accordion();
+	new BraveNavigationManager();
 	new DialogManager();
 	new FocusStyle();
-	new Navigation();
 	new WebShareApi();
 } );

web/app/themes/sage/resources/styles/base/base.css

@@ -58,10 +58,10 @@ p {
 }
 
 a {
-	@apply text-primary-600 underline;
+	@apply text-primary underline;
 
 	@variant hocus {
-		@apply text-primary-700;
+		@apply text-primary-600;
 	}
 
 	/* Hide links if they are empty. Easy fix for some Gutenberg and a11y issues. */

web/app/themes/sage/resources/styles/base/variables.css

@@ -38,8 +38,16 @@
 	/* Navigation */
 	--wp-admin-bar-height: var( --wp-admin--admin-bar--height, 0px );
 	--nav-bar-height: 80px;
-	--top-bar-height: 40px;
-	--combined-bar-height: var( --nav-bar-height ); /* Altered in top-bar.css */
+	--top-bar-height: 0px;
+	--combined-bar-height: calc(
+		var( --nav-bar-height ) + var( --top-bar-height )
+	);
+
+	@variant lg {
+		&:has( .top-bar ) {
+			--top-bar-height: 40px;
+		}
+	}
 
 	/* Container size */
 	--container-padding: 1rem;

web/app/themes/sage/resources/styles/frontend.css

@@ -13,9 +13,6 @@
 @import './components/facetwp';
 @import './components/footer';
 @import './components/gravity-forms';
-@import './components/mobile-menu';
-@import './components/nav';
-@import './components/top-bar';
 
 /* Elements */
 @import './elements/forms';