Wiki aside slides in/out
This commit is contained in:
parent
05dd90ec80
commit
ed7c62fdf1
|
@ -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>
|
Before Width: | Height: | Size: 524 B After Width: | Height: | Size: 416 B |
1
public/static/svg/double-arrow.svg
Normal file
1
public/static/svg/double-arrow.svg
Normal file
|
@ -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>
|
After Width: | Height: | Size: 200 B |
|
@ -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()}
|
||||
|
||||
|
||||
|
|
|
@ -24,13 +24,13 @@ const { heading, pages, headings } = Astro.props;
|
|||
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>
|
||||
|
|
|
@ -39,7 +39,18 @@ const pages = (await constructTree(Astro.props.tree))
|
|||
|
||||
<Base>
|
||||
<main class="wiki-main">
|
||||
<!-- 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 />
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue