diff --git a/src/components/navigation/sidebars/TOC.astro b/src/components/navigation/sidebars/TOC.astro index 310c0ce..11dd4fb 100644 --- a/src/components/navigation/sidebars/TOC.astro +++ b/src/components/navigation/sidebars/TOC.astro @@ -11,7 +11,7 @@ export interface Props { const { headings, types, mobile } = Astro.props; --- -
+
= props => { - + + window.open( + "https://doc.qt.io/qt-6/qtquick-qmlmodule.html" + ) + } + > = props => { - + + window.open( + "https://git.outfoxxed.me/outfoxxed/quickshell-examples" + ) + } + > = props => { }; onMount(() => { - window.addEventListener("click", handleClickOutside); - return () => { + onCleanup(() => { 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 ( diff --git a/src/components/navigation/sidebars/toc/index.tsx b/src/components/navigation/sidebars/toc/index.tsx index 0cfceb4..f25096a 100644 --- a/src/components/navigation/sidebars/toc/index.tsx +++ b/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 = 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) && - !tocRef.contains(event.target as Node)) + !isInBody || + (isInBody && !tocRef.contains(event.target as Node)) ) { setOpen(false); } }; onMount(() => { - window.addEventListener("click", handleClickOutside); - return () => { + onCleanup(() => { 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 ( diff --git a/src/pages/docs/types/index.astro b/src/pages/docs/types/index.astro index 19ebb3c..89c0bf6 100644 --- a/src/pages/docs/types/index.astro +++ b/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))]; ---

Type Definitions

+ {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 ( +
+ + {moduleEntry} + + {description} +
) + })}
diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css index 6c3cd38..e0e4a1e 100644 --- a/src/styles/docs/docs.css +++ b/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; } } diff --git a/src/styles/docs/nav/nav.css b/src/styles/docs/nav/nav.css index 1fcb663..2bfebb1 100644 --- a/src/styles/docs/nav/nav.css +++ b/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; } } diff --git a/src/styles/docs/toc/toc.css b/src/styles/docs/toc/toc.css index 7fffe54..82f184f 100644 --- a/src/styles/docs/toc/toc.css +++ b/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); } } diff --git a/src/styles/docs/toc/types-toc.css b/src/styles/docs/toc/types-toc.css index 7661798..ee7c769 100644 --- a/src/styles/docs/toc/types-toc.css +++ b/src/styles/docs/toc/types-toc.css @@ -63,6 +63,8 @@ } &:hover { + cursor: pointer; + & svg { opacity: 1; }