add overview for tutorials

Author: Efnilite

src/components/docs/Doc.astro

@@ -73,6 +73,17 @@ function color(): string {
             <DocsFiche text={docType.type} color={color()}/>
             {[docType.deprecated].filter(x => x).map(x => <DocsFiche text="Deprecated" color="520f0f"/>)}
             {[docType.cancellable].filter(x => x).map(x => <DocsFiche text="Cancellable" color="112998"/>)}
+            {[docType.requirements?.join("")].filter(x => x).map(x => {
+                x = x?.replaceAll(/[.+0-9]/g, "")?.trim();
+
+                if (x?.toLowerCase() === "paper") {
+                    return <DocsFiche text="Paper" color="7d037f"/>;
+                } else if (x?.toLowerCase().includes("paper")) {
+                    return <DocsFiche text="Partially Paper" color="7d037f"/>;
+                } else {
+                    return null;
+                }
+            })}
 
             <div class="id flex-auto relative -top-37" id={docType.id}></div> <!-- Anchor all the way up or else its in the nav bar -->
             <button class="share">

src/components/tutorials/TutorialsOverview.astro

@@ -13,25 +13,55 @@ const { selected, tutorials }: Props = Astro.props;
     // Update position of filters to be below the nav bar,
     // since filters is sticky this cant be done directly
     document.getElementById("tutorials")!!.style.top = `${document.getElementById("nav")!!.offsetHeight}px`;
+
+    const tutorials = document.getElementById("tutorials-expand-area")!!;
+    const expand = document.getElementById("tutorials-expand-button")!!;
+    const expandIcon = document.getElementById("tutorials-overview-expand-icon")!!; 
+    expand.addEventListener("click", () => {
+        tutorials.classList.toggle("hidden");
+        tutorials.classList.toggle("flex");
+        expandIcon.querySelector("svg")!!.classList.toggle("rotate-90");
+    });
+
+    function updatePosition() {
+        // Update position of filters to be below the nav bar,
+        // since filters is sticky this cant be done directly
+        tutorials.style.top = `${document.getElementById("nav")!!.offsetHeight}px`;   
+    }
+
+    window.addEventListener("DOMContentLoaded", updatePosition);
+    window.addEventListener("resize", updatePosition);
 </script>
 
-<div id="tutorials" class="sticky top-30 left-0 w-full md:w-64 md:h-[100vh] overflow-y-hidden p-4
+<div id="tutorials" class="sticky top-[118px] left-0 w-full md:w-64 md:h-[100vh] overflow-y-hidden p-4
             flex flex-col gap-2 shrink-0
             border-b-2 md:border-b-0 md:border-r-2 border-l-border dark:border-d-border
             bg-l-bg dark:bg-d-bg">
-    {tutorials.map(x => {
-        if (x.title === selected) {
-            return <a href={`/tutorials/${x.id}`} class="text-left px-4 py-3 rounded-md 
-                bg-skript hover:cursor-pointer
-                font-bold text-white">
-                {x.title}
-            </a>
-        } else {
-            return <a href={`/tutorials/${x.id}`} class="text-left px-4 py-3 rounded-md 
-                bg-l-bg-secondary dark:bg-d-bg-secondary hover:cursor-pointer
-                font-bold">
-                {x.title}
-            </a>
-        }
-    })}
+    <div id="tutorials-expand-button" class="p-4 -m-4 flex flex-row gap-2 hover:cursor-pointer">
+        <h2 class="flex md:hidden">Overview</h2>
+        <div class="flex-auto"></div>
+        <button id="tutorials-overview-expand-icon" class="block md:hidden px-2 w-fit rounded-sm 
+            hover:cursor-pointer hover:opacity-80 transition">
+            <svg class="transition rotate-90" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.60627 10.8563L5.88752 8.1375C5.85002 8.1 5.82202 8.0595 5.80352 8.016C5.78502 7.9725 5.77552 7.9255 5.77502 7.875C5.77502 7.775 5.80952 7.6875 5.87852 7.6125C5.94752 7.5375 6.03802 7.5 6.15002 7.5H11.85C11.9625 7.5 12.0533 7.5375 12.1223 7.6125C12.1913 7.6875 12.2255 7.775 12.225 7.875C12.225 7.9 12.1875 7.9875 12.1125 8.1375L9.39377 10.8563C9.33127 10.9188 9.26877 10.9625 9.20627 10.9875C9.14377 11.0125 9.07502 11.025 9.00002 11.025C8.92502 11.025 8.85627 11.0125 8.79377 10.9875C8.73127 10.9625 8.66877 10.9188 8.60627 10.8563Z"/>
+                </svg>
+        </button>
+    </div>
+    <div id="tutorials-expand-area" class="hidden sm:flex flex-col gap-2">
+        {tutorials.map(x => {
+            if (x.title === selected) {
+                return <a href={`/tutorials/${x.id}`} class="text-left px-4 py-3 rounded-md 
+                    bg-skript hover:cursor-pointer
+                    font-bold text-white">
+                    {x.title}
+                </a>
+            } else {
+                return <a href={`/tutorials/${x.id}`} class="text-left px-4 py-3 rounded-md 
+                    bg-l-bg-secondary dark:bg-d-bg-secondary hover:cursor-pointer
+                    font-bold">
+                    {x.title}
+                </a>
+            }
+        })}
+    </div>
 </div>