From c17deffa99a415ca43f23a3df61b567aacd237dc Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Tue, 1 Aug 2023 21:44:10 -0500
Subject: [PATCH] Redesign banner and mobile menu bar

This commit redesigns the banner that was formerly displayed at the top
of each page.  The banner and the logo are now integrated, and they also
serve as the mobile menu bar.

The `menu.svg` and `close.svg` files are from [Feather icons][feather]
v4.29.0, and are [licensed under the MIT license][license].

[feather]: https://feathericons.com/
[license]: https://github.com/feathericons/feather/blob/v4.29.0/LICENSE
---
 .../generator/template/rails/_context.rhtml   |   2 +-
 .../generator/template/rails/_panel.rhtml     |  47 +--
 lib/rdoc/generator/template/rails/class.rhtml |  30 +-
 lib/rdoc/generator/template/rails/file.rhtml  |  30 +-
 lib/rdoc/generator/template/rails/index.rhtml |   4 +-
 .../template/rails/resources/css/main.css     | 298 +++++++++++-------
 .../template/rails/resources/css/panel.css    | 209 +-----------
 .../template/rails/resources/i/close.svg      |   1 +
 .../template/rails/resources/i/menu.svg       |   1 +
 .../template/rails/resources/js/main.js       |   4 +-
 .../template/rails/resources/js/searchdoc.js  |   6 +-
 11 files changed, 247 insertions(+), 385 deletions(-)
 create mode 100644 lib/rdoc/generator/template/rails/resources/i/close.svg
 create mode 100644 lib/rdoc/generator/template/rails/resources/i/menu.svg

diff --git a/lib/rdoc/generator/template/rails/_context.rhtml b/lib/rdoc/generator/template/rails/_context.rhtml
index a3883bf4..ade16418 100644
--- a/lib/rdoc/generator/template/rails/_context.rhtml
+++ b/lib/rdoc/generator/template/rails/_context.rhtml
@@ -1,4 +1,4 @@
-<div id="content">
+<div id="context">
   <% unless (description = context.description).empty? %>
     <% unless context.comment_title %>
       <h1><%= context.title %></h1>
diff --git a/lib/rdoc/generator/template/rails/_panel.rhtml b/lib/rdoc/generator/template/rails/_panel.rhtml
index a12376ec..c0c771c9 100644
--- a/lib/rdoc/generator/template/rails/_panel.rhtml
+++ b/lib/rdoc/generator/template/rails/_panel.rhtml
@@ -3,25 +3,34 @@
   <div id="version-badge"><%= project_version %></div>
 <% end %>
 
-<input type="checkbox" id="hamburger" class="panel_checkbox">
-<label class="panel_mobile_button" for="hamburger"><span></span> Menu</label>
-<nav class="panel panel_tree" id="panel" data-turbo-permanent>
-  <div class="logo">
-    <a href="/">
-      <img width="300" src="/i/logo.svg" alt="<%= project_name %>">
-    </a>
+<nav id="panel" class="panel">
+  <div class="banner">
+    <div class="banner__segment">
+      <label class="banner__menu-button" for="panel__state"></label>
+    </div>
+    <div class="banner__segment">
+      <a class="banner__logo" href="/"><img src="/i/logo.svg" alt="<%= project_name %>"></a>
+      <span class="banner__version" title="<%= project_git_head %>"><%= project_version %></span>
+    </div>
   </div>
-  <div class="header">
-    <input type="text" placeholder="Search (/) for a class, method, ..." autosave="searchdoc" results="10" id="search" autocomplete="off" tabindex="-1" />
-    <label class="panel_mobile_button_close" for="hamburger"><span></span> Close</label>
-  </div>
-  <div class="tree">
-    <ul>
-    </ul>
-  </div>
-  <div class="result">
-    <ul>
-    </ul>
+
+  <input id="panel__state" type="checkbox">
+
+  <div id="panel__tray" class="panel__tray" data-turbo-permanent>
+    <input id="search" type="text" autocomplete="off" tabindex="-1" autosave="searchdoc" results="10"
+      placeholder="Search (/) for a class, method, ...">
+
+    <div class="panel__tree">
+      <div class="result hidden">
+        <ul>
+        </ul>
+      </div>
+      <div class="tree">
+        <ul>
+        </ul>
+      </div>
+    </div>
+
+    <a id="links" href="links.html">index</a>
   </div>
-  <a href="links.html" id="links">index</a>
 </nav>
