rubyapi · AlexWayfer · Apr 21, 2020
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -15,6 +15,14 @@ def homepage?
     end
   end
 
+  def object_page?
+    return(@is_object_page) if defined?(@is_object_page)
+
+    @is_object_page = begin
+      params[:controller] == "objects" && params[:action] == "show"
+    end
+  end
+
   # Map a method source file into a url to Github.com
   def github_url(ruby_doc)
     version, file, line = ruby_doc.source_location.split(":")

diff --git a/app/javascript/controllers/sidebar_toggle_controller.js b/app/javascript/controllers/sidebar_toggle_controller.js
@@ -0,0 +1,13 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = ["versionList", "versionOverlay"]
+
+  toggle() {
+    document.body.classList.toggle('sidebar-opened')
+  }
+
+  close() {
+    document.body.classList.remove('sidebar-opened')
+  }
+}
diff --git a/app/javascript/packs/app/application.scss b/app/javascript/packs/app/application.scss
@@ -43,8 +43,8 @@ p {
   overflow-wrap: break-word;
 }
 
-.h-93 {
-  height: calc(100vh - 7rem)!important;
+.h-96 {
+  height: calc(100vh - 4rem)!important;
 }
 
 code {
@@ -107,3 +107,33 @@ pre:not(.ruby) {
     @apply font-semibold text-lg py-1;
   }
 }
+
+body {
+  .sidebar-wrapper {
+    background: rgba(black, 0.5);
+
+    @screen lg {
+      background: transparent;
+    }
+  }
+
+  &:not(.sidebar-opened) {
+    .sidebar-wrapper {
+      display: none;
+
+      @screen lg {
+        display: block;
+      }
+    }
+  }
+
+  &.sidebar-opened {
+    overflow: hidden;
+    height: 100vh;
+
+    @screen lg {
+      overflow: initial;
+      height: initial;
+    }
+  }
+}
diff --git a/app/javascript/packs/icons.js b/app/javascript/packs/icons.js
@@ -1,9 +1,8 @@
 import { library, dom } from '@fortawesome/fontawesome-svg-core'
-import { faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faHistory, faCheck, faSun, faMoon } from '@fortawesome/free-solid-svg-icons'
-import { faPlay, faSync, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faHistory, faCheck, faSun, faMoon, faPlay, faSync, faInfoCircle, faBars } from '@fortawesome/free-solid-svg-icons'
 import { faCopy } from '@fortawesome/free-regular-svg-icons'
 import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'
 
-library.add(faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faGithub, faTwitter, faHistory, faPlay, faCopy, faCheck, faSync, faInfoCircle, faSun, faMoon)
+library.add(faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faGithub, faTwitter, faHistory, faPlay, faCopy, faCheck, faSync, faInfoCircle, faSun, faMoon, faBars)
 
 dom.watch()
diff --git a/app/views/layouts/_header.html.slim b/app/views/layouts/_header.html.slim
@@ -2,12 +2,15 @@
 header id="header" class="flex items-center inset-x-0 z-50 h-16 #{'text-white bg-red-600 dark:bg-gray-700 fixed top-0' unless homepage?}"
   nav class="w-full max-w-screen-xl mx-auto" role="navigation" aria-label="main navigation"
     div class="flex items-center justify-between #{homepage? ? 'px-6' : 'px-3'}"
-      div class="flex-shrink-0"
+      div class="flex lg:w-2/12 md:w-3/12 w-4/12"
+        - if object_page?
+          button type="button" class="sidebar-toggle lg:hidden py-2 px-3 mr-2 self-center" data-controller="sidebar-toggle" data-action="sidebar-toggle#toggle"
+            i class="fas fa-bars"
         = render 'layouts/logo'
       - unless homepage?
-        div class="lg:w-5/12 md:w-6/12 w-8/12"
-            = render 'layouts/search_form'
-      div class="#{homepage? ? 'md:w-2/12 w-6/12' : 'w-2/12'}"
+        div class="lg:w-5/12 md:w-6/12 w-6/12"
+          = render 'layouts/search_form'
+      div class="#{homepage? ? 'md:w-3/12 w-6/12' : 'w-3/12'}"
         div class="flex flex-row-reverse"
           = render 'layouts/theme_selector'
           = render 'layouts/github_links'

diff --git a/app/views/objects/_sidebar.html.slim b/app/views/objects/_sidebar.html.slim
@@ -1,31 +1,32 @@
-div class="hidden lg:block w-1/4"
-  div class="hidden lg:block lg:sticky pt-1 top-0"
-    div class="overflow-y-auto mt-24 pl-3 pr-6 h-93"
-      - if @object.superclass
-        = render "objects/sidebar/section", title: 'Parent' do
-          = render "objects/sidebar/section/link",
-              additional_classes: "font-mono text-sm",
-              title: @object.superclass.constant,
-              href: object_path(object: @object.superclass.path)
-      - unless @object.included_modules.empty?
-        = render "objects/sidebar/section", title: 'Included Modules' do
-          ul class="font-mono text-sm"
-            - @object.included_modules.each do |included_module|
-              li
-                = render "objects/sidebar/section/link",
-                    title: included_module.constant,
-                    href: object_path(object: included_module.path)
-      - unless @object.ruby_class_methods.empty?
-        = render "objects/sidebar/section", title: 'Class Methods' do
-          ul class="font-mono text-sm"
-            - @object.ruby_class_methods.each do |m|
-              li
-                = render "objects/sidebar/section/link",
-                    title: ":: #{m.name}", href: "##{method_anchor(m)}"
-      - unless @object.ruby_instance_methods.empty?
-        = render "objects/sidebar/section", title: 'Instance Methods' do
-          ul class="font-mono text-sm"
-            - @object.ruby_instance_methods.each do |m|
-              li
-                = render "objects/sidebar/section/link",
-                    title: "# #{m.name}", href: "##{method_anchor(m)}"
+div class="sidebar-wrapper lg:static fixed lg:left-auto top-0 left-0 mt-16 lg:w-1/4 w-full" data-controller="sidebar-toggle" data-action="click->sidebar-toggle#close"
+  div class="sidebar lg:fixed inline-block w-auto lg:h-screen h-96 pt-3 pl-3 pr-6 overflow-y-auto bg-white"
+    h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 p-1 px-2 mb-3"
+      | #{@object.constant}
+    - if @object.superclass
+      = render "objects/sidebar/section", title: 'Parent' do
+        = render "objects/sidebar/section/link",
+            additional_classes: "font-mono text-sm",
+            title: @object.superclass.constant,
+            href: object_path(object: @object.superclass.path)
+    - unless @object.included_modules.empty?
+      = render "objects/sidebar/section", title: 'Included Modules' do
+        ul class="font-mono text-sm"
+          - @object.included_modules.each do |included_module|
+            li
+              = render "objects/sidebar/section/link",
+                  title: included_module.constant,
+                  href: object_path(object: included_module.path)
+    - unless @object.ruby_class_methods.empty?
+      = render "objects/sidebar/section", title: 'Class Methods' do
+        ul class="font-mono text-sm"
+          - @object.ruby_class_methods.each do |m|
+            li
+              = render "objects/sidebar/section/link",
+                  title: ":: #{m.name}", href: "##{method_anchor(m)}"
+    - unless @object.ruby_instance_methods.empty?
+      = render "objects/sidebar/section", title: 'Instance Methods' do
+        ul class="font-mono text-sm"
+          - @object.ruby_instance_methods.each do |m|
+            li
+              = render "objects/sidebar/section/link",
+                  title: "# #{m.name}", href: "##{method_anchor(m)}"