continued working on sidebar

src/layouts/DocsLayout.astro

@@ -1,11 +1,13 @@
 ---
 const { frontmatter } = Astro.props;
 import Layout from "../layouts/Layout.astro";
-const title = frontmatter.title + "| Docs";
+import { Icon } from "astro-icon/components";
+import "../styles/sidebar.scss";
+const title = frontmatter.title + " | Docs";
 const unsortedDocs = await Astro.glob("../pages/docs/*/*.mdx");
-const docs = unsortedDocs
-  .sort((a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date))
-  .filter((doc) => doc.frontmatter.repo === frontmatter.repo);
+const docs = unsortedDocs.sort((a, b) =>
+  a.url === "/docs/" + a.frontmatter.repo ? -1 : 1
+);
 ---
 
 <Layout
@@ -13,15 +15,24 @@ const docs = unsortedDocs
   description="This is my personal website with my projects, docs and other useful stuff."
 >
   <div class="sidebar">
-    <a href={"/docs/" + frontmatter.repo}>Home</a><br />
-    {
-      docs.map((page) => (
-        <>
-          <a href={page.url}>{page.frontmatter.title}</a>
-          <br />
-        </>
-      ))
-    }
+    <input type="checkbox" class="sidebar" />
+    <div class="sidebar" style="display: unset;">
+      {
+        docs.map((page) => {
+          const isActive =
+            (Astro.url.pathname.startsWith(page.url) &&
+              page.url !== "/docs/" + page.frontmatter.repo) ||
+            Astro.url.pathname === page.url;
+          return (
+            <a href={page.url} class={isActive ? "active" : ""}>
+              <Icon name="mdi:file-outline" />
+              {page.frontmatter.title} <br />
+            </a>
+          );
+        })
+      }
+    </div>
+    <Icon size={22} name="mdi:chevron-left-circle" />
   </div>
   <div class="content">
     <a href={"https://github.com/vaporvee/" + frontmatter.repo} target="_blank"

src/pages/docs/discord-sdk-godot/index.mdx

@@ -2,7 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 repo: discord-sdk-godot
 has_thumbnail: true
-title: Discord SDK plugin for Godot
+title: Home
 subtitle: Discord Game SDK support for GDScript in Godot Engine 4.2. with the easiest code pattern!
 features: |
  - Activities (Make people see what you are playing)

src/styles/main.scss

@@ -88,4 +88,8 @@ h3 {
         color: white;
         text-decoration: none;
     }
+}
+
+svg{
+    margin-bottom: -1.5%;
 }

src/styles/navbar.scss

@@ -1,3 +1,5 @@
+
+@import './_var.scss';
 header {
     padding-top: 2.5vh;
     padding-bottom: 2.5vh;
@@ -30,7 +32,7 @@ header {
 
             .active {
                 font-family: "Satoshi-Bold";
-                color: #7eca9c;
+                color: $accent;
             }
 
             .highlighter {

src/styles/sidebar.scss

@@ -0,0 +1,38 @@
+@import "./_var.scss";
+.sidebar {
+  display: flex;
+  justify-content: space-evenly;
+  .sidebar-entries {
+    opacity: 1;
+  }
+  a {
+    color: white;
+    text-decoration: none;
+  }
+  .active {
+    color: $accent;
+  }
+
+  rotate: 0deg;
+  svg {
+    transition: 0.3s ease-in-out;
+    rotate: 0deg;
+  }
+  &:checked ~ {
+    svg {
+      rotate: 180deg;
+    }
+    div {
+      //only works when the checkbox is on the correct line in the astro file
+      margin-left: -330%;
+    }
+  }
+
+  &[type="checkbox"] {
+    position: absolute;
+    transform: scale(2);
+    z-index: 2;
+    &:checked {
+    }
+  }
+}