feat: nav slot

demo/src/pages/components.rs

@@ -58,13 +58,22 @@ pub fn ComponentsPage() -> impl IntoView {
         <Layout position=LayoutPosition::Absolute>
             <SiteHeader/>
             <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
-                <LayoutSider class="demo-components__sider">
+                <div class="demo-components__sider">
                     <NavDrawer selected_value=select_name>
 
                         {gen_menu_data().into_view()}
-
+                        <NavDrawerFooter slot>
+                            <Button
+                                appearance=ButtonAppearance::Subtle
+                                icon=icondata::AiGithubOutlined
+                                style="font-size: 22px; padding: 0px 6px;"
+                                on_click=move |_| {
+                                    _ = window().open_with_url("http://github.com/thaw-ui/thaw");
+                                }
+                            />
+                        </NavDrawerFooter>
                     </NavDrawer>
-                </LayoutSider>
+                </div>
                 <Layout content_style="padding: 8px 12px 28px; display: flex;" class="doc-content">
                     <Outlet/>
                 </Layout>

thaw/src/nav/nav-drawer.css

@@ -23,6 +23,15 @@
     /* overflow: auto; */
 }
 
+.thaw-nav-drawer__footer {
+    width: 100%;
+    max-width: 100%;
+    padding: 0 var(--spacingVerticalMNudge);
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+}
+
 .thaw-nav-item {
     display: flex;
     text-transform: none;

thaw/src/nav/nav_drawer.rs

@@ -1,24 +1,46 @@
 use leptos::*;
+use thaw_components::OptionComp;
 use thaw_utils::{mount_style, Model};
+use crate::Scrollbar;
 
 #[component]
 pub fn NavDrawer(
     #[prop(optional, into)] selected_value: Model<String>,
     children: Children,
+    #[prop(optional)] nav_drawer_header: Option<NavDrawerHeader>,
+    #[prop(optional)] nav_drawer_footer: Option<NavDrawerFooter>,
 ) -> impl IntoView {
     mount_style("nav-drawer", include_str!("./nav-drawer.css"));
 
     view! {
         <Provider value=NavDrawerInjection(selected_value)>
             <div class="thaw-nav-drawer">
+                <OptionComp value=nav_drawer_header let:header>
+                    <header class="thaw-nav-drawer__header">{(header.children)()}</header>
+                </OptionComp>
                 <div class="thaw-nav-drawer__body">
-                    {children()}
+                    <Scrollbar>
+                        {children()}
+                    </Scrollbar>
                 </div>
+                <OptionComp value=nav_drawer_footer let:footer>
+                    <footer class="thaw-nav-drawer__footer">{(footer.children)()}</footer>
+                </OptionComp>
             </div>
         </Provider>
     }
 }
 
+#[slot]
+pub struct NavDrawerHeader {
+    children: Children,
+}
+
+#[slot]
+pub struct NavDrawerFooter {
+    children: Children,
+}
+
 #[derive(Clone)]
 pub(crate) struct NavDrawerInjection(pub Model<String>);