[DM] nav nesting

gulp/docs.js

@@ -25,18 +25,26 @@ module.exports = (blueprint, gulp, plugins) => {
         versions: "versions.json",
     };
 
-    gulp.task("docs-json", () => {
-        return new dm.Documentalist([], { renderer: text.renderer })
+    gulp.task("docs-json", () => (
+        new dm.Documentalist({
+            markdown: { renderer: text.renderer },
+            // must mark our @Decorator APIs as reserved so we can use them in code samples
+            reservedTags: ["ContextMenuTarget", "HotkeysTarget"],
+        })
             .use(".md", new dm.MarkdownPlugin({ navPage: config.navPage }))
-            .use(/\.tsx?$/, new dm.TypescriptPlugin())
+            .use(/\.d\.ts$/, new dm.TypescriptPlugin({
+                excludeNames: [/Factory$/, /^I.+State$/],
+                excludePaths: ["node_modules/", "core/typings"],
+                includeDefinitionFiles: true,
+            }))
             .use(".scss", new dm.KssPlugin())
-            .documentGlobs("packages/*/src/**/*")
+            .documentGlobs("packages/*/src/**/*", "packages/*/dist/index.d.ts")
             .then((docs) => JSON.stringify(docs, null, 2))
             .then((content) => (
                 text.fileStream(filenames.data, content)
                     .pipe(gulp.dest(config.data))
-            ));
-    });
+            ))
+    ));
 
     // create a JSON file containing latest released version of each project
     gulp.task("docs-releases", () => {

package.json

@@ -34,7 +34,7 @@
     "better-handlebars": "github:wmeldon/better-handlebars",
     "chai": "3.5.0",
     "del": "2.2.2",
-    "documentalist": "0.0.5",
+    "documentalist": "0.0.6",
     "enzyme": "2.6.0",
     "gulp": "3.9.1",
     "gulp-concat": "2.6.0",

packages/docs/src/components/navMenu.tsx

@@ -38,11 +38,10 @@ export const NavMenuItem: React.SFC<INavMenuItemProps & { children?: React.React
         [Classes.INTENT_PRIMARY]: props.isActive,
     });
     const handleClick = () => props.onClick(item.route);
-    const title = props.children ? <strong>{item.title}</strong> : item.title;
     return (
         <li className={classes} key={item.route}>
             <a className={itemClasses} href={"#" + item.route} onClick={handleClick}>
-                {title}
+                {item.title}
             </a>
             {props.children}
         </li>
@@ -53,14 +52,15 @@ NavMenuItem.displayName = "Docs.NavMenuItem";
 export const NavMenu: React.SFC<INavMenuProps> = (props) => {
     const menu = props.items.map((section) => {
         const isActive = props.activeSectionId === section.route;
-        const isExpanded = isActive || props.activePageId === (section as IPageNode).reference;
+        const isExpanded = isActive || isParentOfRoute(section.route, props.activeSectionId);
         // active section gets selected styles, expanded section shows its children
-        const menuClasses = classNames({ "docs-nav-expanded": isExpanded });
+        const classes = classNames({ "docs-nav-expanded": isExpanded });
         const childrenMenu = isPageNode(section)
-            ? <NavMenu {...props} className={menuClasses} items={section.children} />
+            ? <NavMenu {...props} items={section.children} />
             : undefined;
         return (
             <NavMenuItem
+                className={classes}
                 key={section.route}
                 item={section}
                 isActive={isActive}
@@ -74,3 +74,7 @@ export const NavMenu: React.SFC<INavMenuProps> = (props) => {
     return <ul className={classes}>{menu}</ul>;
 };
 NavMenu.displayName = "Docs.NavMenu";
+
+function isParentOfRoute(parent: string, route: string) {
+    return route.indexOf(parent + "/") === 0 || route.indexOf(parent + ".") === 0;
+}

packages/docs/src/index.tsx

@@ -19,11 +19,10 @@ import { TagRenderer } from "./components/page";
 import { PropsTable } from "./components/propsTable";
 import { IPackageInfo, Styleguide } from "./components/styleguide";
 
-import { IHeadingTag, IPageNode } from "documentalist/dist/client";
+import { IHeadingTag } from "documentalist/dist/client";
 import { IKssPluginData, IMarkdownPluginData, ITypescriptPluginData } from "documentalist/dist/plugins";
 
 interface IDocsData extends IKssPluginData, IMarkdownPluginData, ITypescriptPluginData {
-    layout: IPageNode[];
 }
 
 /* tslint:disable:no-var-requires */

packages/docs/src/styles/_layout.scss

@@ -85,15 +85,15 @@ Lefthand navigation menu
 */
 
 // nested menus are hidden by default
-.docs-nav-menu .docs-menu-item-heading {
+.docs-nav-menu .docs-nav-menu {
   display: none;
 }
 
-.docs-nav-expanded > .docs-menu-item-heading {
+.docs-nav-expanded > .docs-nav-menu {
   display: block;
 }
 
-.docs-nav-expand-all .docs-menu-item-heading {
+.docs-nav-expand-all .docs-nav-menu {
   // sometimes you need to show all the sections
   display: block !important; // stylelint-disable-line declaration-no-important
 }
@@ -115,7 +115,7 @@ Lefthand navigation menu
     white-space: initial;
   }
 
-  @each $depth in (2, 3, 4, 5) {
+  @each $depth in (2, 3, 4, 5, 6) {
     &.depth-#{$depth} > .pt-menu-item {
       padding-left: $nav-item-padding + $nav-item-indent * ($depth - 1);
     }