feat: The scrollable prop of DrawerBody is changed to native_scrollbar (

#318)

thaw/src/drawer/docs/mod.md

@@ -216,8 +216,8 @@ view! {
 
 ### DrawerBody Props
 
-| Name       | Type                | Default              | Description                              |
-| ---------- | ------------------- | -------------------- | ---------------------------------------- |
-| class      | `MaybeProp<String>` | `Default::default()` |                                          |
-| scrollable | `bool`              | `true`               | Allows the drawer body to be scrollable. |
-| children   | `Children`          |                      |                                          |
+| Name             | Type                | Default              | Description                                |
+| ---------------- | ------------------- | -------------------- | ------------------------------------------ |
+| class            | `MaybeProp<String>` | `Default::default()` |                                            |
+| native_scrollbar | `bool`              | `false`              | Whether to use native scrollbar on itself. |
+| children         | `Children`          |                      |                                            |

thaw/src/drawer/drawer.css

@@ -44,6 +44,10 @@
     overflow: auto;
 }
 
+.thaw-drawer-body:first-child {
+    padding-top: calc(var(--spacingHorizontalXXL) + 1px);
+}
+
 .thaw-drawer-body:last-child {
     padding-bottom: calc(var(--spacingHorizontalXXL) + 1px);
 }

thaw/src/drawer/drawer_body.rs

@@ -1,24 +1,24 @@
-use leptos::prelude::*;
-use thaw_utils::class_list;
-
 use crate::Scrollbar;
+use leptos::{either::Either, prelude::*};
+use thaw_utils::class_list;
 
 #[component]
 pub fn DrawerBody(
     #[prop(optional, into)] class: MaybeProp<String>,
-    #[prop(default = true)] scrollable: bool,
+    /// Whether to use native scrollbar on itself.
+    #[prop(optional)]
+    native_scrollbar: bool,
     children: Children,
 ) -> impl IntoView {
-    match scrollable {
-        true => view! {
-            <Scrollbar>
-                <div class=class_list!["thaw-drawer-body", class]>{children()}</div>
-            </Scrollbar>
-        }
-        .into_any(),
-        false => view! {
-            <div class=class_list!["thaw-drawer-body", class]>{children()}</div>
-        }
-        .into_any(),
+    view! {
+        <div class=class_list![
+            "thaw-drawer-body", class
+        ]>
+            {if native_scrollbar {
+                Either::Left(children())
+            } else {
+                Either::Right(view! { <Scrollbar>{children()}</Scrollbar> })
+            }}
+        </div>
     }
 }