Render bluehost-app-nav messages in the app nav

src/app/components/app-nav/index.js

@@ -1,6 +1,11 @@
 import { useEffect, useState } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
 import { useViewportMatch } from '@wordpress/compose';
+import { addQueryArgs } from '@wordpress/url';
+import classnames from 'classnames';
+import { filter } from 'lodash';
 import { Modal, SidebarNavigation } from '@newfold/ui-component-library';
+import { default as NewfoldNotifications } from '@modules/wp-module-notifications/assets/js/components/notifications/';
 import { NavLink, useLocation } from 'react-router-dom';
 import { Bars3Icon } from '@heroicons/react/24/outline';
 import { topRoutes, utilityRoutes } from 'App/data/routes';
@@ -146,6 +151,9 @@ export const SideNavMenuSubItem = ( { label, path, action } ) => {
 };
 
 export const SideNav = () => {
+	const location = useLocation();
+	const hashedPath = '#' + location.pathname;
+
 	return (
 		<aside className="wppbh-app-sidenav nfd-shrink-0 nfd-hidden min-[783px]:nfd-block nfd-pb-6 nfd-bottom-0 nfd-w-56">
 			<SidebarNavigation>
@@ -154,6 +162,20 @@ export const SideNav = () => {
 					<SideNavMenu />
 				</SidebarNavigation.Sidebar>
 			</SidebarNavigation>
+			<NewfoldNotifications
+				constants={ {
+					context: 'bluehost-app-nav',
+					page: hashedPath,
+				} }
+				methods={ {
+					apiFetch,
+					addQueryArgs,
+					classnames,
+					filter,
+					useState,
+					useEffect,
+				} }
+			/>
 		</aside>
 	);
 };