diff --git a/lib/rdoc/generator/template/rails/class.rhtml b/lib/rdoc/generator/template/rails/class.rhtml
index 8d94e1a6..9463d65a 100644
--- a/lib/rdoc/generator/template/rails/class.rhtml
+++ b/lib/rdoc/generator/template/rails/class.rhtml
@@ -13,31 +13,21 @@
 </head>
 
 <body>
-    <a class="sr-only sr-only-focusable" href="#content" data-turbo="false">Skip to Content</a>
+    <a class="sr-only sr-only-focusable" href="#context" data-turbo="false">Skip to Content</a>
     <a class="sr-only sr-only-focusable" href="#search" data-turbo="false">Skip to Search</a>
 
     <%= include_template '_panel.rhtml' %>
 
-    <div class="banner">
-        <% if project_name %>
-            <div>
-                <%= project_name %>
-                <span title="<%= project_git_head %>"><%= project_version %></span>
-            </div>
-        <% end %>
+    <main id="content">
+        <div class="content__full-name">
+          <span class="qualifier"><%= klass.type %></span>
+          <%= full_name klass %>
+          <% if !klass.module? && superclass = klass.superclass %>
+            <span class="qualifier">&lt;</span>
+            <%= superclass.is_a?(String) ? full_name(superclass) : link_to(superclass) %>
+          <% end %>
+        </div>
 
-        <h2>
-            <span class="type"><%= klass.module? ? 'Module' : 'Class' %></span>
-            <%= full_name klass %>
-            <% if klass.type == "class" && superclass = klass.superclass %>
-                <span class="parent">
-                    &lt; <%= superclass.is_a?(String) ? full_name(superclass) : link_to(superclass) %>
-                </span>
-            <% end %>
-        </h2>
-    </div>
-
-    <main id="bodyContent">
         <%= include_template '_context.rhtml', {:context => klass} %>
 
         <div class="sectiontitle">Definition files</div>
diff --git a/lib/rdoc/generator/template/rails/file.rhtml b/lib/rdoc/generator/template/rails/file.rhtml
index cac4f0ca..cad54657 100644
--- a/lib/rdoc/generator/template/rails/file.rhtml
+++ b/lib/rdoc/generator/template/rails/file.rhtml
@@ -10,33 +10,21 @@
 </head>
 
 <body>
-    <a class="sr-only sr-only-focusable" href="#content" data-turbo="false">Skip to Content</a>
+    <a class="sr-only sr-only-focusable" href="#context" data-turbo="false">Skip to Content</a>
     <a class="sr-only sr-only-focusable" href="#search" data-turbo="false">Skip to Search</a>
 
     <%= include_template '_panel.rhtml' %>
 
-    <div class="banner">
-        <% if project_name %>
-            <div>
-                <%= project_name %>
-                <span title="<%= project_git_head %>"><%= project_version %></span>
-            </div>
-        <% end %>
+    <main id="content">
+        <h1 class="content__full-name">
+          <span class="qualifier">File</span>
+          <%= full_name file %>
+        </h1>
 
-        <h2>
-            <%= h file.name %>
-        </h2>
-        <ul class="files">
-            <li>
-                <%= full_name file %>
-                <% if github = github_url(file.relative_name) %>
-                    <a href="<%= github %>" target="_blank" class="github_url">on GitHub</a>
-                <% end %>
-            </li>
-        </ul>
-    </div>
+        <% if source_url = github_url(file.relative_name) %>
+          <p><%= link_to_external "View on GitHub", source_url %></p>
+        <% end %>
 
-    <main id="bodyContent">
         <%= include_template '_context.rhtml', {:context => file} %>
     </main>
   </body>
diff --git a/lib/rdoc/generator/template/rails/index.rhtml b/lib/rdoc/generator/template/rails/index.rhtml
index 08b6a90f..fec9e794 100644
--- a/lib/rdoc/generator/template/rails/index.rhtml
+++ b/lib/rdoc/generator/template/rails/index.rhtml
@@ -8,12 +8,12 @@
 </head>
 
 <body>
-    <a class="sr-only sr-only-focusable" href="#content" data-turbo="false">Skip to Content</a>
+    <a class="sr-only sr-only-focusable" href="#context" data-turbo="false">Skip to Content</a>
     <a class="sr-only sr-only-focusable" href="#search" data-turbo="false">Skip to Search</a>
 
     <%= include_template '_panel.rhtml' %>
 
