Website: Fix in page nav / left nav display bug

apps/fabric-website/src/components/Nav/Nav.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
+import { getPathMinusLastHash } from '../../utilities/pageroute';
 import * as stylesImport from './Nav.module.scss';
 const styles: any = stylesImport;
 import {
@@ -69,7 +70,7 @@ export class Nav extends React.Component<INavProps, INavState> {
     const links: React.ReactElement<{}>[] = pages
       .filter(page => !page.hasOwnProperty('isHiddenFromMainNav'))
       .map(
-      (page: INavPage, linkIndex: number) => this._renderLink(page, linkIndex)
+        (page: INavPage, linkIndex: number) => this._renderLink(page, linkIndex)
       );
 
     return (
@@ -91,25 +92,19 @@ function _isPageActive(page: INavPage): boolean {
   }
   _urlResolver.href = page.url || '';
   const target: string = _urlResolver.href;
+  let path = location.href;
 
   if (location.protocol + '//' + location.host + location.pathname === target) {
     return true;
   }
 
-  if (location.href === target) {
-    return true;
+  const hashCount = path.split('#').length - 1;
+  if (hashCount > 1) {
+    path = getPathMinusLastHash(path);
   }
 
-  if (location.hash) {
-    // Match the hash to the url.
-    if (location.hash === page.url) {
-      return true;
-    }
-
-    // Match a rebased url. (e.g. #foo becomes http://hostname/foo)
-    _urlResolver.href = location.hash.substring(1);
-
-    return _urlResolver.href === target;
+  if (path === target) {
+    return true;
   }
 
   return false;

apps/fabric-website/src/components/PageHeader/PageHeader.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { css, BaseComponent, IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
 import * as stylesImport from './PageHeader.module.scss';
 const styles: any = stylesImport;
-import { getPageRouteFromState } from '../../utilities/pageroute';
 import AttachedScrollUtility from '../../utilities/AttachedScrollUtility';
+import { getPathMinusLastHash } from '../../utilities/pageroute';
 import { PageHeaderLink } from '../../components/PageHeaderLink/PageHeaderLink';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 
@@ -84,9 +84,6 @@ export class PageHeader extends BaseComponent<IPageHeaderProps, IPageHeaderState
   public render() {
     let { pageTitle, links, backgroundColor, backgroundImage } = this.props;
     let { isAttached } = this.state;
-    let baseRoute: string = getPageRouteFromState(
-      this.props.pageTitle
-    );
     let inPageNav;
     let backgroundStyle = {
       bottom: this.state.headerBottom,
@@ -102,7 +99,7 @@ export class PageHeader extends BaseComponent<IPageHeaderProps, IPageHeaderState
             <ul>
               { links.map((link, linkIndex) => (
                 <li key={ linkIndex }>
-                  <PageHeaderLink href={ baseRoute + '#' + link.location } text={ link.text } />
+                  <PageHeaderLink href={ this._getPagePath(link) } text={ link.text } />
                 </li>
               )) }
             </ul>
@@ -143,4 +140,12 @@ export class PageHeader extends BaseComponent<IPageHeaderProps, IPageHeaderState
       headerTop: headerTop
     });
   }
+
+  private _getPagePath(link): string {
+    let path = location.hash;
+    // This makes sure that location hash changes don't append
+    path = getPathMinusLastHash(path);
+
+    return path + '#' + link.location;
+  }
 }

apps/fabric-website/src/utilities/pageroute.ts

@@ -1,7 +1,11 @@
 
 /*
-  Retreive the route URL for a page in a group from the the AppState
+  Retreive the route URL for a page without the string after the last hash.
 */
-export function getPageRouteFromState(pageName: string): string {
-  return '';
+export function getPathMinusLastHash(path: string): string {
+  const hashIndex = path.lastIndexOf('#');
+  if (hashIndex > 0) {
+    path = path.substr(0, hashIndex);
+  }
+  return path;
 }

common/changes/@uifabric/fabric-website/in-page-nav-bug_2018-03-06-23-06.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website",
+      "comment": "Fixed in page nav so that the left nav links will display properly.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "lynam.emily@gmail.com"
+}