Added subnavbar.

Pages/Bits/Navbar.php

@@ -16,7 +16,7 @@ $NavbarPages = [
             href="<?= htmlspecialchars($NavbarHref, ENT_QUOTES, "UTF-8") ?>"
             aria-label="<?= htmlspecialchars($NavbarPage, ENT_QUOTES, "UTF-8") ?>"
             title="<?= htmlspecialchars($NavbarPage, ENT_QUOTES, "UTF-8") ?>"
-            <?= ($PageTitle ?? "") === $NavbarPage ? 'aria-current="page"' : "" ?>
+            <?= ($PageSection ?? $PageTitle ?? "") === $NavbarPage ? 'aria-current="page"' : "" ?>
         >
             <img
                 class="NavbarIcon"

Pages/Bits/SubNavbar.php

@@ -0,0 +1,39 @@
+<?php
+
+$SubNavbarItems ??= [];
+
+if (count($SubNavbarItems) === 0) {
+    return;
+}
+
+$SubNavbarCurrent ??= null;
+
+?>
+
+<nav
+    class="SubNavbar"
+    aria-label="Secondary navigation"
+>
+    <?php foreach (
+        $SubNavbarItems
+        as $SubNavbarName => $SubNavbarHref
+    ): ?>
+        <a
+            class="SubNavbarLink"
+            href="<?= htmlspecialchars(
+                $SubNavbarHref,
+                ENT_QUOTES,
+                "UTF-8"
+            ) ?>"
+            <?= $SubNavbarCurrent === $SubNavbarName
+                ? 'aria-current="page"'
+                : "" ?>
+        >
+            <?= htmlspecialchars(
+                $SubNavbarName,
+                ENT_QUOTES,
+                "UTF-8"
+            ) ?>
+        </a>
+    <?php endforeach; ?>
+</nav>

Pages/Garden.php

@@ -2,6 +2,15 @@
 
 $PageTitle = "Garden";
 
+$SubNavbarItems = [
+    "Plots" => "#Plots",
+    "Seeds" => "#Seeds",
+    "Player" => "#Player",
+    "Leaderboard" => "#Leaderboard"
+];
+
+$SubNavbarCurrent = "Plots";
+
 ?>
 
 <!DOCTYPE html>
@@ -11,6 +20,7 @@ $PageTitle = "Garden";
 
     <body>
         <?php require __DIR__ . "/Bits/Navbar.php"; ?>
+        <?php require __DIR__ . "/Bits/SubNavbar.php"; ?>
 
         <main class="MainContainer">
             <h1>Garden</h1>
@@ -21,7 +31,7 @@ $PageTitle = "Garden";
             </div>
 
             <div class="GardenLayout">
-                <section>
+                <section id="Plots">
                     <h2>Plots</h2>
 
                     <div
@@ -30,7 +40,10 @@ $PageTitle = "Garden";
                     ></div>
                 </section>
 
-                <section class="SeedPanel">
+                <section
+                    id="Seeds"
+                    class="SeedPanel"
+                >
                     <h2>Seeds</h2>
 
                     <div
@@ -44,7 +57,10 @@ $PageTitle = "Garden";
                 Select a seed, then choose an empty plot.
             </p>
 
-            <section class="GardenUser">
+            <section
+                id="Player"
+                class="GardenUser"
+            >
                 <h2>Player</h2>
 
                 <p>
@@ -76,7 +92,10 @@ $PageTitle = "Garden";
                 </form>
             </section>
 
-            <section class="Leaderboard">
+            <section
+                id="Leaderboard"
+                class="Leaderboard"
+            >
                 <h2>Leaderboard</h2>
 
                 <div class="LeaderboardTableContainer">
@@ -103,6 +122,7 @@ $PageTitle = "Garden";
             </section>
         </main>
 
+        <script src="/Scripts/SubNavbar.js"></script>
         <script src="/Scripts/Garden/PlantImages.js"></script>
         <script src="/Scripts/Garden/Plants.js"></script>
         <script src="/Scripts/Garden/Mutations.js"></script>

Pages/Home.php

@@ -2,6 +2,14 @@
 
 $PageTitle = "Home";
 
+$SubNavbarItems = [
+    "Welcome" => "#Welcome",
+    "About me" => "#AboutMe",
+    "Credits" => "#Credits"
+];
+
+$SubNavbarCurrent = "Welcome";
+
 ?>
 
 <!DOCTYPE html>
@@ -11,9 +19,10 @@ $PageTitle = "Home";
 
     <body>
         <?php require __DIR__ . "/Bits/Navbar.php"; ?>
+        <?php require __DIR__ . "/Bits/SubNavbar.php"; ?>
 
         <main class="MainContainer">
-            <h1>Welcome</h1>
+            <h1 id="Welcome">Welcome</h1>
 
             <p>
                 You've arrived at Sarahtonin's homepage.
