Sidenav

This is the most complex component featured in this project.

Credit where it's due, the original algorithm for building the sidenav is forked from Hasura's Gitbook Starter (a great starter if you need a Gitbook style approach). You can find the algorithm in createTreeData.js, it's executed in the mdx_layout.js file during build time. (Breadcrumb data is merged into this algorithm as well.)

I've made a number of tweaks to give content creators more control over how things are displayed and ordered.

Since we have a heavy WYSIWYG flow, it's important to know that the sidenav follows the structure of the content directory (minus the homepage). It is possible to create a group without an index page (Like the Components folder) and it will still show up normally, except when you click the link it will take you to the first child in it's list instead of it's own index page.

Title (String)

Typical Title Rule shenanigans for label purposes. Learn more about it here

In the context of the sidenav the title is used for ordering where no order frontmatter is provided. A-Z = Top to Bottom

---
title: "Label that shows up on Sidenav, Header, and Breadcrumbs"
---

Order (Integer or Float)

The rule for order in the sidenav is much more strict because of the recursive nature of file directories.

---
order: 0
---

Here's the initial priority:

1. If order is provided the sidenav node (individual file or a group) is ordered lowest to highest with 0 being at the top and the largest number being at the bottom.**
2. Then if no order is provided the elements are ordered A-Z top to bottom AFTER all the elements that have an order frontmatter.

###TLDR

The order is: Files with order lowest to highest -> Files with no order A-Z.

Files inside of group folders are ordered RELATIVE to their group.

Here's an example:

We have Files listed A-F.

File_A has order 2 File_B has order 0 File_D has order 1

Your sidenav will look like:

• File_B
• File_D
• File_A
• File_C
• File_E
• File_F

If you have a folder that has child files and those files have order frontmatter props they are ordered RELATIVE to their parent.

Here's another example:

We have Files A and C with Folder B.

File C has an order of 1 Folder B's index.mdx file has an order of 0

Folder B's file_3 has an order of 0 Folder B's file_2 has an order of 1

Your sidenav will look like:

• Folder_B
  • file_3
  • file_2
  • file_1
• File_C
• File_A