Display active node in menu trigger

timvir · Jun 4, 2024 · ef2119d · ef2119d
1 parent 112660a
commit ef2119d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/pkg/timvir/core/components/Page/Page.tsx b/pkg/timvir/core/components/Page/Page.tsx
@@ -138,7 +138,7 @@ function Page(props: Props, ref: React.ForwardedRef<React.ElementRef<typeof Root
         <Sidebar
           className={css`
             grid-area: navigation;
-            z-index: 1;
+            z-index: 80;
             background-color: var(--timvir-background-color);
             position: sticky;
             top: 0;

diff --git a/pkg/timvir/core/components/Page/internal/Sidebar.tsx b/pkg/timvir/core/components/Page/internal/Sidebar.tsx
@@ -3,6 +3,7 @@ import * as React from "react";
 import { Node } from "../types";
 import Section from "./Section";
 import * as Icons from "react-feather";
+import { useContext } from "timvir/context";
 
 interface Props extends React.ComponentPropsWithoutRef<"nav"> {
   toc: readonly Node[];
@@ -18,8 +19,25 @@ interface Props extends React.ComponentPropsWithoutRef<"nav"> {
 }
 
 function Sidebar(props: Props) {
+  const { location } = useContext();
+
   const { toc, search, className, ...rest } = props;
 
+  const node = (function find(nodes: readonly Node[]): undefined | Node {
+    for (const node of nodes) {
+      if (node.path === location.asPath) {
+        return node;
+      }
+
+      if (node.children) {
+        const n = find(node.children);
+        if (n) {
+          return n;
+        }
+      }
+    }
+  })(toc);
+
   return (
     <nav className={cx(className, classes.root)} {...rest}>
       <header
@@ -97,7 +115,20 @@ function Sidebar(props: Props) {
           }
         `}
       >
-        <span>Menu</span>
+        {node?.icon
+          ? React.cloneElement(node.icon, {
+              className: css`
+                display: block;
+                width: 1.3em;
+                height: 1.3em;
+                margin-right: 8px;
+                min-width: -moz-fit-content;
+                min-width: fit-content;
+              `,
+            })
+          : null}
+        <span>{node?.label ?? "Menu"}</span>
+
         <Icons.Menu
           size={`1rem`}
           className={css`