fix section saving

src/components/Section.astro

@@ -2,13 +2,14 @@
 import { slugify } from "../utils";
 interface Props {
   title: string;
+  isMain?: boolean;
   hasBorder?: boolean;
 }
 
-const { title, hasBorder } = Astro.props;
+const { title, hasBorder, isMain } = Astro.props;
 ---
 
-<astro-section id={slugify(title)} class="group">
+<astro-section id={slugify(title)} data-isMain={isMain} class="group">
   <abbr title="Press to open">
     <h2
       class="text-lg md:text-xl text-white lowercase transition-colors opacity-60 hover:text-secondary hover:cursor-pointer hover:opacity-80 group-[.open]:text-secondary group-[.open]:underline group-[.open]:opacity-100"
@@ -29,6 +30,7 @@ const { title, hasBorder } = Astro.props;
 <script>
   class Section extends HTMLElement {
     container: HTMLElement;
+    isMain: boolean;
 
     constructor() {
       super();
@@ -39,6 +41,7 @@ const { title, hasBorder } = Astro.props;
       }
 
       this.container = container;
+      this.isMain = this.dataset.hasOwnProperty("ismain");
 
       const trigger = this.querySelector("h2");
 
@@ -71,15 +74,19 @@ const { title, hasBorder } = Astro.props;
     extend(section: Element, container: HTMLElement) {
       container.style.maxHeight = "1000vh";
       section.classList.add("open");
+      if (this.isMain) {
         sessionStorage.setItem("openSection", this.id);
       }
+    }
 
     collapse(section: Element, container: HTMLElement) {
       container.style.maxHeight = "0";
       section.classList.remove("open");
+      if (this.isMain) {
         sessionStorage.removeItem("openSection");
       }
     }
+  }
 
   customElements.define("astro-section", Section);
 </script>

src/pages/index.astro

@@ -25,7 +25,7 @@ import { projects } from "../projects";
       $ Zvonimir Rudinski / Home
     </h1>
 
-    <Section title="About" hasBorder>
+    <Section title="About" isMain hasBorder>
       <p class="font-pt-sans font-bold">
         Looking for a fully commited developer who can digitalize your business?
       </p>
@@ -48,7 +48,7 @@ import { projects } from "../projects";
       </p>
     </Section>
 
-    <Section title="Projects" hasBorder>
+    <Section title="Projects" isMain hasBorder>
       <p class="font-pt-sans">
         Here are some of the projects I have worked on. You can find more
         information about a project by clicking on its name.
@@ -75,7 +75,7 @@ import { projects } from "../projects";
       >blog</a
     >
 
-    <Section title="Contact">
+    <Section title="Contact" isMain>
       <div class="flex gap-4 mt-4">
         <abbr title="Send me an email">
           <a