@@ -26,7 +35,7 @@ $PageTitle = "Home";
                 </b>
             </p>
 
-            <h2>About me</h2>
+            <h2 id="AboutMe">About me</h2>
 
             <p>
                 I'm Sarahtonin. The creator of this very website.
@@ -43,7 +52,7 @@ $PageTitle = "Home";
                 <a href="/Pages/Sarahtonin.html">page</a> about me.
             </p>
 
-            <h3>Credits</h3>
+            <h3 id="Credits">Credits</h3>
 
             <ul>
                 <li>
@@ -62,6 +71,7 @@ $PageTitle = "Home";
             </ul>
         </main>
 
+        <script src="/Scripts/SubNavbar.js"></script>
         <script src="/Scripts/Script.js"></script>
     </body>
 </html>

Pages/Profile.php

@@ -2,6 +2,15 @@
 
 $PageTitle = "Profile";
 
+$SubNavbarItems = [
+    "Player" => "#Player",
+    "Statistics" => "#Statistics",
+    "Account" => "#Account",
+    "Import" => "#Import"
+];
+
+$SubNavbarCurrent = "Player";
+
 ?>
 
 <!DOCTYPE html>
@@ -11,6 +20,7 @@ $PageTitle = "Profile";
 
     <body>
         <?php require __DIR__ . "/Bits/Navbar.php"; ?>
+        <?php require __DIR__ . "/Bits/SubNavbar.php"; ?>
 
         <main class="MainContainer">
             <h1>Profile</h1>
@@ -22,7 +32,10 @@ $PageTitle = "Profile";
             </p>
 
 
-            <section class="ProfileSection">
+            <section
+                id="Player"
+                class="ProfileSection"
+            >
                 <h2>Player</h2>
 
                 <form id="ProfileUsernameForm">
@@ -56,7 +69,10 @@ $PageTitle = "Profile";
             </section>
 
 
-            <section class="ProfileSection">
+            <section
+                id="Statistics"
+                class="ProfileSection"
+            >
                 <h3>Statistics</h3>
 
                 <div class="ProfileStatistics">
@@ -113,7 +129,10 @@ $PageTitle = "Profile";
             </section>
 
 
-            <section class="ProfileSection">
+            <section
+                id="Account"
+                class="ProfileSection"
+            >
                 <h2>Account</h2>
 
                 <p>
@@ -177,7 +196,10 @@ $PageTitle = "Profile";
             </section>
 
 
-            <section class="ProfileSection">
+            <section
+                id="Import"
+                class="ProfileSection"
+            >
                 <h3>Import Account</h3>
 
                 <p>
@@ -238,6 +260,7 @@ $PageTitle = "Profile";
         </main>
 
 
+        <script src="/Scripts/SubNavbar.js"></script>
         <script src="/Scripts/Garden/Save.js"></script>
         <script src="/Scripts/Garden/Users.js"></script>
         <script src="/Scripts/Garden/Profile.js"></script>

Pages/Sarahtonin.php

@@ -2,6 +2,16 @@
 
 $PageTitle = "Sarahtonin";
 
+$SubNavbarItems = [
+    "About" => "#About",
+    "Skills" => "#Skills",
+    "Who I am" => "#WhoIAm",
+    "Socials" => "#Socials",
+    "Misc info" => "#MiscInfo"
+];
+
+$SubNavbarCurrent = "About";
+
 ?>
 
 <!DOCTYPE html>
@@ -11,9 +21,10 @@ $PageTitle = "Sarahtonin";
 
     <body>
         <?php require __DIR__ . "/Bits/Navbar.php"; ?>
+        <?php require __DIR__ . "/Bits/SubNavbar.php"; ?>
 
         <main class="MainContainer">
-            <h1>About me</h1>
+            <h1 id="About">About me</h1>
 
             <p>
                 I'm Sarah, also known as Sarahtonin.
@@ -26,7 +37,7 @@ $PageTitle = "Sarahtonin";
                 Linux, and generally messing around with technology until it does what I want.
             </p>
 
-            <h2>Skills</h2>
+            <h2 id="Skills">Skills</h2>
 
             <p>
                 I work in IT, so I've learned a lot of different stuff in my time.
@@ -50,7 +61,7 @@ $PageTitle = "Sarahtonin";
                 "Quality over quantity" describes my preferences pretty well.
             </p>
 
-            <h2>Who I am</h2>
+            <h2 id="WhoIAm">Who I am</h2>
 
             <p>
                 I'm Norwegian, my pronouns are she/her,
@@ -62,7 +73,7 @@ $PageTitle = "Sarahtonin";
                 I'm also asexual, lesbian, and trans. It's quite queer..
             </p>
 