-    <main id="bodyContent">
+    <main id="content">
         <%= include_template '_context.rhtml', {:context => index } %>
     </main>
   </body>
diff --git a/lib/rdoc/generator/template/rails/resources/css/main.css b/lib/rdoc/generator/template/rails/resources/css/main.css
index ceedcb6f..a8073177 100644
--- a/lib/rdoc/generator/template/rails/resources/css/main.css
+++ b/lib/rdoc/generator/template/rails/resources/css/main.css
@@ -1,10 +1,26 @@
+* { box-sizing: border-box; }
+
 :root {
-  --text-color: #3B3B3B;
-  --background-color: #fff;
-  --border-color: #ccc;
-  --code-background-color: #eee;
-  --source-background-color: #fffde8;
-  --method-heading-color: #555;
+  --text-color: #3b3b3b;
+  --link-color: #cc0000;
+  --link-hover-color: #990000;
+  --icon-color: #777777;
+  --border-color: color-mix(in srgb, currentColor 25%, transparent);
+
+  --body-bg: #fff;
+  --code-bg: #eee;
+  --source-code-bg: #fffde8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text-color: #ddd;
+    --link-color: #ee3f3f;
+
+    --body-bg: #222222;
+    --code-bg: #000000;
+    --source-code-bg: #000000;
+  }
 }
 
 html {
@@ -13,51 +29,12 @@ html {
 
 body {
   font-family: "Helvetica Neue", Arial, sans-serif;
-  background: var(--background-color);
+  background: var(--body-bg);
   color: var(--text-color);
   margin: 0px;
   font-size: 15px;
   line-height: 1.25em;
   min-height: 100%;
-  display: grid;
-
-  --link-color: #CC0000;
-  --link-hover-color: #990000;
-  --icon-color: #777777;
-}
-
-body {
-  grid-template-rows: min-content min-content;
-  grid-template-columns: 100%;
-}
-
-@media (min-width: 600px) {
-  body {
-    grid-template-rows: min-content min-content;
-    grid-template-columns: 300px auto;
-  }
-
-  nav {
-    grid-row-start: 1;
-    grid-row-end: 2;
-    grid-column-start: 1;
-    grid-column-end: 1;
-  }
-
-  div.banner {
-    grid-row-start: 1;
-    grid-row-end: 1;
-    grid-column-start: 2;
-    grid-column-end: 2;
-  }
-
-  #bodyContent {
-    grid-row-start: 2;
-    grid-row-end: 2;
-    grid-column-start: 2;
-    grid-column-end: 2;
-    min-width: 0;
-  }
 }
 
 a:link, a:active, a:visited, a:hover {
@@ -70,21 +47,16 @@ a:hover {
   text-decoration: underline;
 }
 
-.banner a:hover {
-  color: white;
-}
-
-h1 a, h2 a, .banner a {
-  color: #fff;
-}
-
 .external-link {
   padding-left: 1.3em;
-  background-image: url('../i/external-link.svg');
-  background-repeat: no-repeat;
+  background: url('../i/external-link.svg') no-repeat;
   background-size: 1.1em;
 }
 
+.hidden {
+  display: none;
+}
+
 p {
   margin-bottom: 1em;
 }
@@ -105,7 +77,6 @@ h2 {
 
 h3 {
     font-size: 1.4em;
-    color: var(--method-heading-color);
     margin: 1.4em 0 0.7em 0;
     font-weight: normal;
 }
@@ -168,36 +139,6 @@ ol li
     list-style: decimal;
 }
 
-.banner
-{
-    background: #B61D1D;
-    color: #FFF;
-    border-bottom: 1px solid #9b281c;
-    padding: 1em;
-    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
-}
-.banner h2
-{
-    font-size: 1.2em;
-    margin: 0;
-}
-
-.banner h2 .type
-{
-    font-size: 0.833em;
-    display:block;
-}
-
-.banner h2 .type,
-.banner h2 .parent
-{
-    color: #CCC;
-}
-
-.banner .github_url {
-  color: #CCC;
-}
-
 pre
 {
     margin-bottom: 1em;
@@ -230,14 +171,13 @@ pre
     display: inline;
 }
 
-#bodyContent {
-  margin: 1em;
+#content {
+  padding: 1em;
 }
 
 @media (min-width: 600px) {
-  #bodyContent {
-    max-width: 980px;
-    margin: 2em 3.5em;
+  #content {
+    padding: 2em 3.5em;
   }
 }
 
