Remove dynamic toc on mobile version

src/main/resources/js/toc.js

@@ -3,8 +3,9 @@ if (toctitle != null) {
     var oldtoc = toctitle.nextElementSibling;
     var newtoc = document.createElement('div');
     newtoc.setAttribute('id', 'tocbot');
-    newtoc.setAttribute('class', 'js-toc');
-    oldtoc.parentNode.replaceChild(newtoc, oldtoc);
+    newtoc.setAttribute('class', 'js-toc desktop-toc');
+    oldtoc.setAttribute('class', 'mobile-toc');
+    oldtoc.parentNode.appendChild(newtoc);
     tocbot.init({
         contentSelector: '#content',
         headingSelector: 'h1, h2, h3, h4, h5',

src/main/sass/spring/_asciidoctor.scss

@@ -19,7 +19,6 @@ html {
   box-sizing: border-box;
 }
 
-
 body {
   background: white;
   color: #000;
@@ -373,6 +372,17 @@ blockquote, blockquote p {
   line-height: 1.5rem;
 }
 
+.mobile-toc {
+  padding: 0 0 1rem 0;
+  line-height: 1.5rem;
+  li {
+    a {
+      display: block;
+      padding: .3rem 0;
+    }
+  }
+}
+
 #tocbot ol li {
   list-style: none;
   padding: 0;
@@ -626,7 +636,6 @@ body.toc2 {
   padding-bottom: 0.625em;
 }
 
-
 .sect1 + .sect1 {
   border-top: 1px solid #efefed;
 }
@@ -802,7 +811,6 @@ table.tableblock #preamble > .sectionbody > .paragraph:first-of-type p {
   word-break: keep-all;
 }
 
-
 .literalblock.output pre {
   color: whitesmoke;
   background-color: rgba(0, 0, 0, 0.9);

src/main/sass/spring/_responsive.scss

@@ -1,3 +1,8 @@
+
+.desktop-toc {
+  display: none;
+}
+
 @media only screen and (min-width: 768px) {
   $w: 15em;
   #toctitle {
@@ -7,6 +12,14 @@
     padding-bottom: 1.25em;
   }
 
+  .mobile-toc {
+    display: none;
+  }
+
+  .desktop-toc {
+    display: block;
+  }
+
   .literalblock pre, .literalblock pre[class], .listingblock pre, .listingblock pre[class] {
     font-size: 0.90625em;
   }