zvonimir/website
1
0
Fork 0
Code Pull Requests Actions Wiki Activity

fix section saving

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Section.astro
View File

@@ -2,13 +2,14 @@
import { slugify } from "../utils"; import { slugify } from "../utils";
interface Props { interface Props {
title: string; title: string;
isMain?: boolean;
hasBorder?: 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"> <abbr title="Press to open">
<h2 <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" 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> <script>
class Section extends HTMLElement { class Section extends HTMLElement {
container: HTMLElement; container: HTMLElement;
isMain: boolean;
constructor() { constructor() {
super(); super();
@@ -39,6 +41,7 @@ const { title, hasBorder } = Astro.props;
} }
this.container = container; this.container = container;
this.isMain = this.dataset.hasOwnProperty("ismain");
const trigger = this.querySelector("h2"); const trigger = this.querySelector("h2");
@@ -71,13 +74,17 @@ const { title, hasBorder } = Astro.props;
extend(section: Element, container: HTMLElement) { extend(section: Element, container: HTMLElement) {
container.style.maxHeight = "1000vh"; container.style.maxHeight = "1000vh";
section.classList.add("open"); section.classList.add("open");
sessionStorage.setItem("openSection", this.id); if (this.isMain) {
sessionStorage.setItem("openSection", this.id);
}
} }
collapse(section: Element, container: HTMLElement) { collapse(section: Element, container: HTMLElement) {
container.style.maxHeight = "0"; container.style.maxHeight = "0";
section.classList.remove("open"); section.classList.remove("open");
sessionStorage.removeItem("openSection"); if (this.isMain) {
sessionStorage.removeItem("openSection");
}
} }
} }

6
src/pages/index.astro
View File

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