fixed no dismiss on nav bar

src/components/navigation/sidebars/nav/index.tsx

@@ -37,10 +37,11 @@ const NavComponent: Component<NavProps> = props => {
 
   const handleClickOutside = (event: MouseEvent) => {
     const isLink = "href" in (event.target || {});
+    const isInBody = document.body.contains(event.target as Node);
     if (
       isLink ||
-      (document.body.contains(event.target as Node) &&
+      !isInBody ||
-        !navRef.contains(event.target as Node))
+      (isInBody && !navRef.contains(event.target as Node))
     ) {
       setOpen(false);
     }
@@ -70,11 +71,8 @@ const NavComponent: Component<NavProps> = props => {
       ref={navRef!}
     >
       <div onclick={e => toggle(e)}>
-        {open() ? (
+        <MenuToX class={`nav-icon ${open() ? "active" : ""}`} />
-          <MenuToX class="nav-icon" />
+        <XToMenu class={`nav-icon ${!open() ? "active" : ""}`} />
-        ) : (
-          <XToMenu class="nav-icon" />
-        )}
       </div>
       <div
         id={open() ? "#qs_search" : ""}

src/components/navigation/sidebars/toc/index.tsx

@@ -47,7 +47,6 @@ const TableOfContents: Component<TOCProps> = props => {
   });
 
   createEffect(() => {
-    const tocRoot = document.getElementById("toc")!;
     if (open()) {
       window.addEventListener("click", handleClickOutside);
       document.body.style.overflow = "hidden";

src/styles/docs/nav/nav.css

@@ -5,6 +5,17 @@
   display: none;
 }
 
+.nav-icon {
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.6s;
+}
+
+.nav-icon.active {
+  opacity: 1;
+  position: relative;
+}
+
 .nav-toggle {
   position: unset;
   height: 24px;