added index to the docs/types route, minor fixes to styling

src/components/navigation/sidebars/TOC.astro

@@ -11,7 +11,7 @@ export interface Props {
 const { headings, types, mobile } = Astro.props;
 ---
 
-<div class=`toc-wrapper${mobile ? "-mobile":""}`>
+<div id="toc" aria-mobile={mobile} class=`toc-wrapper${mobile ? "-mobile":""}`>
   <TableOfContents
     config={headings}
     type={types}

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

@@ -126,7 +126,14 @@ export const Tree: Component<TreeProps> = props => {
             <Accordion.ItemIndicator>
               <LinkSimple />
             </Accordion.ItemIndicator>
-            <span>
+            <span
+              class="link-outside"
+              onMouseDown={() =>
+                window.open(
+                  "https://doc.qt.io/qt-6/qtquick-qmlmodule.html"
+                )
+              }
+            >
               <a
                 href="https://doc.qt.io/qt-6/qtquick-qmlmodule.html"
                 target="_blank"
@@ -145,7 +152,14 @@ export const Tree: Component<TreeProps> = props => {
             <Accordion.ItemIndicator>
               <LinkSimple />
             </Accordion.ItemIndicator>
-            <span>
+            <span
+              class="link-outside"
+              onMouseDown={() =>
+                window.open(
+                  "https://git.outfoxxed.me/outfoxxed/quickshell-examples"
+                )
+              }
+            >
               <a
                 href="https://git.outfoxxed.me/outfoxxed/quickshell-examples"
                 target="_blank"

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

@@ -1,4 +1,10 @@
-import { createSignal, onMount, type Component } from "solid-js";
+import {
+  createSignal,
+  createEffect,
+  onMount,
+  onCleanup,
+  type Component,
+} from "solid-js";
 
 import { LoadingSpinner, MenuToX, XToMenu } from "@icons";
 import { Tree } from "./Tree";
@@ -41,10 +47,21 @@ const NavComponent: Component<NavProps> = props => {
   };
 
   onMount(() => {
-    window.addEventListener("click", handleClickOutside);
+    onCleanup(() => {
-    return () => {
       window.removeEventListener("click", handleClickOutside);
-    };
+    });
+  });
+
+  createEffect(() => {
+    if (open()) {
+      window.addEventListener("click", handleClickOutside);
+      document.body.style.overflow = "hidden";
+      document.body.classList.add("dim-content");
+    } else {
+      window.removeEventListener("click", handleClickOutside);
+      document.body.style.overflow = "auto";
+      document.body.classList.remove("dim-content");
+    }
   });
 
   return (

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

@@ -1,4 +1,10 @@
-import { createSignal, onMount, type Component } from "solid-js";
+import {
+  createEffect,
+  createSignal,
+  onMount,
+  onCleanup,
+  type Component,
+} from "solid-js";
 
 import { Article } from "@icons";
 import { Table } from "./Table";
@@ -24,20 +30,33 @@ const TableOfContents: Component<TOCProps> = 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 ||
-        !tocRef.contains(event.target as Node))
+      (isInBody && !tocRef.contains(event.target as Node))
     ) {
       setOpen(false);
     }
   };
 
   onMount(() => {
-    window.addEventListener("click", handleClickOutside);
+    onCleanup(() => {
-    return () => {
       window.removeEventListener("click", handleClickOutside);
-    };
+    });
+  });
+
+  createEffect(() => {
+    const tocRoot = document.getElementById("toc")!;
+    if (open()) {
+      window.addEventListener("click", handleClickOutside);
+      document.body.style.overflow = "hidden";
+      document.body.classList.add("dim-content");
+    } else {
+      window.removeEventListener("click", handleClickOutside);
+      document.body.style.overflow = "auto";
+      document.body.classList.remove("dim-content");
+    }
   });
 
   return (

src/pages/docs/types/index.astro

@@ -1,8 +1,25 @@
 ---
 import DocsLayout from "@layouts/DocsLayout.astro";
+import { generateTypeData } from "@config/io/generateTypeData";
+
+const routes = await generateTypeData();
+
+const modules = [...new Set(routes.map(route => route.type))];
 ---
 <DocsLayout title="Quickshell Type Definitions" description="Quickshell Type Documentation">
   <h2>Type Definitions</h2>
   <div class="root-nav">
+    {modules.map(moduleEntry => {
+      const indexData = routes.filter(route => route.name === "index")
+      const indexSingled = indexData.filter(indexEntry => indexEntry.type === moduleEntry)[0]
+      const description = indexSingled.data.description
+      return (
+      <div class="root-nav-entry">
+        <a class="root-nav-link" href={`/docs/types/${moduleEntry}`}>
+          {moduleEntry}
+        </a>
+        <span class="root-nav-desc">{description}</span>
+      </div>)
+    })}
   </div>
 </DocsLayout>

src/styles/docs/docs.css

@@ -8,6 +8,7 @@
   justify-content: center;
   flex-direction: row;
   flex-grow: 1;
+  transition: filter 0.3s;
 }
 
 .docslayout-inner {
@@ -19,6 +20,10 @@
   flex-direction: row;
 }
 
+.dim-content .docslayout-root {
+  filter: brightness(50%);
+}
+
 .docs-content {
   flex-grow: 1;
 
@@ -44,7 +49,7 @@
 }
 
 .heading {
-  & > [id] {
+  &>[id] {
     width: max-content;
   }
 
@@ -82,7 +87,7 @@ ul {
 .markdown-alert {
   margin-block: 0.618rem;
 
-  & > *:not(:first-child) {
+  &>*:not(:first-child) {
     margin-block: 0.724rem;
   }
 }

src/styles/docs/nav/nav.css

@@ -39,7 +39,8 @@
       display: none;
     }
 
-    transition: left 0.3s ease, padding 0.3s ease;
+    transition: left 0.3s ease,
+    padding 0.3s ease;
 
     &.shown {
       display: flex;
@@ -82,10 +83,10 @@
       }
 
       & [data-part="item"] {
-        & [data-part="item-content"] > div {
+        & [data-part="item-content"]>div {
           min-height: 3em;
 
-          & > a {
+          &>a {
             margin: auto 0;
           }
         }
@@ -94,6 +95,12 @@
   }
 }
 
+.link-outside {
+  width: 100%;
+  height: 100%;
+  text-align: start;
+}
+
 @media (min-width: 40rem) {
   .nav-toggle {
     .nav-items {
@@ -128,7 +135,7 @@
         }
 
         & [data-part="item"] {
-          & [data-part="item-content"] > div {
+          & [data-part="item-content"]>div {
             min-height: 2.2rem;
           }
         }

src/styles/docs/toc/toc.css

@@ -13,17 +13,7 @@
 
 .toc-wrapper-mobile {
   display: block;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  background-color: transparent;
-}
-
-.toc-content {
   background-color: transparent;
 }
 
@@ -35,7 +25,7 @@
   font-size: 1.614rem;
   max-height: 500px;
 
-  & > svg {
+  &>svg {
     height: 100%;
     width: 24px;
   }
@@ -60,14 +50,20 @@
     -ms-overflow-style: none;
     background-color: hsl(var(--overlay-bkg));
     border-left: 1px solid hsl(var(--overlay-bkg-border));
+    cursor: default;
 
     &::-webkit-scrollbar {
       display: none;
     }
 
-    transition: width 0.3s ease, padding 0.3s ease;
+    transition: width 0.3s ease,
+    padding 0.3s ease;
 
     &.shown {
+      & .toc-content {
+        background-color: transparent;
+      }
+
       overflow-y: scroll;
       width: var(--width);
       display: flex;
@@ -122,7 +118,7 @@
       list-style: none;
 
       &.active {
-        & > .toc_a {
+        &>.toc_a {
           color: hsl(var(--green) 72 60);
         }
       }

src/styles/docs/toc/types-toc.css

@@ -63,6 +63,8 @@
     }
 
     &:hover {
+      cursor: pointer;
+
       & svg {
         opacity: 1;
       }