Collapsed sidebars flash before hiding again

[andres-carvajal]

Greetings,

I want to report a minor issue I noticed with this plugin when sidebars are collapsed: whenever the page is refreshed, sidebars can be seen for less than a second before hiding again. Is it possible to prevent this flashing?

Thanks in advance!

[windmillcode0]

Greetings interestering sorry we didnt see this inquiry in time. I suppose you can make a PR and assist us in this. Less than a second, Most users should not even know that's a thing. I would like to help you but we don't have bandwidth first because we feel that this is not a problem

[InertSloth]

Hi @andres-carvajal, in researching this problem I found the solution. It is because the sidebar is painted very briefly before the javascript has a chance to hide it.

I already have a open PR with this repo for another issue so I'm not ready to put another one together for this fix just yet. Until it gets fixed you can use this dirty patch, it may need a bit of tweaking.

The Dirty Patch

To fix it, you need to move the javascript that adds the collapsed CSS class (which in turn could hide the sidebars) into the HEAD of the page. You can do this in your astro.config.ts starlight's configuration. Since this plugin mostly hides the elements with javascript after paint, and that is a fraction too late, you will have to also add CustomCSS (a starlight feature) to hide the extra elements using CSS instead.

It is okay if the plugin hides them with javascript after they are already hidden with CSS. No harm.

astro.config.ts (or .mjs, etc.)

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightFullViewMode from 'starlight-fullview-mode'

// https://astro.build/config
export default defineConfig({
    integrations: [starlight({
        head: [{"tag": "script", "content": `// Inspired by Apathetic Tools · MIT
// https://github.com/apathetic-tools/snippets/blob/main/docs/astro-starlight/sidebar-toggles
/* global document:readonly, sessionStorage:readonly, console:readonly */
(function () {
    try {
		const savedLeftSidebar = sessionStorage.getItem("mainSideBarCollapsed") === "1";
		if (savedLeftSidebar) {
				document.documentElement.classList.add('main-side-bar-collapsed');
		}
		const savedrightSidebar = sessionStorage.getItem("rightSideBarCollapsed") === "1";
		if (savedrightSidebar) {
				document.documentElement.classList.add('right-side-bar-collapsed');
		}
    } catch (e) {
        // Fail silently if sessionStorage is not available (e.g., privacy mode)
        console.warn("Sidebar state could not be read from sessionStorage:", e);
    }
})();
` }],
    customCSS: ['./src/styles/starlight-fullview-mode-changes.css'],
  }),
  starlightFullViewMode({
           // Configuration options go here.
  })],
});

Note

The above javascript adds the collapsed classes on the HTML element instead of the BODY element like the plugin javascript does. This ensures the element is available before paint. There is no harm in adding it to both elements in this case.

src/styles/starlight-fullview-mode-changes.css

/**
 * Inspired by Apathetic Tools · MIT
 * https://github.com/apathetic-tools/snippets/blob/main/docs/astro-starlight/sidebar-toggles
 * Inspired by Windmillcode/starlight-fullview-mode · MIT
 * https://github.com/Windmillcode/starlight-fullview-mode
 */
.main-side-bar-collapsed .sidebar-content > :not(.toggle-left-side-bar-btn),
.right-side-bar-collapsed .right-sidebar .sl-container > :not(.toggle-right-side-bar-btn) { display: none !important; }
} 

Caution

I've not tested it with this plugin yet, but I adapted it from my "roll your own" sidebar toggles code I made that works. It likely needs more tweaking as I'm not replicating everything the javascript does in the CSS pasted here, like I do in the snippet I'm linking bellow. But this should get you started.

Tip

If you like, I ✂ wrote a guide on how you can roll your own toggles to include some extra bells and whistles, including fixing this issue.

I would highly recommend sticking with this plugin if it does what you need though, no need to take on a lot of extra code just for a few niceties.

If the plugin author wants to use or adapt any of my MIT code with attribution from this thread (or my guide) and roll them into the plugin, that would be fine with me with attribution. I'm not interested in making my own plugin.

- 🦥

[windmillcode0]

@InertSloth I would be happy to collaborate with you and your on your ideas for our plugin. You can reach out to us here if you feel the need to get on a call with https://windmillcode.com/contact.