fix section saving

This commit is contained in:
Zvonimir Rudinski
2024-07-07 07:12:58 +02:00
parent da8202208d
commit cdab7b77db
2 changed files with 14 additions and 7 deletions

View File

@@ -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,13 +74,17 @@ const { title, hasBorder } = Astro.props;
extend(section: Element, container: HTMLElement) {
container.style.maxHeight = "1000vh";
section.classList.add("open");
sessionStorage.setItem("openSection", this.id);
if (this.isMain) {
sessionStorage.setItem("openSection", this.id);
}
}
collapse(section: Element, container: HTMLElement) {
container.style.maxHeight = "0";
section.classList.remove("open");
sessionStorage.removeItem("openSection");
if (this.isMain) {
sessionStorage.removeItem("openSection");
}
}
}

View File

@@ -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