@@ -285,7 +225,7 @@ tt {
 }
 
 .dyn-source {
-  background: var(--source-background-color);
+  background: var(--source-code-bg);
   color: #000;
   border: #ffe0bb dotted 1px;
   margin: 0.5em 2em 0.5em 0;
@@ -294,7 +234,7 @@ tt {
 
 .description pre {
   padding: 1em 1.2em;
-  background: var(--code-background-color);
+  background: var(--code-bg);
   border-radius: 10px;
   font-size: 15px;
 }
@@ -384,7 +324,7 @@ tt {
 }
 
 p code {
-  background: var(--code-background-color);
+  background: var(--code-bg);
   border-radius: 5px;
   font-family: Consolas, Menlo, Courier, monospace;
   font-size: 14px;
@@ -456,6 +396,159 @@ a.back-to-top.show {
   visibility: visible;
 }
 
+.content__full-name {
+  font-family: monospace;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  margin-top: 0;
+  margin-left: 1em;
+  text-indent: -1em;
+}
+
+.content__full-name .qualifier {
+  font-weight: bold;
+}
+
+
+/*
+ * Navigation panel
+ */
+
+html {
+  --banner-height: 3.5rem;
+  scroll-padding-top: calc(var(--banner-height) + 1rem);
+}
+
+#panel {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 90;
+  width: 100dvw;
+}
+
+#panel__state {
+  display: none;
+}
+
+
+.banner {
+  height: var(--banner-height);
+  background-color: #B61D1D;
+}
+
+.banner__segment {
+  display: inline-block;
+  height: 100%;
+  padding: calc(0.15 * var(--banner-height));
+  filter: brightness(0) invert(1);
+}
+
+.banner__segment:first-child {
+  border-right: 1px solid;
+}
+
+.banner__menu-button {
+  display: inline-block;
+  height: 100%;
+  aspect-ratio : 1 / 1;
+  background: url('../i/menu.svg') no-repeat center;
+  background-size: 100%;
+}
+
+#panel:has(#panel__state:checked) .banner__menu-button {
+  background-image: url('../i/close.svg');
+}
+
+.banner__logo img {
+  height: 100%;
+}
+
+.banner__version {
+  font-size: 1.25rem;
+  font-style: italic;
+
+  position: relative;
+  bottom: 0.15em;
+}
+
+
+.panel__tray {
+  background: var(--body-bg);
+
+  position: fixed;
+  top: var(--banner-height);
+  width: inherit;
+
+  overflow-y: hidden;
+  transition: max-height 0.2s ease-in-out;
+  max-height: 0;
+}
+
+#panel__state:checked ~ .panel__tray {
+  max-height: 100dvh;
+}
+
+#search {
+  height: calc(0.70 * var(--banner-height));
+  width: 100%;
+
+  background: url('../i/search.svg') no-repeat;
+  background-position: 0.5em center;
+  padding-left: calc(0.5em + 16px + 0.5em);
+
+  color: inherit;
+
+  border: 0;
+  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.panel__tree {
+  height: calc(100dvh - 1.70 * var(--banner-height));
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* Always contain scroll events in .panel__tree (on mobile) */
+.panel__tree .tree {
+  height: calc(100% + 1px);
+}
+
+.panel__tree .result:not(.hidden) ~ .tree {
+  display: none;
+}
+
+
+@media (min-width: 600px) {
+  html {
+    scroll-padding-top: 1rem;
+  }
+
+  #panel {
+    height: 0;
+    width: 300px;
+  }
+
+  #content {
+    margin-left: 300px;
+  }
+
+  .banner__segment:first-child {
+    display: none;
+  }
+
+  .panel__tray {
+    min-height: 100dvh;
+    border-right: 1px solid var(--border-color);
+  }
+
+  .panel__tree .tree {
+    height: unset;
+  }
+}
+
+
 /*
  * More-Less widget
  */
@@ -500,18 +593,3 @@ details.more-less:not([open]) .more-less__less,
 details.more-less[open] .more-less__more {
   display: none;
 }
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text-color: #ddd;
-    --background-color: #222222;
-    --border-color: #444;
-    --code-background-color: #000000;
-    --source-background-color: #000000;
-    --method-heading-color: #ccc;
-  }
-
-  body {
-    --link-color: #ee3f3f;
-  }
-}
diff --git a/lib/rdoc/generator/template/rails/resources/css/panel.css b/lib/rdoc/generator/template/rails/resources/css/panel.css
index 75f0bb83..f920eb46 100644
--- a/lib/rdoc/generator/template/rails/resources/css/panel.css
+++ b/lib/rdoc/generator/template/rails/resources/css/panel.css
@@ -5,212 +5,21 @@
   --panel-current-background-color: #B61D1D;
   --panel-highlight-color: #000;
 }
