auto-open the saved open section

src/components/Section.astro

@@ -71,11 +71,13 @@ const { title, hasBorder } = Astro.props;
     extend(section: Element, container: HTMLElement) {
       container.style.maxHeight = "1000vh";
       section.classList.add("open");
+      sessionStorage.setItem("openSection", this.id);
     }
 
     collapse(section: Element, container: HTMLElement) {
       container.style.maxHeight = "0";
       section.classList.remove("open");
+      sessionStorage.removeItem("openSection");
     }
   }
 

src/pages/index.astro

@@ -111,5 +111,21 @@ import { projects } from "../projects";
     <footer class="mt-12">
       <p class="text-secondary text-center">&copy; 2024 Zvonimir Rudinski</p>
     </footer>
+
+    <script>
+      function onMount() {
+        const openSection = sessionStorage.getItem("openSection");
+        if (!openSection) return;
+        const section = document.querySelector<HTMLElement>(
+          `#${openSection} > abbr > h2`
+        );
+
+        if (!section) return;
+
+        section.click();
+      }
+
+      window.addEventListener("DOMContentLoaded", onMount);
+    </script>
   </body>
 </html>