From ed7c62fdf14e79fcf9c9b13f381ae32fe30fd256 Mon Sep 17 00:00:00 2001 From: Maciej Jur Date: Thu, 8 Jun 2023 16:05:12 +0200 Subject: [PATCH] Wiki aside slides in/out --- public/static/svg/change.svg | 2 +- public/static/svg/double-arrow.svg | 1 + src/components/tree/Pages.astro | 4 +- src/components/tree/Tree.astro | 15 +++++-- src/layouts/Wiki.astro | 13 +++++- src/styles/components/_link-tree.scss | 13 ++++-- src/styles/layouts/_wiki.scss | 63 +++++++++++++++++++++++++-- 7 files changed, 95 insertions(+), 16 deletions(-) create mode 100644 public/static/svg/double-arrow.svg diff --git a/public/static/svg/change.svg b/public/static/svg/change.svg index 7756752..6cd9e4e 100644 --- a/public/static/svg/change.svg +++ b/public/static/svg/change.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/static/svg/double-arrow.svg b/public/static/svg/double-arrow.svg new file mode 100644 index 0000000..86a3d30 --- /dev/null +++ b/public/static/svg/double-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/tree/Pages.astro b/src/components/tree/Pages.astro index f41b7ce..df829e7 100644 --- a/src/components/tree/Pages.astro +++ b/src/components/tree/Pages.astro @@ -40,7 +40,7 @@ function checkCurrent(checked: Maybe) { {page.slug .chain(slug => prefix.map(prefix => pathify(prefix, slug))) .map(href => (page.current) - ? + ? : {page.title} ) .orDefault({page.title})} @@ -49,5 +49,3 @@ function checkCurrent(checked: Maybe) { )} ).extract()} - - diff --git a/src/components/tree/Tree.astro b/src/components/tree/Tree.astro index c7d458b..7201467 100644 --- a/src/components/tree/Tree.astro +++ b/src/components/tree/Tree.astro @@ -19,18 +19,18 @@ const { heading, pages, headings } = Astro.props;
-

- Herein + Content

diff --git a/src/layouts/Wiki.astro b/src/layouts/Wiki.astro index b6c8ddb..e438e14 100644 --- a/src/layouts/Wiki.astro +++ b/src/layouts/Wiki.astro @@ -39,7 +39,18 @@ const pages = (await constructTree(Astro.props.tree))
- + + + + +

{frontmatter?.title}

diff --git a/src/styles/components/_link-tree.scss b/src/styles/components/_link-tree.scss index 7cbbb4c..a6cb7af 100644 --- a/src/styles/components/_link-tree.scss +++ b/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; } } - diff --git a/src/styles/layouts/_wiki.scss b/src/styles/layouts/_wiki.scss index 15ae307..ed7f7c6 100644 --- a/src/styles/layouts/_wiki.scss +++ b/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; + } + } + } +}