Correctly highlight the nav item for the legacy app.

legacy/src/app/entry.js

@@ -363,6 +363,10 @@ const renderHeader = ($rootScope, $window, $http) => {
     />,
     headerNode
   );
+  $rootScope.$on("$routeChangeSuccess", function(event, next, current) {
+    // Update the header when the route changes.
+    renderHeader($rootScope, $window, $http);
+  });
 };
 
 const renderFooter = $window => {

shared/src/components/Footer/__snapshots__/Footer.test.js.snap

@@ -79,7 +79,7 @@ exports[`Footer renders 1`] = `
         className="u-remove-max-width"
       >
         © 
-        2019
+        2020
          Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.
       </p>
     </div>

shared/src/components/Header/Header.js

@@ -56,6 +56,7 @@ export const Header = ({
       });
       window.ga("set", "dimension1", version);
       window.ga("set", "dimension2", uuid);
+
       const sendPageview = () => {
         const path = window.location.pathname + window.location.hash;
         window.ga("send", "pageview", path);
@@ -183,12 +184,12 @@ export const Header = ({
   const generateNavItems = links => {
     const hardwareLinks = links.filter(link => link.inHardwareMenu);
     const hardwareMenu = generateHardwareMenu(hardwareLinks);
+    const path = location.pathname + location.hash;
+
     const linkItems = links.map(link => (
       <li
         className={classNames("p-navigation__link", {
-          "is-selected": location.pathname.startsWith(
-            generateURL(link.url, link.isLegacy)
-          ),
+          "is-selected": path.startsWith(generateURL(link.url, link.isLegacy)),
           "u-hide--hardware-menu-threshold": link.inHardwareMenu
         })}
         key={link.url}
@@ -313,6 +314,7 @@ Header.propTypes = {
   enableAnalytics: PropTypes.bool,
   generateLocalLink: PropTypes.func,
   location: PropTypes.shape({
+    hash: PropTypes.string,
     pathname: PropTypes.string.isRequired
   }).isRequired,
   logout: PropTypes.func.isRequired,

shared/src/components/Header/Header.test.js

@@ -81,7 +81,51 @@ describe("Header", () => {
       wrapper.findWhere(n => n.name() === "a" && n.text() === "Skip").exists()
     ).toBe(true);
     expect(
-      wrapper.find(".p-navigation__links").at(0).props().children
+      wrapper
+        .find(".p-navigation__links")
+        .at(0)
+        .props().children
     ).toBe(false);
   });
+
+  it("can highlight a new URL", () => {
+    const wrapper = shallow(
+      <Header
+        authUser={{
+          is_superuser: true,
+          username: "koala"
+        }}
+        basename="/MAAS"
+        completedIntro={true}
+        location={{
+          pathname: "/settings"
+        }}
+        logout={jest.fn()}
+      />
+    );
+    const selected = wrapper.find(".p-navigation__link.is-selected");
+    expect(selected.exists()).toBe(true);
+    expect(selected.text()).toEqual("Settings");
+  });
+
+  it("can highlight a legacy URL", () => {
+    const wrapper = shallow(
+      <Header
+        authUser={{
+          is_superuser: true,
+          username: "koala"
+        }}
+        basename="/MAAS"
+        completedIntro={true}
+        location={{
+          hash: "#/machines",
+          pathname: "/MAAS/"
+        }}
+        logout={jest.fn()}
+      />
+    );
+    const selected = wrapper.find(".p-navigation__link.is-selected");
+    expect(selected.exists()).toBe(true);
+    expect(selected.text()).toEqual("Machines");
+  });
 });