diff --git a/lib/rdoc/generator/template/darkfish/_head.rhtml b/lib/rdoc/generator/template/darkfish/_head.rhtml
index d5aed3e9ef..69649ad3b5 100644
--- a/lib/rdoc/generator/template/darkfish/_head.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_head.rhtml
@@ -1,4 +1,5 @@
 <meta charset="<%= @options.charset %>">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <title><%= h @title %></title>
 
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
new file mode 100644
index 0000000000..148b369b51
--- /dev/null
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
@@ -0,0 +1,26 @@
+<button id="navigation-toggle" class="navigation-toggle" aria-label="Toggle sidebar" aria-expanded="true" aria-controls="navigation">
+  <!--
+    Copyright (c) 2021 Luca Burgio
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+  -->
+  <svg width="20px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
+    <path d="M3 5h18M3 12h18M3 19h18" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+  </svg>
+</button>
diff --git a/lib/rdoc/generator/template/darkfish/class.rhtml b/lib/rdoc/generator/template/darkfish/class.rhtml
index 97d175dddc..b0dfcaeab4 100644
--- a/lib/rdoc/generator/template/darkfish/class.rhtml
+++ b/lib/rdoc/generator/template/darkfish/class.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="<%= klass.type %>">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
     <%= render '_sidebar_search.rhtml' %>
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index ddaf4d47c6..06d23ff102 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -19,12 +19,12 @@ body {
   font-weight: 300;
 
   /* Layout */
-  display: grid;
-  grid-template-columns: auto 1fr;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 body > :last-child {
-  grid-column: 1 / 3;
+  width: 100%;
 }
 
 h1 span,
@@ -192,24 +192,40 @@ nav {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   border-right: 1px solid #ccc;
-  position: sticky;
+  position: fixed;
   top: 0;
   overflow: auto;
+  z-index: 10;
 
   /* Layout */
-  width: 260px; /* fallback */
-  width: max(50px, 20vw);
-  min-width: 50px;
-  max-width: 80vw;
-  height: calc(100vh - 100px); /* reduce the footer height */
+  width: 300px;
+  min-height: 100vh;
+
   resize: horizontal;
+  background: white;
+}
+
+@media (min-width: 1024px) {
+  nav {
+    min-height: unset;
+    height: calc(100vh - 100px); /* reduce the footer height */
+  }
 }
 
 main {
   display: block;
-  margin: 1em;
+  margin: 3em 1em 1em;
   min-width: 340px;
   font-size: 16px;
+  width: 100%;
+  max-width: 64em;
+}
+
+@media (min-width: 1024px) {
+  main {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 main h1,
@@ -221,8 +237,10 @@ main h6 {
   font-family: Helvetica, sans-serif;
 }
 
-.table-of-contents main {
-  margin-left: 2em;
+@media (min-width: 1024px) {
+  .table-of-contents main {
+    margin-left: 20em;
+  }
 }
 
 #validator-badges {
@@ -269,6 +287,39 @@ nav p {
   list-style: none;
 }
 
+.navigation-toggle {
+  position: fixed;
+  left: 4px;
+  top: 6px;
+  z-index: 100;
+
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  margin-left: 7px;
+  padding: 4px;
+}
+.navigation-toggle[aria-expanded="true"] {
+  left: 260px;
+}
+
+/* Adds a suble gradient to help the toggle stand out from the background */
+.navigation-toggle::before {
+  content: "";
+  background: linear-gradient(180deg, rgba(250,250,250,1) 40%, rgba(250,250,250,0.8) 70%, rgba(250,250,250,0) 100%);
+  display: block;
+  z-index: -1;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  height: 50px;
+  width: 100vw;
+}
+
+.navigation-toggle[aria-expanded="true"]::before {
+  height: 0;
+}
+
 #project-navigation .nav-section {
   margin: 0;
   border-top: 0;
@@ -673,4 +724,3 @@ pre {
 }
 
 /* @end */
-
diff --git a/lib/rdoc/generator/template/darkfish/index.rhtml b/lib/rdoc/generator/template/darkfish/index.rhtml
index 423e225b68..b3eede6c00 100644
--- a/lib/rdoc/generator/template/darkfish/index.rhtml
+++ b/lib/rdoc/generator/template/darkfish/index.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="file">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
 
diff --git a/lib/rdoc/generator/template/darkfish/js/darkfish.js b/lib/rdoc/generator/template/darkfish/js/darkfish.js
index d0c9467751..f75487bec4 100644
--- a/lib/rdoc/generator/template/darkfish/js/darkfish.js
+++ b/lib/rdoc/generator/template/darkfish/js/darkfish.js
@@ -78,7 +78,24 @@ function hookSearch() {
   search.scrollIntoView = search.scrollInWindow;
 };
 
+function hookSidebar() {
+  var navigation = document.querySelector('#navigation');
+  var navigationToggle = document.querySelector('#navigation-toggle');
+
+  navigationToggle.addEventListener('click', function() {
+    navigation.hidden = !navigation.hidden;
+    navigationToggle.ariaExpanded = navigationToggle.ariaExpanded !== 'true';
+  });
+
+  var isSmallViewport = window.matchMedia("(max-width: 1024px)").matches;
+  if (isSmallViewport) {
+    navigation.hidden = true;
+    navigationToggle.ariaExpanded = false;
+  }
+}
+
 document.addEventListener('DOMContentLoaded', function() {
   hookSourceViews();
   hookSearch();
+  hookSidebar();
 });
diff --git a/lib/rdoc/generator/template/darkfish/page.rhtml b/lib/rdoc/generator/template/darkfish/page.rhtml
index 4a6b006bb3..90b9e4ee3b 100644
--- a/lib/rdoc/generator/template/darkfish/page.rhtml
+++ b/lib/rdoc/generator/template/darkfish/page.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="file">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
     <%= render '_sidebar_search.rhtml' %>
@@ -15,4 +17,3 @@
 <main role="main" aria-label="Page <%=h file.full_name%>">
 <%= file.description %>
 </main>
-
diff --git a/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml b/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
index f0841572c3..b30e64eec5 100644
--- a/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
+++ b/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
@@ -1,5 +1,7 @@
 <body role="document">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <%= render '_sidebar_navigation.rhtml' %>
 
   <%= render '_sidebar_search.rhtml' %>
@@ -15,4 +17,3 @@
 
   <p><%= message %>
 </main>
-
diff --git a/lib/rdoc/generator/template/darkfish/servlet_root.rhtml b/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
index cab3092b17..859ce2930b 100644
--- a/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
+++ b/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
@@ -1,5 +1,7 @@
 <body role="document">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <div id="home-section" class="nav-section">
       <h2>
diff --git a/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml b/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
index 54a376c9e5..5869873775 100644
--- a/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
+++ b/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
@@ -1,4 +1,13 @@
 <body id="top" class="table-of-contents">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
+  <div id="project-navigation">
+    <%= render '_sidebar_navigation.rhtml' %>
+
+    <%= render '_sidebar_search.rhtml' %>
+  </div>
+</nav>
 <main role="main">
 <h1 class="class"><%= h @title %></h1>
 
