Make current chapter a non-link in header, and scroll to it when it is not on screen

components/Header.tsx

@@ -9,6 +9,7 @@ interface BaseHeaderProps extends Props {
         href: string;
         element?: any;
     }[];
+    currentHref: string;
 }
 
 export default (props: BaseHeaderProps) => (
@@ -17,8 +18,10 @@ export default (props: BaseHeaderProps) => (
             .map((entry) =>
                 entry.element ? (
                     entry.element
-                ) : (
+                ) : entry.href !== props.currentHref ? (
                     <a href={entry.href}>{entry.name}</a>
+                ) : (
+                    <p id="selected-header-element">{entry.name}</p>
                 )
             )
             .join("")}

css/index.scss

@@ -94,7 +94,7 @@ img {
     border-style: solid;
     border-width: 1px;
     border-color:#0f0f0f;
-    a {
+    a, p {
         &:first-child {
             margin-left: 0.5em;
         }
@@ -114,6 +114,9 @@ img {
         margin-right: 0.5em;
         width:fit-content;
     }
+    p {
+        color: black !important;
+    }
 }
 
 .vertical-line {

routes/story.tsx

@@ -7,6 +7,7 @@ import FourOhFour from "./404.tsx";
 import Script from "../components/Script.tsx";
 import StoryButtonScript from "../scripts/Story.ts";
 import StoryProgressSavingScript from "../scripts/StoryProgressSaving.ts";
+import ScrollHeader from "../scripts/ScrollHeader.ts";
 
 export default async (params: URLSearchParams) => {
     if (!params.get("id")) return <FourOhFour />;
@@ -17,8 +18,13 @@ export default async (params: URLSearchParams) => {
     if (params.get("chapter")) {
         await story.chapters[Number(params.get("chapter") as string)].init();
         return (
-            <Story story={story} stylepath="css/index.scss">
+            <Story
+                story={story}
+                stylepath="css/index.scss"
+                currentHref={"/story?" + params.toString()}
+            >
                 <Script function={StoryProgressSavingScript} />
+                <Script function={ScrollHeader} />
                 <div style="margin-left: 1em; margin-right: 1em;">
                     {
                         story.chapters[Number(params.get("chapter") as string)]
@@ -74,8 +80,13 @@ export default async (params: URLSearchParams) => {
     // metadata
     else {
         return (
-            <Story story={story} stylepath="css/index.scss">
+            <Story
+                story={story}
+                stylepath="css/index.scss"
+                currentHref={"/story?" + params.toString()}
+            >
                 <Script function={StoryButtonScript} />
+                <Script function={ScrollHeader} />
                 <div style="display:flex;align-items:center;justify-content:center;flex-direction:column;">
                     <div class="story">
                         <img id="storycover" src={story.storyJSON.cover} />

scripts/ScrollHeader.ts

@@ -0,0 +1,8 @@
+export default () => {
+    window.onload = () => {
+        document.getElementById("selected-header-element")?.scrollIntoView({
+            block: "center",
+            inline: "center",
+        });
+    };
+};

templates/Base.tsx

@@ -69,6 +69,7 @@ export default (props: PropsWithChildren<TemplateProps>) => (
                     href: "/search"
                 }
             ]}
+            currentHref=""
         ></Header>
         <div class="main">{props.children}</div>
     </html>

templates/Story.tsx

@@ -7,6 +7,7 @@ import VR from "../components/VerticalLine.tsx";
 
 interface StoryProps {
     story: Story;
+    currentHref: string;
     style?: string;
     stylepath?: string;
 }
@@ -87,7 +88,11 @@ export default (props: PropsWithChildren<StoryProps>) => {
                     return <style>{sass(props.style).to_string()}</style>;
                 })()}
             </head>
-            <Header id="storyHeader" entries={chaptersInHeader}></Header>
+            <Header
+                id="storyHeader"
+                entries={chaptersInHeader}
+                currentHref={props.currentHref}
+            ></Header>
             <div class="main">{props.children}</div>
         </html>
     );