Skip to content

Commit 704db11

Browse files
AlexWayferAlexWayfer
committed
Add (toggleable) sidebar for small screens
1 parent 0c545c4 commit 704db11

File tree

6 files changed

+90
-38
lines changed

6 files changed

+90
-38
lines changed

‎app/helpers/application_helper.rb

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@ def homepage?
1515
end
1616
end
1717

18+
def object_page?
19+
return(@is_object_page) if defined?(@is_object_page)
20+
21+
@is_object_page = begin
22+
params[:controller] == "objects" && params[:action] == "show"
23+
end
24+
end
25+
1826
# Map a method source file into a url to Github.com
1927
def github_url(ruby_doc)
2028
version, file, line = ruby_doc.source_location.split(":")

‎app/javascript/controllers/sidebar_toggle_controller.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Controller } from "stimulus"
2+
3+
export default class extends Controller {
4+
static targets = ["versionList", "versionOverlay"]
5+
6+
toggle() {
7+
document.body.classList.toggle('sidebar-opened')
8+
}
9+
10+
close() {
11+
document.body.classList.remove('sidebar-opened')
12+
}
13+
}

‎app/javascript/packs/app/application.scss

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ p {
2727
overflow-wrap: break-word;
2828
}
2929

30-
.h-93 {
31-
height: calc(100vh - 7rem)!important;
30+
.h-96 {
31+
height: calc(100vh - 4rem)!important;
3232
}
3333

3434
code {
@@ -71,4 +71,34 @@ pre:not(.ruby) {
7171
}
7272
}
7373

74+
body {
75+
.sidebar-wrapper {
76+
background: rgba(black, 0.5);
77+
78+
@screen lg {
79+
background: transparent;
80+
}
81+
}
82+
83+
&:not(.sidebar-opened) {
84+
.sidebar-wrapper {
85+
display: none;
86+
87+
@screen lg {
88+
display: block;
89+
}
90+
}
91+
}
92+
93+
&.sidebar-opened {
94+
overflow: hidden;
95+
height: 100vh;
96+
97+
@screen lg {
98+
overflow: initial;
99+
height: initial;
100+
}
101+
}
102+
}
103+
74104
/* purgecss end ignore */

‎app/javascript/packs/icons.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { library, dom } from '@fortawesome/fontawesome-svg-core'
2-
import { faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faHistory, faCheck } from '@fortawesome/free-solid-svg-icons'
3-
import { faPlay, faSync, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
2+
import { faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faHistory, faCheck, faPlay, faSync, faInfoCircle, faBars } from '@fortawesome/free-solid-svg-icons'
43
import { faCopy } from '@fortawesome/free-regular-svg-icons'
54
import { faGithub, faTwitter } from '@fortawesome/free-brands-svg-icons'
65

7-
library.add(faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faGithub, faTwitter, faHistory, faPlay, faCopy, faCheck, faSync, faInfoCircle)
6+
library.add(faSearch, faCaretDown, faLink, faFastForward, faFastBackward, faForward, faBackward, faGithub, faTwitter, faHistory, faPlay, faCopy, faCheck, faSync, faInfoCircle, faBars)
87

98
dom.watch()

‎app/views/layouts/_header.html.slim

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22
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?}"
33
nav class="w-full max-w-screen-xl mx-auto" role="navigation" aria-label="main navigation"
44
div class="flex items-center justify-between #{homepage? ? 'px-6' : 'px-3'}"
5-
div class="lg:w-2/12 w-2/12"
5+
div class="flex lg:w-2/12 md:w-3/12 w-4/12"
6+
- if object_page?
7+
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"
8+
i class="fas fa-bars"
69
= render 'layouts/logo'
7-
div class="lg:w-5/12 md:w-6/12 w-8/12"
10+
div class="lg:w-5/12 md:w-6/12 w-6/12"
811
= render 'layouts/search_form' unless homepage?
912
div class="#{homepage? ? 'md:w-2/12 w-6/12' : 'w-2/12'}"
1013
div class="flex flex-row-reverse"

‎app/views/objects/_sidebar.html.slim

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
1-
div class="hidden lg:block w-1/4"
2-
div class="hidden lg:block lg:sticky pt-1 top-0"
3-
div class="overflow-y-auto mt-24 pl-3 pr-6 h-93"
4-
- if @object.superclass
5-
= render "objects/sidebar/section", title: 'Parent' do
6-
= render "objects/sidebar/section/link",
7-
additional_classes: "font-mono text-sm",
8-
title: @object.superclass.constant,
9-
href: object_path(object: @object.superclass.path)
10-
- unless @object.included_modules.empty?
11-
= render "objects/sidebar/section", title: 'Included Modules' do
12-
ul class="font-mono text-sm"
13-
- @object.included_modules.each do |included_module|
14-
li
15-
= render "objects/sidebar/section/link",
16-
title: included_module.constant,
17-
href: object_path(object: included_module.path)
18-
- unless @object.ruby_methods.select(&:class_method?).empty?
19-
= render "objects/sidebar/section", title: 'Class Methods' do
20-
ul class="font-mono text-sm"
21-
- @object.ruby_methods.select(&:class_method?).sort_by(&:name).each do |m|
22-
li
23-
= render "objects/sidebar/section/link",
24-
title: ":: #{m.name}", href: "##{method_anchor(m)}"
25-
- unless @object.ruby_methods.select(&:instance_method?).empty?
26-
= render "objects/sidebar/section", title: 'Instance Methods' do
27-
ul class="font-mono text-sm"
28-
- @object.ruby_methods.select(&:instance_method?).sort_by(&:name).each do |m|
29-
li
30-
= render "objects/sidebar/section/link",
31-
title: "# #{m.name}", href: "##{method_anchor(m)}"
1+
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"
2+
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"
3+
- if @object.superclass
4+
= render "objects/sidebar/section", title: 'Parent' do
5+
= render "objects/sidebar/section/link",
6+
additional_classes: "font-mono text-sm",
7+
title: @object.superclass.constant,
8+
href: object_path(object: @object.superclass.path)
9+
- unless @object.included_modules.empty?
10+
= render "objects/sidebar/section", title: 'Included Modules' do
11+
ul class="font-mono text-sm"
12+
- @object.included_modules.each do |included_module|
13+
li
14+
= render "objects/sidebar/section/link",
15+
title: included_module.constant,
16+
href: object_path(object: included_module.path)
17+
- unless @object.ruby_methods.select(&:class_method?).empty?
18+
= render "objects/sidebar/section", title: 'Class Methods' do
19+
ul class="font-mono text-sm"
20+
- @object.ruby_methods.select(&:class_method?).sort_by(&:name).each do |m|
21+
li
22+
= render "objects/sidebar/section/link",
23+
title: ":: #{m.name}", href: "##{method_anchor(m)}"
24+
- unless @object.ruby_methods.select(&:instance_method?).empty?
25+
= render "objects/sidebar/section", title: 'Instance Methods' do
26+
ul class="font-mono text-sm"
27+
- @object.ruby_methods.select(&:instance_method?).sort_by(&:name).each do |m|
28+
li
29+
= render "objects/sidebar/section/link",
30+
title: "# #{m.name}", href: "##{method_anchor(m)}"

0 commit comments

Comments
 (0)