26 lines
1.2 KiB
JavaScript
26 lines
1.2 KiB
JavaScript
/**
|
|
* layout-init.js — runs synchronously in <head> before body renders.
|
|
*
|
|
* Sets html.is-mobile or html.is-desktop immediately so CSS scoped to
|
|
* those classes takes effect on the very first paint. No flash, no
|
|
* layout shift, works on Chrome and Safari equally.
|
|
*
|
|
* Also restores the sidebar collapsed state on desktop so the sidebar
|
|
* width is correct from the very first frame.
|
|
*
|
|
* Must be loaded with NO defer/async attribute so it blocks parsing
|
|
* until it runs — that's intentional and necessary.
|
|
*/
|
|
(function () {
|
|
var isMobile = window.matchMedia('(max-width: 768px)').matches;
|
|
document.documentElement.classList.add(isMobile ? 'is-mobile' : 'is-desktop');
|
|
|
|
// On desktop, restore collapsed state from localStorage so the sidebar
|
|
// renders at the correct width without any visual jump.
|
|
if (!isMobile && localStorage.getItem('sidebar_collapsed') === '1') {
|
|
// We can't set it on #sidebar yet (body not parsed), so we use a
|
|
// temporary html class that CSS can target, then vault.js adds
|
|
// .collapsed to the sidebar element on DOMContentLoaded.
|
|
document.documentElement.classList.add('sidebar-will-collapse');
|
|
}
|
|
})(); |