Categorize sidebar

Author: Gerrit0

src/lib/output/themes/default/partials/navigation.tsx

@@ -1,4 +1,10 @@
-import { DeclarationReflection, ProjectReflection, Reflection, ReflectionKind } from "../../../../models";
+import {
+    DeclarationReflection,
+    ProjectReflection,
+    Reflection,
+    ReflectionCategory,
+    ReflectionKind,
+} from "../../../../models";
 import { JSX } from "../../../../utils";
 import type { PageEvent } from "../../../events";
 import { camelToTitleCase, classNames, getDisplayName, wbr } from "../../lib";
@@ -98,42 +104,60 @@ export function settings(context: DefaultThemeRenderContext) {
     );
 }
 
+type NavigationElement = ReflectionCategory | DeclarationReflection;
+
+function getNavigationElements(parent: NavigationElement | ProjectReflection): NavigationElement[] {
+    if (parent instanceof ReflectionCategory) {
+        return parent.children;
+    }
+
+    if (!parent.kindOf(ReflectionKind.SomeModule | ReflectionKind.Project)) {
+        return [];
+    }
+
+    if (parent.categories) {
+        return parent.categories;
+    }
+
+    return parent.children || [];
+}
+
 export function navigation(context: DefaultThemeRenderContext, props: PageEvent<Reflection>) {
     // Create the navigation for the current page
     // Recurse to children if the parent is some kind of module
 
     return (
         <nav class="tsd-navigation">
-            {link(props.project)}
-            <ul class="tsd-small-nested-navigation">
-                {props.project.children?.map((c) => (
+            {createNavElement(props.project, false)}
+            <ul class="tsd-nested-navigation">
+                {getNavigationElements(props.project).map((c) => (
                     <li>{links(c)}</li>
                 ))}
             </ul>
         </nav>
     );
 
-    function links(mod: DeclarationReflection) {
-        const children = (mod.kindOf(ReflectionKind.SomeModule | ReflectionKind.Project) && mod.children) || [];
-
+    function links(mod: NavigationElement) {
         const nameClasses = classNames(
-            { deprecated: mod.isDeprecated() },
-            mod.isProject() ? void 0 : context.getReflectionClasses(mod)
+            { deprecated: mod instanceof Reflection && mod.isDeprecated() },
+            !(mod instanceof Reflection) || mod.isProject() ? void 0 : context.getReflectionClasses(mod)
         );
 
+        const children = getNavigationElements(mod);
+
         if (!children.length) {
-            return link(mod, nameClasses);
+            return createNavElement(mod, true, nameClasses);
         }
 
         return (
             <details
                 class={classNames({ "tsd-index-accordion": true }, nameClasses)}
-                open={inPath(mod)}
-                data-key={mod.getFullName()}
+                open={mod instanceof Reflection && inPath(mod)}
+                data-key={mod instanceof Reflection ? mod.getFullName() : mod.title}
             >
                 <summary class="tsd-accordion-summary">
                     {context.icons.chevronDown()}
-                    {link(mod)}
+                    {createNavElement(mod, false)}
                 </summary>
                 <div class="tsd-accordion-details">
                     <ul class="tsd-nested-navigation">
@@ -146,13 +170,17 @@ export function navigation(context: DefaultThemeRenderContext, props: PageEvent<
         );
     }
 
-    function link(child: DeclarationReflection | ProjectReflection, nameClasses?: string) {
-        return (
-            <a href={context.urlTo(child)} class={classNames({ current: child === props.model }, nameClasses)}>
-                {context.icons[child.kind]()}
-                <span>{wbr(getDisplayName(child))}</span>
-            </a>
-        );
+    function createNavElement(child: NavigationElement | ProjectReflection, icon: boolean, nameClasses?: string) {
+        if (child instanceof Reflection) {
+            return (
+                <a href={context.urlTo(child)} class={classNames({ current: child === props.model }, nameClasses)}>
+                    {icon && context.icons[child.kind]()}
+                    <span>{wbr(getDisplayName(child))}</span>
+                </a>
+            );
+        }
+
+        return <span>{child.title}</span>;
     }
 
     function inPath(mod: DeclarationReflection | ProjectReflection) {

static/style.css

@@ -696,7 +696,12 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark {
 .tsd-navigation.settings {
     margin: 1rem 0;
 }
+.tsd-navigation > a,
+.tsd-navigation .tsd-accordion-summary {
+    width: calc(100% - 0.5rem);
+}
 .tsd-navigation a,
+.tsd-navigation summary > span,
 .tsd-page-navigation a {
     display: inline-flex;
     align-items: center;
@@ -705,14 +710,6 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark {
     text-decoration: none;
     box-sizing: border-box;
 }
-.tsd-navigation a {
-    /* why 3rem? No idea, but it seems to work. */
-    width: calc(100% - 3rem);
-}
-.tsd-page-navigation a {
-    /* why is this different? */
-    width: 100%;
-}
 .tsd-navigation a.current,
 .tsd-page-navigation a.current {
     background: var(--color-active-menu-item);
@@ -732,17 +729,13 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark {
     padding: 0;
     max-width: 100%;
 }
-.tsd-nested-navigation > li > a {
-    margin-left: 3rem;
+.tsd-nested-navigation > li > a,
+.tsd-nested-navigation > li > span {
+    width: calc(100% - 1.75rem - 0.5rem);
+    margin-left: 1.75rem;
 }
 .tsd-nested-navigation > li > details {
-    margin-left: 1.5rem;
-}
-.tsd-small-nested-navigation > li > a {
-    margin-left: 1.5rem;
-}
-.tsd-small-nested-navigation > li > details {
-    margin-left: 0;
+    margin-left: 1.75rem;
 }
 .tsd-page-navigation ul {
     padding-left: 1.75rem;
@@ -765,28 +758,32 @@ a.tsd-index-link {
     align-items: center;
     color: var(--color-text);
 }
+.tsd-accordion-summary {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+}
 .tsd-accordion-summary,
 .tsd-accordion-summary a {
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
 
-    display: flex;
-    align-items: center;
     cursor: pointer;
 }
+.tsd-accordion-summary a {
+    flex-grow: 1;
+}
 .tsd-accordion-summary > * {
     margin-top: 0;
     margin-bottom: 0;
     padding-top: 0;
     padding-bottom: 0;
 }
-.tsd-accordion-summary::-webkit-details-marker {
-    display: none;
-}
 .tsd-index-accordion .tsd-accordion-summary svg {
     margin-right: 0.25rem;
+    margin-left: 0.25rem;
 }
 .tsd-index-content > :not(:first-child) {
     margin-top: 0.75rem;