Improvements to sidebar on mobile with swup

* Make sure the sidebar does not flash on load * Close the sidebar on click on mobile
elixir-lang · Dec 24, 2024 · 3b27838 · 3b27838
1 parent 419e935
commit 3b27838
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 74 deletions.
diff --git a/assets/js/entry/html.js b/assets/js/entry/html.js
@@ -3,9 +3,9 @@ import '../handlebars/helpers'
 import { onDocumentReady } from '../helpers'
 import { initialize as initTabsets } from '../tabsets'
 import { initialize as initContent } from '../content'
-import { initialize as initSidebarDrawer } from '../sidebar/sidebar-drawer'
-import { initialize as initSidebarContent } from '../sidebar/sidebar-list'
-import { initialize as initSidebarSearch } from '../search-bar'
+import { initialize as initSidebarDrawer, update as updateSidebarDrawer } from '../sidebar/sidebar-drawer'
+import { initialize as initSidebarContent, update as updateSidebarContent } from '../sidebar/sidebar-list'
+import { initialize as initSearch } from '../search-bar'
 import { initialize as initVersions } from '../sidebar/sidebar-version-select'
 import { initialize as initSearchPage } from '../search-page'
 import { initialize as initTheme } from '../theme'
@@ -51,7 +51,8 @@ onDocumentReady(() => {
         },
         hooks: {
           'page:view': () => {
-            initSidebarContent()
+            updateSidebarDrawer()
+            updateSidebarContent()
             initSearchPage()
           }
         },
@@ -63,7 +64,7 @@ onDocumentReady(() => {
     initVersions()
     initSidebarDrawer()
     initSidebarContent()
-    initSidebarSearch()
+    initSearch()
     initModal()
     initKeyboardShortcuts()
     initQuickSwitch()

diff --git a/assets/js/sidebar/sidebar-drawer.js b/assets/js/sidebar/sidebar-drawer.js
@@ -33,15 +33,16 @@ const state = {
   sidebarPreference: userPref.NO_PREF
 }
 
-/**
- * Initializes the toggleable sidebar drawer.
- */
 export function initialize () {
   setDefaultSidebarState()
   observeResizing()
   addEventListeners()
 }
 
+export function update () {
+  setDefaultSidebarState()
+}
+
 function observeResizing () {
   const sidebarWidth = sessionStorage.getItem('sidebar_width')
 

diff --git a/assets/js/sidebar/sidebar-list.js b/assets/js/sidebar/sidebar-list.js
@@ -8,26 +8,22 @@ const SIDEBAR_TYPE = {
   tasks: 'tasks'
 }
 
-let sidebarInitialized = false
-
 const SIDEBAR_TAB_TYPES = [SIDEBAR_TYPE.extras, SIDEBAR_TYPE.modules, SIDEBAR_TYPE.tasks]
 const sidebarNodeListSelector = type => `#${type}-full-list`
 
-/**
- * Initializes the sidebar navigation list.
- */
 export function initialize () {
+  update()
+  addEventListeners()
+}
+
+export function update () {
   SIDEBAR_TAB_TYPES.forEach(type => {
     renderSidebarNodeList(getSidebarNodes(), type)
   })
 
   markActiveSidebarTab(getCurrentPageSidebarType())
   markCurrentHashInSidebar()
   scrollNodeListToCurrentCategory()
-
-  if (sidebarInitialized) return
-  sidebarInitialized = true
-  addEventListeners()
 }
 
 /**

diff --git a/formatters/html/dist/html-HURPSPNJ.js b/formatters/html/dist/html-HURPSPNJ.js
diff --git a/formatters/html/dist/html-XFWJYN4N.js b/formatters/html/dist/html-XFWJYN4N.js
diff --git a/lib/ex_doc/formatter/html/templates/head_template.eex b/lib/ex_doc/formatter/html/templates/head_template.eex
@@ -24,7 +24,7 @@
     <script async src="<%= asset_rev config.output, "dist/html-*.js" %>"></script>
     <%= before_closing_head_tag(config, :html) %>
   </head>
-  <body>
+  <body class="sidebar-closed">
     <script>
       <% # Immediately apply night mode preference to avoid a flash effect %>
       try {