fix: change subcategory format

docs/guides-navigation.md

@@ -94,27 +94,46 @@ You should provide `directory/id` instead of `id` in `sidebars.json`.
 }
 ```
 
-### Adding Sub Categories 
+### Adding Subcategories
 
-It is possibile to add sub categories to a sidebar. Instead of passing an array to the category like the previous examples you can pass an object where 
-the keys will be the sub category name. You can then pass an array of document ids to the sub category.
+It is possible to add subcategories to a sidebar. Instead of using IDs as the contents of the category array like the previous examples, you can pass an object where the keys will be the subcategory name and the value an array of IDs for that subcategory.
 
 ```js
 {
-  "examples-sidebar" : {
-    "My Example Category" : {
-      "My Example Sub Category" : [
-        "my-examples",
-        ...
-      ],
-      "My Next Sub Category" : [
-        "some-other-examples"
-      ]
+  "docs": {
+    "My Example Category": [
+      "examples",
+      {
+        "My Example Subcategory": [
+          "my-examples",
+          ...
+        ]
+      },
+      {
+        "My Next Subcategory": [
+          "some-other-examples"
+        ]
+      },
+      "even-more-examples",
       ...
-    },
+    ],
     ...
   }
 }
+
+/*
+The above will generate:
+
+- My Example Category
+  - examples
+  - My Example Subcategory
+    - my-examples
+    ...
+  - My Next Subcategory
+    - some-other-examples
+  - even-more-examples
+  ...
+*/
 ```
 
 ### Adding New Sidebars

v1/lib/core/BlogSidebar.js

@@ -27,8 +27,12 @@ class BlogSidebar extends React.Component {
 
     const contents = [
       {
-        name: blogSidebarTitle,
-        links: MetadataBlog.slice(0, blogSidebarCount),
+        type: 'CATEGORY',
+        title: blogSidebarTitle,
+        children: MetadataBlog.slice(0, blogSidebarCount).map(item => ({
+          type: 'LINK',
+          item,
+        })),
       },
     ];
     const title = this.props.current && this.props.current.title;

v1/lib/core/DocsLayout.js

@@ -53,7 +53,6 @@ class DocsLayout extends React.Component {
     const title =
       idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
     const hasOnPageNav = this.props.config.onPageNav === 'separate';
-
     const previousTitle =
       idx(i18n, ['localized-strings', metadata.previous_id]) ||
       idx(i18n, ['localized-strings', 'previous']) ||

v1/lib/core/DocsSidebar.js

@@ -28,12 +28,13 @@ if (fs.existsSync(`../server/languages.js`)) {
 
 class DocsSidebar extends React.Component {
   render() {
-    const sidebar = this.props.metadata.sidebar;
+    const {category, sidebar} = this.props.metadata;
     const docsCategories = readCategories(sidebar, Metadata, languages);
-    const categoryName = this.props.metadata.category;
-    if (!categoryName) {
+
+    if (!category) {
       return null;
     }
+
     return (
       <Container className="docsNavContainer" id="docsNav" wrapper={false}>
         <SideNav

v1/lib/core/nav/SideNav.js

@@ -61,44 +61,48 @@ class SideNav extends React.Component {
     return null;
   }
 
-  renderCategory(category) {
-    return (
-      <div className="navGroup" key={category.name}>
-        <h3 className="navGroupCategoryTitle">
-          {this.getLocalizedCategoryString(category.name)}
-        </h3>
-        <ul>
-          {category.links.map(this.renderItemLink, this)}
-          {category.sub_categories &&
-            category.sub_categories.map(this.renderSubCategory, this)}
-        </ul>
-      </div>
-    );
-  }
-
-  renderSubCategory(subCategory) {
-    return (
-      <div className="navGroup subNavGroup" key={subCategory.name}>
-        <h4 className="navGroupSubCategoryTitle">
-          {this.getLocalizedCategoryString(subCategory.name)}
-        </h4>
-        <ul>{subCategory.links.map(this.renderItemLink, this)}</ul>
-      </div>
-    );
-  }
-
-  renderItemLink(link) {
+  renderCategory = categoryItem => (
+    <div className="navGroup" key={categoryItem.title}>
+      <h3 className="navGroupCategoryTitle">
+        {this.getLocalizedCategoryString(categoryItem.title)}
+      </h3>
+      <ul>
+        {categoryItem.children.map(item => {
+          switch (item.type) {
+            case 'LINK':
+              return this.renderItemLink(item);
+            case 'SUBCATEGORY':
+              return this.renderSubcategory(item);
+            default:
+              return null;
+          }
+        })}
+      </ul>
+    </div>
+  );
+
+  renderSubcategory = subcategoryItem => (
+    <div className="navGroup subNavGroup" key={subcategoryItem.title}>
+      <h4 className="navGroupSubcategoryTitle">
+        {this.getLocalizedCategoryString(subcategoryItem.title)}
+      </h4>
+      <ul>{subcategoryItem.children.map(this.renderItemLink)}</ul>
+    </div>
+  );
+
+  renderItemLink = linkItem => {
+    const linkMetadata = linkItem.item;
     const itemClasses = classNames('navListItem', {
-      navListItemActive: link.id === this.props.current.id,
+      navListItemActive: linkMetadata.id === this.props.current.id,
     });
     return (
-      <li className={itemClasses} key={link.id}>
-        <a className="navItem" href={this.getLink(link)}>
-          {this.getLocalizedString(link)}
+      <li className={itemClasses} key={linkMetadata.id}>
+        <a className="navItem" href={this.getLink(linkMetadata)}>
+          {this.getLocalizedString(linkMetadata)}
         </a>
       </li>
     );
-  }
+  };
 
   render() {
     return (
@@ -122,7 +126,7 @@ class SideNav extends React.Component {
               )}
             </div>
             <div className="navGroups">
-              {this.props.contents.map(this.renderCategory, this)}
+              {this.props.contents.map(this.renderCategory)}
             </div>
           </section>
         </div>

v1/lib/server/__tests__/__fixtures__/metadata-subcategories.js

@@ -12,7 +12,7 @@ module.exports = {
     next_id: 'doc2',
     next: 'en-doc2',
     next_title: 'Document 2',
-    sub_category: 'Sub Cat 1',
+    subcategory: 'Sub Cat 1',
     sort: 1,
   },
   'en-doc2': {
@@ -28,7 +28,7 @@ module.exports = {
     previous_id: 'doc1',
     previous: 'en-doc1',
     previous_title: 'Document 1',
-    sub_category: 'Sub Cat 1',
+    subcategory: 'Sub Cat 1',
     sort: 2,
   },
   'en-doc3': {
@@ -44,7 +44,7 @@ module.exports = {
     previous_id: 'doc2',
     previous: 'en-doc2',
     previous_title: 'Document 2',
-    sub_category: 'Sub Cat 2',
+    subcategory: 'Sub Cat 2',
     sort: 3,
   },
   'en-doc4': {

v1/lib/server/__tests__/__fixtures__/sidebar-subcategories.js

@@ -1,11 +1,20 @@
 module.exports = {
   docs: {
-    'First Category': {
-      'Sub Cat One': ['doc2', 'doc1'],
-      'Sub Cat Two': ['doc3', 'doc5'],
-    },
-    'Second Category': {
-      Hello: ['doc4'],
-    },
+    'First Category': ['doc1', 'doc2'],
+    'Second Category': [
+      'doc3',
+      {
+        'First Subcategory': ['doc4'],
+      },
+      'doc5',
+    ],
+    'Third Category': [
+      {
+        'Second Subcategory': ['doc6'],
+      },
+      {
+        'Third Subcategory': ['doc7'],
+      },
+    ],
   },
 };