quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

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

Browse source
This commit is contained in:
Xanazf 2024-10-17 19:35:39 +03:00
parent ea5b56acc8
commit 349c87a205
Signed by: Xanazf
GPG key ID: 4E4A5AD1FB748427
9 changed files with 109 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/navigation/sidebars/TOC.astro
View file

@ -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}

18
src/components/navigation/sidebars/nav/Tree.tsx
View file

@ -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"

25
src/components/navigation/sidebars/nav/index.tsx
View file

@ -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);
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 (

31
src/components/navigation/sidebars/toc/index.tsx
View file

@ -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) &&
!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 (