-            <h3>Socials</h3>
+            <h3 id="Socials">Socials</h3>
 
             <p>
                 My username tends to be either <strong>Sarahtonin</strong>
@@ -70,7 +81,7 @@ $PageTitle = "Sarahtonin";
                 I'm named that on Steam, YouTube, and Discord.
             </p>
 
-            <h3>Misc info</h3>
+            <h3 id="MiscInfo">Misc info</h3>
 
             <ul>
                 <li>Birthday: 27 November 2008</li>
@@ -80,6 +91,7 @@ $PageTitle = "Sarahtonin";
             </ul>
         </main>
 
+        <script src="/Scripts/SubNavbar.js"></script>
         <script src="/Scripts/Script.js"></script>
     </body>
 </html>

Scripts/SubNavbar.js

@@ -0,0 +1,93 @@
+function StartSubNavbar() {
+    const SubNavbar =
+        document.querySelector(
+            ".SubNavbar"
+        );
+
+    if (SubNavbar === null) {
+        return;
+    }
+
+    const Links = [
+        ...SubNavbar.querySelectorAll(
+            ".SubNavbarLink"
+        )
+    ];
+
+    const AnchorLinks =
+        Links.filter(
+            Link =>
+                Link.getAttribute(
+                    "href"
+                )?.startsWith("#")
+        );
+
+
+    function SetCurrentLink(
+        CurrentLink
+    ) {
+        for (
+            const Link
+            of AnchorLinks
+        ) {
+            Link.removeAttribute(
+                "aria-current"
+            );
+        }
+
+        if (CurrentLink !== null) {
+            CurrentLink.setAttribute(
+                "aria-current",
+                "location"
+            );
+        }
+    }
+
+
+    function UpdateFromHash() {
+        if (location.hash === "") {
+            return;
+        }
+
+        const CurrentLink =
+            AnchorLinks.find(
+                Link =>
+                    Link.getAttribute(
+                        "href"
+                    ) === location.hash
+            ) ?? null;
+
+        SetCurrentLink(
+            CurrentLink
+        );
+    }
+
+
+    for (
+        const Link
+        of AnchorLinks
+    ) {
+        Link.addEventListener(
+            "click",
+            () => {
+                SetCurrentLink(
+                    Link
+                );
+            }
+        );
+    }
+
+
+    window.addEventListener(
+        "hashchange",
+        UpdateFromHash
+    );
+
+    UpdateFromHash();
+}
+
+
+document.addEventListener(
+    "DOMContentLoaded",
+    StartSubNavbar
+);

Styles/Style.css

@@ -49,7 +49,7 @@ body {
     padding: 2rem;
 
     display: grid;
-    grid-template-columns: minmax(0, 800px) auto;
+    grid-template-columns: minmax(0, 800px) auto auto;
     justify-content: center;
     align-items: start;
     gap: 1rem;
@@ -270,6 +270,73 @@ select {
     image-rendering: auto;
 }
 
+.SubNavbar {
+    grid-column: 3;
+    grid-row: 1;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    padding: 0.5rem;
+
+    position: sticky;
+    top: 2rem;
+    align-self: start;
+
+    background-color: var(--Base);
+    border: 4px solid var(--Mauve);
+}
+
+.SubNavbarLink {
+    display: block;
+
+    padding: 0.65rem 0.8rem;
+
+    color: var(--Text);
+    background-color: var(--Mantle);
+
+    text-decoration: none;
+    white-space: nowrap;
+
+    border: 3px solid var(--Surface2);
+
+    box-shadow:
+        3px 3px 0
+        var(--Crust);
+}
+
+.SubNavbarLink:hover {
+    color: var(--Sky);
+    background-color: var(--Surface0);
+
+    border-color: var(--Sky);
+
+    transform: translate(
+        1px,
+        1px
+    );
+
+    box-shadow:
+        2px 2px 0
+        var(--Crust);
+}
+
+.SubNavbarLink:focus-visible {
+    outline:
+        3px solid
+        var(--Yellow);
+
+    outline-offset: 3px;
+}
+
+.SubNavbarLink[aria-current] {
+    color: var(--Green);
+    background-color: var(--Surface1);
+
+    border-color: var(--Green);
+}
+
 .GardenStatus {
     margin-bottom: 1.5rem;
     padding: 0.75rem 1rem;
@@ -900,9 +967,24 @@ select {
         height: 3.5rem;
     }
 
-    .MainContainer {
+    .SubNavbar {
         grid-column: 1;
         grid-row: 2;
+
+        flex-direction: row;
+        width: 100%;
+
+        position: static;
+        overflow-x: auto;
+    }
+
+    .SubNavbarLink {
+        flex: 0 0 auto;
+    }
+
+    .MainContainer {
+        grid-column: 1;
+        grid-row: 3;
     }
 
     .GardenLayout {