refactor nav files + tiny css fixes

src/components/navigation/sidebars/nav/NavCollapsible.astro

@@ -0,0 +1,20 @@
+---
+import Accordion from "@components/Accordion.astro";
+import navMarker from "@icons/nav-marker.svg?raw";
+
+interface Props {
+  title: string;
+  link: string;
+  current?: boolean;
+}
+const { title, link, current } = Astro.props;
+---
+<Accordion class=`nav-component nav-collapsible ${current ? "nav-current" : ""}` {...(current ? { open: "" } : {})}>
+  <div slot="header">
+    <a class=`nav-link ${current ? "nav-current" : ""}` href={link}>{title}</a>
+    <div class="nav-collapse-marker">
+      <Fragment set:html={navMarker}/>
+    </div>
+  </div>
+  <slot>
+</Accordion>

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

@@ -1,5 +1,5 @@
 ---
-import NavCollapsible from "@components/NavCollapsible.astro";
+import NavCollapsible from "./NavCollapsible.astro";
 import Self from "./Tree.astro";
 import Link from "./Link.astro";
 

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

@@ -0,0 +1,24 @@
+---
+import SidebarWrapper from "./SidebarWrapper.tsx";
+import RootNav from "./RootNav.astro";
+
+const url = Astro.url.pathname.split("/");
+const currentRoute = url[2];
+const currentModule = url[3];
+const currentClass = url[4];
+
+export interface Props {
+  mobile: boolean;
+}
+
+const { mobile } = Astro.props;
+---
+<aside class=`nav-wrapper${mobile ? "-mobile" : ""}`>
+  { mobile ? (
+    <SidebarWrapper client:load>
+      <RootNav currentRoute={currentRoute} currentModule={currentModule} currentClass={currentClass}/>
+    </SidebarWrapper>
+  ) : (
+    <RootNav currentRoute={currentRoute} currentModule={currentModule} currentClass={currentClass}/>
+  )}
+</aside>