Mobile view burger Icon to show menu is not working sometimes

[koppor]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Describe the bug

Click on mobile burger does not do anything:

Uncaught TypeError: document.getElementById(...) is null
    <anonymous> https://blog.jabref.org/assets/js/dist/post.min.js:4
    <anonymous> https://blog.jabref.org/assets/js/dist/post.min.js:4

Steps To Reproduce

1. Open https://blog.jabref.org/2024/09/18/JabCon24/
2. Shrink browser size
3. Click on burger menu

Expected Behavior

Burger menu opens

Environment

• Ruby: 3.3 - Source: https://github.com/JabRef/blog.jabref.org/blob/main/.github/workflows/pages-deploy.yml
• Jekyll: ?
• Chirpy: 7.1 - Source: https://github.com/JabRef/blog.jabref.org/blob/main/Gemfile

Anything else?

Follow-up to #1025

[cotes2020]

Hi,

Steps To Reproduce

1. Open https://blog.jabref.org/2024/09/18/JabCon24/
   ...

Can you provide the steps to reproduce the error using the code in this repository?

[koppor]

Hi,

Steps To Reproduce

1. Open https://blog.jabref.org/2024/09/18/JabCon24/
   ...

Can you provide the steps to reproduce the error using the code in this repository?

This will take some hours. I will try!

[subhramit]

Can you provide the steps to reproduce the error using the code in this repository?

Hi Cotes, I am a JabRef developer. I managed to pinpoint the issue to the toc configuration and made minimum working examples:
Buggy: https://github.com/subhramit/chirpy-mwe-buggy
Non-buggy: https://github.com/subhramit/chirpy-mwe-ok

Difference:

The page must have a "##" heading tag:

Now, if the following toc config flag in _config.yml is set to true, then there is no issue:

jekyll-theme-chirpy/_config.yml

Lines 107 to 108 in 93f616b

	# boolean type, the global switch for TOC in posts.
	toc: true

However, when it is set to false, the hamburger menu doesn't work.
It is as if the presence of toc is required for the hamburger menu to work, which is a strange association:

More details:
On the buggy pages, when the page opens, we observe the following error on inspecting:

Which comes from the part marked "2" in the following code from post.min.js:

Part "1" bugs out when we click the hamburger menu (as described in the issue description).

It is as if the following section (in post.min.js) is trying to initialize the headings into a toc element that does not exist (in the buggy version with toc flag set to false):

document.querySelector("main h2, main h3") && (tocbot.init({
    tocSelector: "#toc",
    contentSelector: ".content",
    ignoreSelector: "[data-toc-skip]",
    headingSelector: "h2, h3, h4",
    orderedList: !1,
    scrollSmooth: !1
}),
document.getElementById("toc-wrapper").classList.remove("d-none"))

I hope this helps!

[github-actions]

🎉 This issue has been resolved in version 7.2.0 🎉

The release is available on:

• v7.2.0
• GitHub release

Your semantic-release bot 📦🚀