feat: use Navi for primary navigation

composer.json

@@ -35,6 +35,7 @@
 		"php": ">=8.2",
 		"composer/installers": "^2.2",
 		"johnbillion/user-switching": "^1.11",
+		"log1x/navi": "^3.1",
 		"log1x/poet": "^2.0",
 		"lukasbesch/bedrock-plugin-disabler": "^1.4",
 		"oscarotero/env": "^2.1",

pnpm-workspace.yaml

@@ -1,8 +1,10 @@
-# Hoist these packages to the node_modules root for formatting and linting
+overrides:
+  '@yardinternet/brave-frontend-kit': link:../../../../Packages/brave-frontend-kit
+
 publicHoistPattern:
-    - prettier
-    - stylelint
-    - eslint
-    - stylelint-config-recommended
-    - stylelint-config-idiomatic-order
-    - '@babel/preset-react'
+  - prettier
+  - stylelint
+  - eslint
+  - stylelint-config-recommended
+  - stylelint-config-idiomatic-order
+  - '@babel/preset-react'

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/utilities.css

@@ -193,3 +193,7 @@
 		minmax( min( 100%, var( --min, 30ch ) ), 1fr )
 	);
 }
+
+@utility list-reset {
+	@apply mb-0 list-none pl-0;
+}

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;