[doc] Make side fixed only for big screens

Also wrap the inline-toc in an accordion to
save some space.
Remove some of the unneeded javascript.

Fixes #4521

docs/_config.yml

@@ -3,7 +3,7 @@ repository: pmd/pmd
 pmd:
     version: 7.0.0-SNAPSHOT
     previous_version: 6.55.0
-    date: 27-June-2023
+    date: ??-?????-2023
     release_type: major
 
 # release types: major, minor, bugfix

docs/_layouts/page.html

@@ -13,7 +13,10 @@ layout: default
    {% if page.summary %}
     <div class="summary">{{page.summary}}</div>
    {% endif %}
-    <div id="inline-toc"><!-- empty, move TOC here when screen size too small --></div>
+    <details id="inline-toc-details">
+        <summary>Table of Contents</summary>
+        <div id="inline-toc"><!-- empty, move TOC here when screen size too small --></div>
+    </details>
 
   {{content}}
 

docs/css/customstyles.css

@@ -1007,9 +1007,9 @@ span.soft {
     }
 }
 
-@media (max-width: 990px) {
+@media (min-height: 600px) and (min-width: 990px) {
     #mysidebar {
-        position: relative;
+        position: fixed !important;
     }
 }
 
@@ -1025,6 +1025,15 @@ span.soft {
     }
 }
 
+#inline-toc-details {
+    display: none;
+}
+@media (max-width: 1350px) {
+    #inline-toc-details {
+        display: block;
+    }
+}
+
 .col-md-9 img {
     max-width: 100%;
     max-height: 100%;

docs/js/customscripts.js

@@ -17,17 +17,6 @@ $(document).ready(function () {
         headers: 'h2,h3,h4',
     });
 
-    $('#mysidebar').height($(".nav").height());
-
-    // this script says, if the height of the viewport is greater than 600px, then insert position-fixed class,
-    // which makes the nav bar float in a fixed position as your scroll. If you have a lot of nav items,
-    // this height may not work for you.
-    var h = $(window).height();
-    //console.log (h);
-    if (h > 600) {
-        $( '#mysidebar' ).attr('class', 'nav position-fixed');
-    }
-
     // activate tooltips. although this is a bootstrap js function, it must be activated this way in your theme.
     $('[data-toggle="tooltip"]').tooltip({
         placement: 'top',

docs/pages/release_notes.md

@@ -45,6 +45,8 @@ The remaining section describes the complete release notes for 7.0.0.
   * [#4582](https://github.com/pmd/pmd/issues/4582): \[dist] Download link broken
 * core
   * [#4621](https://github.com/pmd/pmd/issues/4621): \[core] Make `ClasspathClassLoader::getResource` child first
+* doc
+  * [#4521](https://github.com/pmd/pmd/issues/4521): \[doc] Website is not mobile friendly
 * apex-design
   * [#4596](https://github.com/pmd/pmd/issues/4596): \[apex] ExcessivePublicCount ignores properties
 * java
@@ -395,6 +397,7 @@ See [Detailed Release Notes for PMD 7]({{ baseurl }}pmd_release_notes_pmd7.html)
 * doc
     * [#2501](https://github.com/pmd/pmd/issues/2501): \[doc] Verify ANTLR Documentation
     * [#4438](https://github.com/pmd/pmd/issues/4438): \[doc] Documentation links in VS Code are outdated
+    * [#4521](https://github.com/pmd/pmd/issues/4521): \[doc] Website is not mobile friendly
 * testing
     * [#2435](https://github.com/pmd/pmd/issues/2435): \[test] Remove duplicated Dummy language module
     * [#4234](https://github.com/pmd/pmd/issues/4234): \[test] Tests that change the logging level do not work