diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx index 1ca61b4a5c9291..df836511d6eabd 100644 --- a/apps/fabric-website/src/components/Nav/Nav.tsx +++ b/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 { 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; diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx index 51833d676efc57..bafc2d4ce182d4 100644 --- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx +++ b/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 { links.map((link, linkIndex) => (
  • - +
  • )) } @@ -143,4 +140,12 @@ export class PageHeader extends BaseComponent 0) { + path = path.substr(0, hashIndex); + } + return path; } \ No newline at end of file diff --git a/common/changes/@uifabric/fabric-website/in-page-nav-bug_2018-03-06-23-06.json b/common/changes/@uifabric/fabric-website/in-page-nav-bug_2018-03-06-23-06.json new file mode 100644 index 00000000000000..f6ee0714b27598 --- /dev/null +++ b/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" +} \ No newline at end of file