From 0c5548eca58b439a1a271d1c57af5ec3d3d2153c Mon Sep 17 00:00:00 2001
From: Muhammad Farag <muhammad.farag@shopify.com>
Date: Mon, 24 May 2021 20:09:14 -0400
Subject: [PATCH] Add Navigation to the App

---
 resources/js/react/App.jsx                    |  6 +++
 .../js/react/components/AppNavigation.jsx     | 38 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 resources/js/react/components/AppNavigation.jsx

diff --git a/resources/js/react/App.jsx b/resources/js/react/App.jsx
index 80f139777..4b3f709ea 100644
--- a/resources/js/react/App.jsx
+++ b/resources/js/react/App.jsx
@@ -12,6 +12,7 @@ import ProductsPage from "./components/ProductsPage";
 import {Provider, useAppBridge} from '@shopify/app-bridge-react';
 import {BrowserRouter, Route, Switch} from "react-router-dom";
 import ClientRouter from "./components/ClientRouter";
+import AppNavigation from "./components/AppNavigation";
 
 function userLoggedInFetch(app) {
     const fetchFunction = authenticatedFetch(app);
@@ -49,6 +50,9 @@ function AppBridgeApolloProvider({children}) {
     );
 }
 
+function ExamplePage() {
+    return <div>Example Page</div>
+}
 function App({shop, host, apiKey}) {
     const config = {apiKey: apiKey, shopOrigin: shop, host: host, forceRedirect: true};
 
@@ -58,8 +62,10 @@ function App({shop, host, apiKey}) {
                 <ClientRouter/>
                 <AppProvider i18n={translations}>
                     <AppBridgeApolloProvider>
+                        <AppNavigation/>
                         <PageLayout>
                             <Switch>
+                                <Route path="/example" component={ExamplePage}/>
                                 <Route path="/" component={ProductsPage}/>
                             </Switch>
                         </PageLayout>
diff --git a/resources/js/react/components/AppNavigation.jsx b/resources/js/react/components/AppNavigation.jsx
new file mode 100644
index 000000000..e883de8f4
--- /dev/null
+++ b/resources/js/react/components/AppNavigation.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+import {AppLink, NavigationMenu} from '@shopify/app-bridge/actions';
+import {useAppBridge} from '@shopify/app-bridge-react';
+import {useLocation} from 'react-router-dom';
+
+function AppNavigation() {
+    const app = useAppBridge();
+
+    const location = useLocation();
+
+    const home = AppLink.create(app, {
+        label: 'Home',
+        destination: '/',
+    });
+
+    const example = AppLink.create(app, {
+        label: 'Example',
+        destination: '/example',
+    });
+    const navigationMenu = NavigationMenu.create(app, {
+        items: [home, example],
+    });
+
+    switch (location.pathname) {
+        case "/":
+            navigationMenu.set({active: home});
+            break;
+        case "/example":
+            navigationMenu.set({active: example});
+            break;
+        default:
+            navigationMenu.set({active: undefined});
+    }
+
+    return null
+}
+
+export default AppNavigation;