Wiki aside slides in/out

public/static/svg/change.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M480-40q-112 0-216-66T100-257v137H40v-240h240v60H143q51 77 145.5 138.5T480-100q78 0 147.5-30t121-81.5Q800-263 830-332.5T860-480h60q0 91-34.5 171T791-169q-60 60-140 94.5T480-40ZM40-480q0-91 34.5-171T169-791q60-60 140-94.5T480-920q112 0 216 66t164 151v-137h60v240H680v-60h137q-51-77-145-138.5T480-860q-78 0-147.5 30t-121 81.5Q160-697 130-627.5T100-480H40Zm440 175-54-121-121-54 121-55 54-121 55 121 121 55-121 54-55 121Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M481-158q-131 0-225.5-94.5T161-478v-45l-80 80-39-39 149-149 149 149-39 39-80-80v45q0 107 76.5 183.5T481-218q29 0 55-5t49-15l43 43q-36 20-72.5 28.5T481-158Zm289-169L621-476l40-40 79 79v-41q0-107-76.5-183.5T480-738q-29 0-55 5.5T376-719l-43-43q36-20 72.5-28t74.5-8q131 0 225.5 94.5T800-478v43l80-80 39 39-149 149Z"/></svg>

public/static/svg/double-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m242-200 210-280-210-280h74l210 280-210 280h-74Zm252 0 210-280-210-280h74l210 280-210 280h-74Z"/></svg>

src/components/tree/Pages.astro

@@ -40,7 +40,7 @@ function checkCurrent(checked: Maybe<string>)  {
             {page.slug
               .chain(slug => prefix.map(prefix => pathify(prefix, slug)))
               .map(href => (page.current)
-                ? <button class="link-tree__nav-list-text current">{page.title}</button>
+                ? <button id="current-page-button" class="link-tree__nav-list-text current">{page.title}</button>
                 : <a class="link-tree__nav-list-text link" href={href}>{page.title}</a>
               )
               .orDefault(<span class="link-tree__nav-list-text">{page.title}</span>)}
@@ -49,5 +49,3 @@ function checkCurrent(checked: Maybe<string>)  {
       )}
     </ul>
 ).extract()}
-
-

src/components/tree/Tree.astro

@@ -19,18 +19,18 @@ const { heading, pages, headings } = Astro.props;
 <section class="link-tree">
   <!-- Nav mode switch -->
   <input id="link-tree-mode" type="checkbox" hidden />
-  <label id="link-tree-switch" class="link-tree__switch" 
+  <label id="link-tree-switch" class="link-tree__switch"
     for="link-tree-mode"
     role="button"
     tabindex="0"
     title="Switch navigation mode">
-    <img src="/static/svg/change.svg" alt="Switch navigation mode" width="24" height="24"/>
+    <img class="link-tree__icon" src="/static/svg/change.svg" alt="Switch navigation mode" width="24" height="24"/>
   </label>
 
   <!-- Primary view displaying current headings -->
   <div class="v-alt">
     <h2 class="link-tree__heading">
-      <span class="link-tree__heading-text">Herein</span>
+      <span class="link-tree__heading-text">Content</span>
     </h2>
     <nav class="link-tree__nav">
       <Headings headings={headings} />
@@ -61,5 +61,14 @@ const { heading, pages, headings } = Astro.props;
         button!.click();
       }
     })
+
+    const b2 = document.getElementById("current-page-button");
+    b2?.addEventListener("click", e => button?.click());
+    b2?.addEventListener("keypress", e => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        button!.click();
+      }
+    })
   </script>
 </section>

src/layouts/Wiki.astro

@@ -39,7 +39,18 @@ const pages = (await constructTree(Astro.props.tree))
 
 <Base>
   <main class="wiki-main">
-    <Tree heading="Personal Wiki" pages={pages} headings={headings} />
+    <!-- Slide in/out for mobile -->
+    <input id="wiki-aside-shown" type="checkbox" hidden/>
+
+    <aside class="wiki-aside">
+      <!-- Slide button -->
+      <label class="wiki-aside__slider" for="wiki-aside-shown">
+        <img class="wiki-icon" src="/static/svg/double-arrow.svg" width="24" height="24" />
+      </label>
+      <!-- Navigation tree -->
+      <Tree heading="Personal Wiki" pages={pages} headings={headings} />
+    </aside>
+
     <article class="wiki-article markdown">
       <h1>{frontmatter?.title}</h1>
       <slot />

src/styles/components/_link-tree.scss

@@ -1,16 +1,22 @@
 .link-tree {
   position: relative;
+  max-height: 100vh;
   padding: 1em;
-  overflow-y: auto;
+  overflow-y: scroll;
+
+  &__icon {
+    max-height: 1.5em;
+  }
 
   &__switch {
     position: absolute;
     top: 0.5em;
     left: 0.5em;
     cursor: pointer;
+    transition: transform ease-in-out 0.2s;
 
-    img {
-      max-height: 1.5em;
+    &:hover {
+      transform: rotate(180deg);
     }
   }
 
@@ -73,4 +79,3 @@
     display: none;
   }
 }
-

src/styles/layouts/_wiki.scss

@@ -1,17 +1,52 @@
 .wiki-main {
+  position: relative;
   display: grid;
-  grid-template-columns: 16em auto;
+  grid-template-columns: auto 1fr;
+
+  @media (min-width: 58rem) {
+    grid-template-columns: 16rem 1fr;
+  }
 
   @media (min-width: 80rem) {
-    grid-template-columns: 16em auto 16em;
+    grid-template-columns: 16rem 1fr 16rem;
+  }
+}
+
+.wiki-aside {
+  position: absolute;
+  width: 16rem;
+  height: 100%;
+  transition: margin-left linear 0.1s;
+  background-color: white;
+  box-shadow: var(--shadow-m);
+  z-index: 5;
+
+  @media (min-width: 58rem) {
+    position: static;
+    background-color: unset;
+    box-shadow: unset;
   }
 
   .link-tree {
     position: sticky;
     top: 0;
-    height: fit-content;
-    max-height: 100vh;
   }
+
+  &__slider {
+    position: absolute;
+    top: 0.5em;
+    right: -2em;
+    cursor: pointer;
+
+    @media (min-width: 58rem) {
+      display: none;
+    }
+  }
+}
+
+.wiki-icon {
+  max-height: 1.5em;
+  max-width: 1.5em;
 }
 
 .wiki-article {
@@ -21,3 +56,23 @@
     margin-inline: 2em;
   }
 }
+
+#wiki-aside-shown {
+  &:checked {
+    ~ .wiki-aside {
+      > .wiki-aside__slider {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &:not(:checked) {
+    ~ .wiki-aside {
+      margin-left: -16rem;
+
+      @media (min-width: 58rem) {
+        margin-left: unset;
+      }
+    }
+  }
+}