-    .panel_checkbox, .panel_mobile_button, .panel_mobile_button_close
-    {
-        display: none;
-    }
-
-    @media (max-width: 599px) {
-        html {
-            scroll-padding-top: 50px;
-        }
-
-        .panel_mobile_button {
-            display: block;
-            height: 40px;
-            position: sticky;
-            top: 0;
-            background: #000;
-            color: #fff;
-            padding: 0 10px;
-            line-height: 40px;
-            cursor: pointer;
-            z-index: 2;
-        }
-        .panel_checkbox:checked ~ .panel_mobile_button {
-        }
-
-        .panel_checkbox:checked ~ .panel .panel_mobile_button_close {
-            display: block;
-            height: 40px;
-            position: absolute;
-            top: 0;
-            right: 10px;
-            z-index: 3000;
-            text-align: right;
-            line-height: 40px;
-            cursor: pointer;
-        }
-    }
-
-    .panel_mobile_button span {
-         position: relative;
-         display: inline-block;
-         width: 1em;
-         height: 0.55em;
-         margin-right: 0.3em;
-         border-top: 0.1em solid #fff;
-         border-bottom: 0.1em solid #fff;
-    }
-
-    .panel_mobile_button span:before {
-         content: "";
-         position: absolute;
-         top: 0.25em;
-         left: 0px;
-         width: 100%;
-         border-top: 0.1em solid #fff;
-    }
-
-    .panel_mobile_button_close span {
-         position: relative;
-         display: inline-block;
-         width: 1em;
-         height: 0.625em;
-    }
-
-    .panel_mobile_button_close span:before, .panel_mobile_button_close span:after {
-         content: "";
-         position: absolute;
-         top: 0.2em;
-         left: 0px;
-         width: 100%;
-         border-top: 0.1em solid #000;
-    }
-
-    .panel_mobile_button_close span:before {
-        transform: rotate(45deg);
-    }
-
-    .panel_mobile_button_close span:after {
-        transform: rotate(-45deg);
-    }
-
-    .panel
-    {
-        position: fixed;
-        top: 0;
-        width: 300px;
-        height: 100%;
-        background: var(--background-color);
-        z-index: 200;
-        font-family: "Helvetica Neue", "Arial", sans-serif;
-        overflow-x: hidden;
-        border-right: 1px solid var(--border-color);
-        line-height: 1;
-    }
-
-    @media (max-width: 599px) {
-        .panel
-        {
-            transition: left 0s ease-in-out;
-            left: -100%;
-            width: 100%;
-            bottom: 0;
-            visibility: hidden;
-        }
-
-        .panel_checkbox:checked ~ .panel {
-            left: 0%;
-            transition: left 0.3s ease-in-out;
-            visibility: visible;
-        }
-
-        .panel_checkbox:checked ~ #bodyContent {
-            visibility: hidden;
-            display: none;
-        }
-    }
-
-    .panel_tree .result,
-    .panel_results .tree
-    {
-        display: none;
-    }
-
-    .panel .logo {
-      text-align: center;
-    }
-
-    @media (max-width: 599px) {
-      .panel .logo img {
-        width: 50%;
-      }
-    }
-
-    /* Header with search box (begin) */
-        .panel .header
-        {
-            background: var(--background-color) url(../i/search.svg) no-repeat;
-            background-position: 5px;
-            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
-            height: 40px;
-            width: 300px;
-            position: fixed;
-            position: sticky;
-            left: 0; top: 0;
-            z-index: 300;
-            overflow-x: hidden;
-        }
-
-        @media (max-width: 599px) {
-            .panel .header
-            {
-                width: 100%;
-            }
-        }
-
-        .panel .header input
-        {
-            border: 0;
-            box-sizing: border-box;
-            display: inline-block;
-            font-size: 14px;
-            height: 40px;
-            width: 100%;
-            padding: 0 5px;
-            margin: 0;
-            margin-left: 25px;
-            outline: none;
-            background: var(--background-color);
-            color: var(--text-color);
-        }
-
-        @media (max-width: 599px) {
-            .panel .header input
-            {
-                width: 70%;
-                width: calc(100% - 100px);
-                font-size: 16px;
-            }
-        }
-
-    /* Header with search box (end) */
-
 
     /* Results (begin) */
         .panel .result
         {
-            position: relative;
-            bottom: 0;
-            top: 0;
-            left: 0;
-            width: 100%;
-            overflow-y: auto;
-            overflow-x: hidden;
-            z-index: 2;
+            line-height: 1;
         }
 
         .panel .result ul
         {
             font-size: 0.8em;
-            width: 100%;
         }
 
         .panel .result ul li
         {
-            height: 46px;
-            overflow: hidden;
+            height: 50px;
             padding: 4px 10px 0 10px;
             cursor: pointer;
             margin: 0;
@@ -355,18 +164,6 @@
     /* Results (end) */
 
     /* Tree (begin) */ /**/
-        .panel .tree
-        {
-            background: var(--background-color);
-            position: relative;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            overflow-y: auto;
-            overflow-x: hidden;
-            z-index: 30;
-        }
-
         .panel .tree ul:first-child
         {
             background: url(../i/tree_bg.svg);
@@ -376,7 +173,6 @@
         .panel .tree li
         {
             cursor: pointer;
-            overflow: hidden;
             height: 30px;
             line-height: 100%;
             margin: 0;
@@ -388,7 +184,6 @@
             padding-left: 18px;
             padding-top: 5px;
             height: 18px;
-            overflow: hidden;
             position: relative;
         }
 
diff --git a/lib/rdoc/generator/template/rails/resources/i/close.svg b/lib/rdoc/generator/template/rails/resources/i/close.svg
new file mode 100644
index 00000000..3c8af1bb
--- /dev/null
+++ b/lib/rdoc/generator/template/rails/resources/i/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#777777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
diff --git a/lib/rdoc/generator/template/rails/resources/i/menu.svg b/lib/rdoc/generator/template/rails/resources/i/menu.svg
new file mode 100644
index 00000000..14db7bc0
--- /dev/null
+++ b/lib/rdoc/generator/template/rails/resources/i/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#777777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
diff --git a/lib/rdoc/generator/template/rails/resources/js/main.js b/lib/rdoc/generator/template/rails/resources/js/main.js
index 6bf81bff..0042550a 100644
--- a/lib/rdoc/generator/template/rails/resources/js/main.js
+++ b/lib/rdoc/generator/template/rails/resources/js/main.js
@@ -40,11 +40,11 @@ document.addEventListener("turbo:load", function() {
   var scrollTop = 0;
 
   addEventListener("turbo:before-render", function() {
-    scrollTop = $('#panel').first().scrollTop();
+    scrollTop = document.querySelector(".panel__tree").scrollTop
   })
 
   addEventListener("turbo:render", function() {
-    $('#panel').first().scrollTop(scrollTop);
+    document.querySelector(".panel__tree").scrollTop = scrollTop
   })
 })()
 
diff --git a/lib/rdoc/generator/template/rails/resources/js/searchdoc.js b/lib/rdoc/generator/template/rails/resources/js/searchdoc.js
index be4ab7ac..f0372ebb 100644
--- a/lib/rdoc/generator/template/rails/resources/js/searchdoc.js
+++ b/lib/rdoc/generator/template/rails/resources/js/searchdoc.js
@@ -136,7 +136,7 @@ function scrollIntoView(element, view) {
 
 Searchdoc.Panel = function(element, data, tree) {
     this.$element = $(element);
-    this.$input = $('input', element).eq(0);
+    this.$input = $('input[type="text"]', element).eq(0);
     this.$result = $('.result ul', element).eq(0);
     this.$current = null;
     this.$view = this.$result.parent();
@@ -176,11 +176,11 @@ Searchdoc.Panel.prototype = $.extend({}, Searchdoc.Navigation, new function() {
         value = jQuery.trim(value).toLowerCase();
         this.selectFirstMatch = selectFirstMatch;
         if (value) {
-            this.$element.removeClass('panel_tree').addClass('panel_results');
+            this.$view.removeClass("hidden");
             this.tree.setNavigationActive(false);
             this.setNavigationActive(true);
         } else {
-            this.$element.addClass('panel_tree').removeClass('panel_results');
+            this.$view.addClass("hidden");
             this.tree.setNavigationActive(true);
             this.setNavigationActive(false);
         }