mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
google-labs-jules[bot]andPR0M3TH3AN
e6e3b47fce
- Replaced text-based "Show/Hide" sidebar toggles with SVG chevron icons. - Added a hamburger menu icon to the "Contents" button on mobile view. - Updated `js/docsView.js` to handle icon toggling and properly hide flex container elements using the `.hidden` class. - Improved accessibility by maintaining `aria-expanded` attributes. Co-authored-by: PR0M3TH3AN <[email protected]>
77 lines
2.5 KiB
HTML
77 lines
2.5 KiB
HTML
<!-- views/docs.html -->
|
|
<section class="bv-stack" data-ds="new" aria-labelledby="docsHeading">
|
|
<article class="card p-lg">
|
|
<div class="flex flex-col gap-lg lg:flex-row">
|
|
<nav
|
|
id="docsToc"
|
|
class="bv-stack bv-stack--tight hidden lg:block lg:w-64 lg:shrink-0"
|
|
aria-label="Table of contents"
|
|
>
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-muted">On this page</p>
|
|
<div id="docsTocList" class="bv-stack bv-stack--tight text-sm text-muted">
|
|
Loading contents...
|
|
</div>
|
|
</nav>
|
|
<main id="docsContent" class="bv-stack bv-stack--tight flex-1">
|
|
<header class="flex flex-wrap items-center justify-between gap-2">
|
|
<h2 id="docsHeading" class="text-2xl font-semibold text-text-strong">
|
|
Docs
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
class="btn-ghost lg:hidden flex items-center gap-2"
|
|
aria-controls="docsTocDrawer"
|
|
aria-expanded="false"
|
|
data-docs-toc-toggle
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
</svg>
|
|
<span>Contents</span>
|
|
</button>
|
|
</header>
|
|
<div id="markdown-container" class="markdown-prose">
|
|
<p class="text-muted-strong">Loading content...</p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</article>
|
|
<div
|
|
id="docsTocDrawer"
|
|
class="bv-modal hidden lg:hidden items-stretch justify-end"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Documentation table of contents"
|
|
data-docs-toc-drawer
|
|
data-open="false"
|
|
>
|
|
<div class="bv-modal-backdrop" data-dismiss></div>
|
|
<div class="bv-modal__panel modal-sheet w-full max-w-sm" data-docs-toc-panel>
|
|
<div class="bv-stack bv-stack--tight">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-muted">On this page</p>
|
|
<button type="button" class="btn-ghost btn-xs" data-dismiss>
|
|
Close
|
|
</button>
|
|
</div>
|
|
<nav
|
|
id="docsTocDrawerNav"
|
|
class="bv-stack bv-stack--tight"
|
|
aria-label="Table of contents"
|
|
></nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|