Add expandable/collapsible TOC at the top of the page and restrict the width of the admonition

[MaximilianKohler]

The reason I wanted this is that most people use phones to browse the internet now, and the existing TOC on the right side is geared for desktop users (with wide enough screens). But I don't want to remove the right-side TOC for desktop users. So I'd like to add an additional toc, but not have it expanded by default since there will be multiple TOCs.

I think this would be preferable for phone-users because the "back to top" button (you can also just press the "back" button on the phone) on each page makes it easier to see and use a TOC at the top vs the one that's less obvious in their mobile menu. But I think the right-side TOC is preferable for desktop users.

You can see the basics here #4964 (comment), which includes some screenshots of the default behavior & options.

The default behavior is limited so I asked ChatGPT (since I don't know CSS well) how to customize it more. ChatGPT hallucinated bad info, but @kamilkrzyskow helpfully supplied the answer: #7885 (comment)

Extra.css:

/* Limit the width of admonitions with class 'custom-width' */
.custom-width {
    max-width: 220px;
    margin: 0 auto; /* Center the admonition */
}

I first used this:

??? abstract custom-width "Table of Contents"
    [TOC]

But it includes the page title as the first heading, which is not ideal. A better method is to use this to generate a TOC from the headings and then customize it as you want: https://imthenachoman.github.io/nGitHubTOC/

Here's the outcome: