From 1342ec9161945388f33e058a2814f69a707f37e2 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 25 Apr 2024 14:50:24 -0700
Subject: [PATCH 1/2] Add notification with 'bluehost-app-nav' context in the
 app nav

---
 src/app/components/app-nav/index.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/app/components/app-nav/index.js b/src/app/components/app-nav/index.js
index 95a7bba73..074e7b126 100644
--- a/src/app/components/app-nav/index.js
+++ b/src/app/components/app-nav/index.js
@@ -7,6 +7,12 @@ import { topRoutes, utilityRoutes } from 'App/data/routes';
 import { handleHelpLinksClick } from '../../util/helpers';
 import Logo from './logo';
 
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import classnames from 'classnames';
+import { filter } from 'lodash';
+import { default as NewfoldNotifications } from '@modules/wp-module-notifications/assets/js/components/notifications/';
+
 export const SideNavHeader = () => {
 	return (
 		<header className="nfd-pt-2 nfd-px-3 nfd-mb-6 nfd-space-y-6">
@@ -146,6 +152,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 +163,20 @@ export const SideNav = () => {
 					<SideNavMenu />
 				</SidebarNavigation.Sidebar>
 			</SidebarNavigation>
+			<NewfoldNotifications
+				constants={ {
+					context: 'bluehost-app-nav',
+					page: hashedPath,
+				} }
+				methods={ {
+					apiFetch,
+					addQueryArgs,
+					classnames,
+					filter,
+					useState,
+					useEffect,
+				} }
+			/>
 		</aside>
 	);
 };

From 507a79d126b85b593efe3800b2f20360b660bfa6 Mon Sep 17 00:00:00 2001
From: wpalani <abdulrahmanalani95@gmail.com>
Date: Thu, 25 Apr 2024 14:51:35 -0700
Subject: [PATCH 2/2] Reorg deps

---
 src/app/components/app-nav/index.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/app/components/app-nav/index.js b/src/app/components/app-nav/index.js
index 074e7b126..13af77e95 100644
--- a/src/app/components/app-nav/index.js
+++ b/src/app/components/app-nav/index.js
@@ -1,18 +1,17 @@
 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';
 import { handleHelpLinksClick } from '../../util/helpers';
 import Logo from './logo';
 
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
-import classnames from 'classnames';
-import { filter } from 'lodash';
-import { default as NewfoldNotifications } from '@modules/wp-module-notifications/assets/js/components/notifications/';
-
 export const SideNavHeader = () => {
 	return (
 		<header className="nfd-pt-2 nfd-px-3 nfd-mb-6 nfd-space-y-6">