Skip to content

Commit 5341fe5

Browse files
outfoxxedoutfoxxed
committed
rewrite nav
1 parent 6249a0a commit 5341fe5

18 files changed

+247
-408
lines changed

‎src/components/Accordion.astro

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import "@styles/components/accordion.css"
2+
import "@styles/components/accordion.css";
33
---
44
<details class=`accordion ${Astro.props.class ?? ""}` {...Astro.props}>
55
<summary>
@@ -19,12 +19,13 @@ import "@styles/components/accordion.css"
1919
const body = accordion.querySelector(".accordion-container") as HTMLDivElement;
2020

2121
summary.addEventListener("click", event => {
22+
if ((event.target as Element).tagName === "A") return;
2223
event.preventDefault();
23-
body.classList.toggle("animate", true);
2424

2525
if (!accordion.open || accordion.classList.contains("closing")) {
2626
accordion.classList.toggle("closing", false);
2727
body.style.setProperty("--height", "0px");
28+
body.classList.toggle("animate", true);
2829

2930
requestAnimationFrame(() => {
3031
accordion.open = true;
@@ -34,8 +35,12 @@ import "@styles/components/accordion.css"
3435
body.style.setProperty("--height", body.scrollHeight + "px");
3536

3637
requestAnimationFrame(() => {
37-
accordion.classList.toggle("closing", true);
38-
body.style.setProperty("--height", "0px");
38+
body.classList.toggle("animate", true);
39+
40+
requestAnimationFrame(() => {
41+
accordion.classList.toggle("closing", true);
42+
body.style.setProperty("--height", "0px");
43+
});
3944
});
4045
}
4146
});

‎src/components/Collapsible.astro

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
import Accordion from "./Accordion.astro"
3-
import collapsibleMarker from "@icons/collapsible-marker.svg?raw"
2+
import Accordion from "./Accordion.astro";
3+
import collapsibleMarker from "@icons/collapsible-marker.svg?raw";
44
55
interface Props {
6-
title: string
6+
title: string;
77
}
88
const { title } = Astro.props;
99
---

‎src/components/NavCollapsible.astro

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
import Accordion from "./Accordion.astro";
3+
import navMarker from "@icons/nav-marker.svg?raw";
4+
5+
interface Props {
6+
title: string;
7+
link: string;
8+
current?: boolean;
9+
}
10+
const { title, link, current } = Astro.props;
11+
---
12+
<Accordion class=`nav-component nav-collapsible ${current ? "nav-current" : ""}` {...(current ? { open: "" } : {})}>
13+
<div slot="header">
14+
<a class=`nav-link ${current ? "nav-current" : ""}` href={link}>{title}</a>
15+
<div class="nav-collapse-marker">
16+
<Fragment set:html={navMarker}/>
17+
</div>
18+
</div>
19+
<slot>
20+
</Accordion>

‎src/components/navigation/sidebars/Nav.astro

+12-19
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,24 @@
11
---
2-
import { generateTypeData } from "@config/io/generateTypeData";
3-
import { groupRoutes } from "@config/io/helpers";
4-
import NavComponent from "./nav";
5-
6-
const routes = await generateTypeData();
7-
const groupedRoutes = groupRoutes(routes);
2+
import SidebarWrapper from "./nav/SidebarWrapper.tsx";
3+
import RootNav from "./nav/RootNav.astro";
84
95
const url = Astro.url.pathname.split("/");
106
const currentRoute = url[2];
117
const currentModule = url[3];
128
const currentClass = url[4];
139
14-
const treeProps = {
15-
items: groupedRoutes,
16-
currentRoute: currentRoute,
17-
currentModule: currentModule,
18-
currentClass: currentClass,
19-
};
10+
export interface Props {
11+
mobile: boolean;
12+
}
2013
2114
const { mobile } = Astro.props;
2215
---
23-
2416
<aside class=`nav-wrapper${mobile ? "-mobile" : ""}`>
25-
<NavComponent
26-
routes={groupedRoutes}
27-
tree={treeProps}
28-
mobile={mobile}
29-
client:idle
30-
/>
17+
{ mobile ? (
18+
<SidebarWrapper client:load>
19+
<RootNav currentRoute={currentRoute} currentModule={currentModule} currentClass={currentClass}/>
20+
</SidebarWrapper>
21+
) : (
22+
<RootNav currentRoute={currentRoute} currentModule={currentModule} currentClass={currentClass}/>
23+
)}
3124
</aside>

‎src/components/navigation/sidebars/nav/Link.astro

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
interface Props {
3+
title: string;
4+
link: string;
5+
current?: boolean;
6+
}
7+
8+
const { title, link, current } = Astro.props;
9+
---
10+
<a class=`nav-component nav-item nav-link ${current ? "nav-current" : ""}` href={link}>{title}</a>

‎src/components/navigation/sidebars/nav/RootNav.astro

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
export interface Props {
3+
currentRoute: string;
4+
currentModule: string;
5+
currentClass: string;
6+
}
7+
8+
const { currentRoute, currentModule, currentClass } = Astro.props;
9+
10+
import { generateTypeData } from "@config/io/generateTypeData";
11+
import { groupRoutes } from "@config/io/helpers";
12+
import Tree from "./Tree.astro";
13+
14+
const routes = await generateTypeData();
15+
const groupedRoutes = groupRoutes(routes);
16+
17+
const configuration = {
18+
title: "Configuration",
19+
link: "/docs/configuration",
20+
current: currentRoute.startsWith("configuration"),
21+
entries: groupedRoutes.tutorials.configuration.map(
22+
({ name, type }) => ({
23+
title: name,
24+
link: `/docs/configuration/${type}`,
25+
current: currentModule === type,
26+
})
27+
),
28+
};
29+
30+
const types = {
31+
title: "Quickshell Types",
32+
link: "/docs/types",
33+
current: currentRoute.startsWith("types"),
34+
entries: Object.entries(groupedRoutes.types).map(
35+
([module, items]) => ({
36+
title: module,
37+
link: `/docs/types/${module}`,
38+
current: currentModule === module,
39+
entries: items.map(type => ({
40+
title: type.name,
41+
link: `/docs/types/${module}/${type.name}`,
42+
current: currentClass === type.name,
43+
})),
44+
})
45+
),
46+
};
47+
---
48+
<nav class="navtree">
49+
<Tree {...configuration}/>
50+
<Tree {...types}/>
51+
</nav>

‎src/components/navigation/sidebars/nav/index.tsx renamed to ‎src/components/navigation/sidebars/nav/SidebarWrapper.tsx

+9-26
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,25 @@ import {
44
onMount,
55
onCleanup,
66
type Component,
7+
type JSXElement,
78
} from "solid-js";
89

9-
import { LoadingSpinner, MenuToX, XToMenu } from "@icons";
10-
import { Tree } from "./Tree";
11-
import type { NavProps } from "../types";
10+
import { MenuToX, XToMenu } from "@icons";
1211

13-
const NavComponent: Component<NavProps> = props => {
12+
export interface SidebarContent {
13+
children: JSXElement;
14+
}
15+
16+
const NavComponent: Component<SidebarContent> = props => {
1417
const [open, setOpen] = createSignal<boolean>(false);
15-
const { tree, mobile, routes } = props;
18+
const { children } = props;
1619
let navRef: HTMLDivElement;
1720

18-
if (!tree) {
19-
return <LoadingSpinner />;
20-
}
21-
2221
function toggle(e: MouseEvent) {
2322
e.preventDefault();
2423
setOpen(!open());
2524
}
2625

27-
if (!mobile) {
28-
return (
29-
<Tree
30-
currentRoute={tree.currentRoute}
31-
currentModule={tree.currentModule || null}
32-
currentClass={tree.currentClass || null}
33-
items={routes}
34-
/>
35-
);
36-
}
37-
3826
const handleClickOutside = (event: MouseEvent) => {
3927
const isLink = "href" in (event.target || {});
4028
const isInBody = document.body.contains(event.target as Node);
@@ -78,12 +66,7 @@ const NavComponent: Component<NavProps> = props => {
7866
id={open() ? "#qs_search" : ""}
7967
class={`nav-items ${open() ? "shown" : ""}`}
8068
>
81-
<Tree
82-
currentRoute={tree.currentRoute}
83-
currentModule={tree.currentModule}
84-
currentClass={tree.currentClass}
85-
items={routes}
86-
/>
69+
{children}
8770
</div>
8871
</div>
8972
);

‎src/components/navigation/sidebars/nav/Tree.astro

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
import NavCollapsible from "@components/NavCollapsible.astro";
3+
import Self from "./Tree.astro";
4+
import Link from "./Link.astro";
5+
6+
interface TreeEntry {
7+
title: string;
8+
link: string;
9+
current?: boolean;
10+
entries?: TreeEntry[];
11+
}
12+
13+
interface Props extends TreeEntry {}
14+
15+
const { title, link, entries, current } = Astro.props;
16+
---
17+
<NavCollapsible title={title} link={link} current={current ?? false}>
18+
{entries?.map(entry => entry.entries ? (
19+
<Self {...entry}/>
20+
) : (
21+
<Link title={entry.title} link={entry.link} current={entry.current}/>
22+
))}
23+
</NavCollapsible>

0 commit comments

Comments
 (0)