Refactor aside menus, add extra wrapper

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-toc > nav {
+  .book-menu .book-menu-content,
+  .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>
-        {{ partial "docs/inject/toc-before" . }}
+      <div class="book-toc-content">
         {{ template "toc" . }} <!-- Table of Contents -->
-        {{ partial "docs/inject/toc-after" . }}
-      </nav>
+      </div>
     </aside>
     {{ end }}
   </main>

layouts/partials/docs/toc.html

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