Soper
/
hugo-book
forked from gitbot/hugo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

mobile toc menu (#121) 

* Implement TOC for mobile
* Uses Page title as label
* Label entries so that tapping TOC will hide menu
* Switch to medium breakpoint
* Correct tos -> toc
* toc-menu-control -> toc-control
soper-book
tyler71 2020-01-13 08:44:24 -08:00 committed by Alex Shpak
parent d6290dcf50
commit e037b7c70f
5 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/_main.scss
View File

@ -291,36 +291,42 @@ aside nav,
.book-page,
.markdown {
transition: 0.2s ease-in-out;
transition-property: transform, margin-left, opacity;
will-change: transform, margin-left;
transition-property: transform, margin, opacity;
will-change: transform, margin;
}
@media screen and (max-width: $md-breakpoint) {
.book-toc {
display: none;
}
}
@media screen and (max-width: $sm-breakpoint) {
.book-menu {
margin-left: -$menu-width;
font-size: $font-size-base;
}
.book-toc {
margin-right: -$toc-width;
font-size: $font-size-base;
}
.book-header {
display: flex;
}
#menu-control:checked + main {
.book-menu nav,
#menu-control:checked ~ main {
.book-menu #BookMenu,
.book-page {
transform: translateX($menu-width);
}
.book-header label {
.markdown {
opacity: 0.25;
}
.book-header #menu-control {
transform: rotate(90deg);
}
}
#toc-control:checked ~ main {
aside #TableOfContents,
.book-page {
transform: translateX(-$menu-width);
}
.markdown {
opacity: 0.25;
}

1
layouts/_default/baseof.html
View File

@ -7,6 +7,7 @@
</head>
<body>
<input type="checkbox" class="hidden" id="toc-control" />
<input type="checkbox" class="hidden" id="menu-control" />
<main class="flex container">

2
layouts/partials/docs/menu.html
View File

@ -1,4 +1,4 @@
<nav>
<nav id="BookMenu">
{{ partial "docs/brand" . }}
{{ partial "docs/search" . }}
{{ partial "docs/inject/menu-before" . }}

4
layouts/partials/docs/mobile-header.html
View File

@ -1,6 +1,8 @@
<header class="flex align-center justify-between book-header">
<label for="menu-control">
<label id="menu-control" for="menu-control">
<img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
</label>
<label id="toc-control" for="toc-control">
<strong>{{ partial "docs/title" . }}</strong>
</label>
</header>

6
layouts/partials/docs/toc.html
View File

@ -1,6 +1,10 @@
{{ $tocLevels := default (default 6 .Site.Params.BookToC) .Params.BookToC }}
{{ if and $tocLevels .Page.TableOfContents }}
<aside class="book-toc levels-{{$tocLevels}} fixed">
{{ .Page.TableOfContents }}
{{ with .Page.TableOfContents }}
<label id="toc-control" for="toc-control">
{{ . }}
</label>
{{ end }}
</aside>
{{ end }}