Update offcanvas references to drawer after rebase

Carry over frontmatter additions to drawer.mdx,
fix DocsLayout ToC to use drawer classes and dialog element,
update navbar.mdx dep title, and fix _toc.scss class name.

Made-with: Cursor

Author: mdo

site/src/content/docs/components/drawer.mdx

@@ -2,6 +2,8 @@
 title: Drawer
 description: Build hidden sidebars or drawers into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. Replaces the old Offcanvas component.
 toc: true
+css_layer: components
+js: required
 ---
 
 ## How it works

site/src/content/docs/components/navbar.mdx

@@ -5,7 +5,7 @@ toc: true
 css_layer: components
 js: required
 deps:
-  - title: Offcanvas
+  - title: Drawer
   - title: Collapse
   - title: Menu
 ---

site/src/layouts/DocsLayout.astro

@@ -116,7 +116,7 @@ if (currentPageIndex < allPages.length - 1) {
         <button
           class="btn-solid theme-secondary rounded-pill px-5"
           type="button"
-          data-bs-toggle="offcanvas"
+          data-bs-toggle="drawer"
           data-bs-target="#bdTocSidebar"
           aria-controls="bdTocSidebar"
         >
@@ -126,13 +126,13 @@ if (currentPageIndex < allPages.length - 1) {
       </div>
 
       <div class="bd-toc mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1">
-        <div class="lg:offcanvas offcanvas-bottom" tabindex="-1" id="bdTocSidebar" aria-labelledby="bdTocOffcanvasLabel">
-          <div class="offcanvas-header border-bottom">
-            <h5 class="offcanvas-title" id="bdTocOffcanvasLabel">On this page</h5>
-            <CloseButton dismiss="offcanvas" target="#bdTocSidebar" />
+        <dialog class="lg:drawer drawer-bottom" tabindex="-1" id="bdTocSidebar" aria-labelledby="bdTocDrawerLabel">
+          <div class="drawer-header border-bottom">
+            <h5 class="drawer-title" id="bdTocDrawerLabel">On this page</h5>
+            <CloseButton dismiss="drawer" target="#bdTocSidebar" />
           </div>
 
-          <div class="offcanvas-body">
+          <div class="drawer-body">
             {
               frontmatter.toc && headings && (
                 <nav id="TableOfContents" aria-label="Table of contents">
@@ -141,7 +141,7 @@ if (currentPageIndex < allPages.length - 1) {
               )
             }
           </div>
-        </div>
+        </dialog>
         <Ads />
       </div>
 

site/src/scss/_toc.scss

@@ -19,7 +19,7 @@
     }
 
     @include media-breakpoint-down(lg) {
-      .lg\:offcanvas {
+      .lg\:drawer {
         border-inline-start-color: var(--bs-border-color);
         box-shadow: var(--bs-box-shadow-lg);
       }