feat: Add expanded property to Route

docs/configuration.md

@@ -65,6 +65,7 @@ type Routes = Array<string | Route>;
 interface Route {
   name?: string;
   path?: string;
+  expanded?: boolean;
   children?: Routes;
 }
 ```
@@ -79,6 +80,8 @@ When `name` is not defined it's automatically generated based on `path`. If the
 
 When an object _parent_ route has a `path`, its children will inherit it as their base path. Route paths look like: `root + parent.path + child.path`. There's no hard limit to nesting depth but in general not more than 3 levels deep is recommended.
 
+If a route has `expanded: true` and contains children, it will be expanded by default on initial page load.
+
 Only routes which are defined can be loaded. Even if you link to files in your markdown, unless they're in `routes` they will generate an error when attempting to load them. The reason behind this is twofold, firstly to prevent users accessing files they shouldn't, and secondly for discoverability e.g., routes are fetched by the [search plugin](plugins/search.md) to index their content.
 
 ## Example

docs/dev/index.html

@@ -50,7 +50,7 @@
         "old-browser-support.md",
         "development.md"
       ]},
-      { path: "dev", children: [
+      { path: "dev", expanded: true, children: [
         "test-1.md",
         "test-2.md",
         "test-3.md",

src/components/Sidenav.ts

@@ -30,7 +30,7 @@ export function Sidenav(): SidenavComponent {
 
     routes.forEach((route) => {
       if (route.children) {
-        item = SidenavParent(route.name);
+        item = SidenavParent(route.name, route.expanded);
         attachRoutes(route.children, item);
       } else {
         item = SidenavLink(route.name, route.path!);

src/components/SidenavParent.ts

@@ -19,12 +19,19 @@ const view = h(`
   </ul>
 `);
 
-export function SidenavParent(title: string): SidenavParentComponent {
+export function SidenavParent(
+  title: string,
+  expanded?: boolean,
+): SidenavParentComponent {
   const root = view.cloneNode(true) as SidenavParentComponent;
   const { button, t } = view.collect<RefNodes>(root);
 
   t.textContent = title;
 
+  if (expanded) {
+    root.classList.add('expanded');
+  }
+
   button.__click = () => {
     root.classList.toggle('expanded');
   };

src/types.ts

@@ -63,6 +63,12 @@ export interface Route {
    * content item name instead of the default of inferring it from the path.
    */
   path?: string;
+  /**
+   * Set the menu item default state on page load as expanded.
+   *
+   * Only valid for menu items with children.
+   */
+  expanded?: boolean;
   /** Creates a new menu section with a list of child routes. */
   children?: Routes;
 }