Refactor aside menus, add extra wrapper

README.md

@@ -69,12 +69,12 @@ hugo server --minify --theme book
 
 ### File tree menu (default)
 
-By default, the theme will render pages from the `content/docs` section as a menu in a tree structure.
+By default, the theme will render pages from the `content/docs` section as a menu in a tree structure.  
 You can set `title` and `weight` in the front matter of pages to adjust the order and titles in the menu.
 
 ### Leaf bundle menu
 
-You can also use leaf bundle and the content of its `index.md` file as menu.
+You can also use leaf bundle and the content of its `index.md` file as menu.  
 Given you have the following file structure:
 
 ```
@@ -108,14 +108,14 @@ And Enable it by setting `BookMenuBundle: /menu` in Site configuration.
 
 ## Blog
 
-A simple blog is supported in the section `posts`.
+A simple blog is supported in the section `posts`.  
 A blog is not the primary usecase of this theme, so it has only minimal features.
 
 ## Configuration
 
 ### Site Configuration
 
-There are a few configuration options that you can add to your `config.toml` file.
+There are a few configuration options that you can add to your `config.toml` file.  
 You can also see the `yaml` example [here](https://github.com/alex-shpak/hugo-book/blob/master/exampleSite/config.yaml).
 
 ```toml
@@ -302,7 +302,7 @@ If you want lower maintenance, use one of the released versions. If you want to
 
 ### [Extra credits to contributors](https://github.com/alex-shpak/hugo-book/graphs/contributors)
 
-Contributions are welcome and I will review and consider pull requests.
+Contributions are welcome and I will review and consider pull requests.  
 Primary goals are:
 
 - Keep it simple.

assets/_main.scss

@@ -99,7 +99,7 @@ ul.pagination {
   flex: 0 0 $menu-width;
   font-size: $font-size-14;
 
-  nav {
+  .book-menu-content {
     width: $menu-width;
     padding: $padding-16;
     background: var(--body-background);
@@ -209,7 +209,7 @@ ul.pagination {
   flex: 0 0 $toc-width;
   font-size: $font-size-12;
 
-  > nav {
+  .book-toc-content {
     width: $toc-width;
     padding: $padding-16;
 
@@ -297,7 +297,8 @@ ul.pagination {
 }
 
 // Responsive styles
-aside nav,
+.book-menu-content,
+.book-toc-content,
 .book-page,
 .book-header aside,
 .markdown {
@@ -336,7 +337,7 @@ aside nav,
       visibility: initial;
     }
 
-    .book-menu nav {
+    .book-menu .book-menu-content {
       transform: translateX($menu-width);
       box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
     }
@@ -367,7 +368,7 @@ aside nav,
 
   //for RTL support
   body[dir="rtl"] #menu-control:checked + main {
-    .book-menu nav {
+    .book-menu .book-menu-content {
       transform: translateX(-$menu-width);
     }
   }
@@ -376,8 +377,8 @@ aside nav,
 // Extra space for big screens
 @media screen and (min-width: $container-max-width) {
   .book-page,
-  .book-menu nav,
+  .book-menu .book-menu-content,
-  .book-toc > nav {
+  .book-toc .book-toc-content {
     padding: $padding-16 * 2 $padding-16;
   }
 }

exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json

@@ -1 +1 @@
-{"Target":"book.min.5284606b3d4d63899357ff95f4032c205e62b86963d9241c255c46093296e5a0.css","MediaType":"text/css","Data":{"Integrity":"sha256-UoRgaz1NY4mTV/+V9AMsIF5iuGlj2SQcJVxGCTKW5aA="}}
+{"Target":"book.min.6c7c6446dfdee7c8c933e9bbc6e80ee3ed6c913b2a59519f2092c3c6a9d63e55.css","MediaType":"text/css","Data":{"Integrity":"sha256-bHxkRt/e58jJM+m7xugO4+1skTsqWVGfIJLDxqnWPlU="}}

layouts/_default/baseof.html

@@ -12,7 +12,9 @@
   <input type="checkbox" class="hidden toggle" id="toc-control" />
   <main class="container flex">
     <aside class="book-menu">
-      {{ template "menu" . }} <!-- Left menu Content -->
+      <div class="book-menu-content">
+        {{ template "menu" . }} <!-- Left menu Content -->
+      </div>
     </aside>
 
     <div class="book-page">
@@ -36,11 +38,9 @@
 
     {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
     <aside class="book-toc">
-      <nav>
+      <div class="book-toc-content">
-        {{ partial "docs/inject/toc-before" . }}
         {{ template "toc" . }} <!-- Table of Contents -->
-        {{ partial "docs/inject/toc-after" . }}
+      </div>
-      </nav>
     </aside>
     {{ end }}
   </main>

layouts/partials/docs/toc.html

@@ -1 +1,3 @@
+{{ partial "docs/inject/toc-before" . }}
 {{ .TableOfContents }}
+{{ partial "docs/inject/toc-after" . }}