diff --git a/src/components/FileTree.tsx b/src/components/FileTree.tsx
index e9e7e81..a46fa9b 100644
--- a/src/components/FileTree.tsx
+++ b/src/components/FileTree.tsx
@@ -1,4 +1,4 @@
-import { Component, createSignal, Show } from "solid-js";
+import { Component, createMemo, createSignal, Show } from "solid-js";
 import { type FileNode, type TocNode } from "../data-loader";
 import { useNavigate } from "@solidjs/router";
 
@@ -15,7 +15,7 @@ export const FileTreeNode: Component<{
   const navigate = useNavigate();
   const [isExpanded, setIsExpanded] = createSignal(true);
   const isDir = !!props.node.children;
-  const isActive = props.currentPath === props.node.path;
+  const isActive = createMemo(() => props.currentPath === props.node.path);
 
   const handleClick = () => {
     if (isDir) {
@@ -32,7 +32,7 @@ export const FileTreeNode: Component<{
     <div>
       <div
         class={`flex items-center py-1 px-2 cursor-pointer hover:bg-gray-100 rounded ${
-          isActive ? "bg-blue-50 text-blue-700" : "text-gray-700"
+          isActive() ? "bg-blue-50 text-blue-700" : "text-gray-700"
         }`}
         style={{ "padding-left": `${indent + 8}px` }}
         onClick={handleClick}