diff --git a/dist/index.html b/dist/index.html
index c5c2f8c..6cfd2a2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,14 +6,14 @@
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
     <title>Dashboard</title>
 
-<link rel="preload" href="/r-dashboard-b0c35e8e84272a79_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
-<link rel="modulepreload" href="/r-dashboard-b0c35e8e84272a79.js"></head>
+<link rel="preload" href="/r-dashboard-afab67e69775a76a_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+<link rel="modulepreload" href="/r-dashboard-afab67e69775a76a.js"></head>
 <body>
     <div id="main"></div>
     <div class="lg:hidden bg-black"></div>
     
 
-<script type="module">import init from '/r-dashboard-b0c35e8e84272a79.js';init('/r-dashboard-b0c35e8e84272a79_bg.wasm');</script><script>(function () {
+<script type="module">import init from '/r-dashboard-afab67e69775a76a.js';init('/r-dashboard-afab67e69775a76a_bg.wasm');</script><script>(function () {
     var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     var url = protocol + '//' + window.location.host + '/_trunk/ws';
     var poll_interval = 5000;
diff --git a/dist/r-dashboard-b0c35e8e84272a79.js b/dist/r-dashboard-afab67e69775a76a.js
similarity index 98%
rename from dist/r-dashboard-b0c35e8e84272a79.js
rename to dist/r-dashboard-afab67e69775a76a.js
index 8ea8a90..5ee23c7 100644
--- a/dist/r-dashboard-b0c35e8e84272a79.js
+++ b/dist/r-dashboard-afab67e69775a76a.js
@@ -1026,24 +1026,24 @@ imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
 imports.wbg.__wbindgen_throw = function(arg0, arg1) {
     throw new Error(getStringFromWasm0(arg0, arg1));
 };
-imports.wbg.__wbindgen_closure_wrapper6679 = function(arg0, arg1, arg2) {
-    const ret = makeMutClosure(arg0, arg1, 726, __wbg_adapter_18);
+imports.wbg.__wbindgen_closure_wrapper6804 = function(arg0, arg1, arg2) {
+    const ret = makeMutClosure(arg0, arg1, 735, __wbg_adapter_18);
     return addHeapObject(ret);
 };
-imports.wbg.__wbindgen_closure_wrapper10290 = function(arg0, arg1, arg2) {
-    const ret = makeClosure(arg0, arg1, 778, __wbg_adapter_21);
+imports.wbg.__wbindgen_closure_wrapper10415 = function(arg0, arg1, arg2) {
+    const ret = makeClosure(arg0, arg1, 787, __wbg_adapter_21);
     return addHeapObject(ret);
 };
-imports.wbg.__wbindgen_closure_wrapper10292 = function(arg0, arg1, arg2) {
-    const ret = makeMutClosure(arg0, arg1, 780, __wbg_adapter_24);
+imports.wbg.__wbindgen_closure_wrapper10417 = function(arg0, arg1, arg2) {
+    const ret = makeMutClosure(arg0, arg1, 789, __wbg_adapter_24);
     return addHeapObject(ret);
 };
-imports.wbg.__wbindgen_closure_wrapper10845 = function(arg0, arg1, arg2) {
-    const ret = makeMutClosure(arg0, arg1, 888, __wbg_adapter_27);
+imports.wbg.__wbindgen_closure_wrapper10970 = function(arg0, arg1, arg2) {
+    const ret = makeMutClosure(arg0, arg1, 897, __wbg_adapter_27);
     return addHeapObject(ret);
 };
-imports.wbg.__wbindgen_closure_wrapper11694 = function(arg0, arg1, arg2) {
-    const ret = makeMutClosure(arg0, arg1, 923, __wbg_adapter_30);
+imports.wbg.__wbindgen_closure_wrapper11819 = function(arg0, arg1, arg2) {
+    const ret = makeMutClosure(arg0, arg1, 932, __wbg_adapter_30);
     return addHeapObject(ret);
 };
 
@@ -1080,7 +1080,7 @@ function initSync(module) {
 
 async function init(input) {
     if (typeof input === 'undefined') {
-        input = new URL('r-dashboard-b0c35e8e84272a79_bg.wasm', import.meta.url);
+        input = new URL('r-dashboard-afab67e69775a76a_bg.wasm', import.meta.url);
     }
     const imports = getImports();
 
diff --git a/dist/r-dashboard-b0c35e8e84272a79_bg.wasm b/dist/r-dashboard-afab67e69775a76a_bg.wasm
similarity index 57%
rename from dist/r-dashboard-b0c35e8e84272a79_bg.wasm
rename to dist/r-dashboard-afab67e69775a76a_bg.wasm
index a24f3f9..6bd3b19 100644
Binary files a/dist/r-dashboard-b0c35e8e84272a79_bg.wasm and b/dist/r-dashboard-afab67e69775a76a_bg.wasm differ
diff --git a/dist/style.css b/dist/style.css
index 79c762c..7e01466 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -885,6 +885,14 @@ select {
   margin-top: 2.5rem;
 }
 
+.ml-8 {
+  margin-left: 2rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mb-3 {
   margin-bottom: 0.75rem;
 }
@@ -917,10 +925,6 @@ select {
   margin-left: 1rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -989,6 +993,10 @@ select {
   height: 3rem;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
 .h-48 {
   height: 12rem;
 }
@@ -997,10 +1005,6 @@ select {
   height: 2.5rem;
 }
 
-.h-3 {
-  height: 0.75rem;
-}
-
 .h-4 {
   height: 1rem;
 }
@@ -1037,14 +1041,14 @@ select {
   width: 3rem;
 }
 
-.w-10 {
-  width: 2.5rem;
-}
-
 .w-3 {
   width: 0.75rem;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -1087,6 +1091,11 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
diff --git a/readme.md b/readme.md
index 63f5bf7..8196435 100644
--- a/readme.md
+++ b/readme.md
@@ -1,5 +1,9 @@
 # v-dashboard ui wasm
-by rust + dioxus + tailwind
+
+by rust + dioxus + tailwindcss
 
 参考vue项目:
-https://github.com/wobsoriano/v-dashboard/
\ No newline at end of file
+https://github.com/wobsoriano/v-dashboard/
+
+
+![screenshot](static/screenshot.jpg)
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
index 80a723d..cfe0b3b 100644
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@@ -1,7 +1,7 @@
 /*
  * @Author: plucky
  * @Date: 2022-10-11 18:53:17
- * @LastEditTime: 2022-10-15 14:17:49
+ * @LastEditTime: 2022-10-16 18:01:09
  * @Description: 
  */
 
@@ -15,7 +15,9 @@ pub fn view(cx:Scope)->Element{
     let route_name = route.last_segment().unwrap_or_default();
 
     let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN);
-    let is_open = use_read(&cx,IS_SIDEBAR_OPEN);
+    let is_sidebar_open = use_read(&cx,IS_SIDEBAR_OPEN);
+
+    let is_menu_open = use_ref(&cx,||vec![false,false]);
 
     let highlight_class = |e:&str|{
         match e == route_name {
@@ -27,22 +29,23 @@ pub fn view(cx:Scope)->Element{
     cx.render(rsx!(
         div{
             class:"flex",
+            // mask
             div{
-                // :class="isOpen ? 'block' : 'hidden'"
-                //  @click="isOpen = false"
                 onclick: move |_| {
                     set_sidebar_open(false);
                 },
                 // class:"fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden",
-                class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_open {"block"} else {"hidden"}),
+                class: format_args!("fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden {}",if *is_sidebar_open {"block"} else {"hidden"}),
                 // hidden: format_args!("{}",!is_open),
 
             } 
             div{
-                //   :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
+                // :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
                 // class:"fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0",
                 class: format_args!("fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}", 
-                if !*is_open { "-translate-x-full ease-in" } else { "translate-x-0 ease-out" }),
+                if !*is_sidebar_open { "-translate-x-full ease-in" } else { "translate-x-0 ease-out" }),
+                
+                // title
                 div {
                     class: "flex items-center justify-center mt-8 ",
                     div {
@@ -54,62 +57,95 @@ pub fn view(cx:Scope)->Element{
                         }
                     }
                 }
-
-                nav{    
+                // menu
+                nav{
                     class: "mt-10",
                     // router-link
                     Link{
-                        class: highlight_class
-                ("dashboard"),
+                        class: highlight_class("dashboard"),
                         //to="/dashboard"
                         to: "/dashboard",
                         icons::icon_2 {}
                         span{class:"mx-4","Dashboard"}
                     }
                     Link{
-                        class: highlight_class
-                ("ui-elements"),
+                        class: highlight_class("ui-elements"),
                         to: "/ui-elements",
                         icons::icon_3 {}
                         span{class:"mx-4","UI Elements"}
                     }
                     Link{
-                        class: highlight_class
-                ("tables"),
+                        class: highlight_class("tables"),
                         to: "/tables",
                         icons::icon_4 {}
                         span{class:"mx-4","Tables"}
                     }
                     Link{
-                        class: highlight_class
-                ("forms"),
+                        class: highlight_class("forms"),
                         to: "/forms",
                         icons::icon_5 {}
                         span{class:"mx-4","Forms"}
                     }
                     Link{
-                        class: highlight_class
-                ("cards"),
+                        class: highlight_class("cards"),
                         to: "/cards",
                         icons::icon_6 {}
                         span{class:"mx-4","Cards"}
                     }
                     Link{
-                        class: highlight_class
-                ("modal"),
+                        class: highlight_class("modal"),
                         to: "/modal",
                         icons::icon_7 {}
                         span{class:"mx-4","Modal"}
                     }
                    
                     Link{
-                        class: highlight_class
-                ("blank"),
+                        class: highlight_class("blank"),
                         to: "/blank",
                         icons::icon_8 {}
                         span{class:"mx-4","Blank"}
                     }
                    
+                    // ul{li{}}
+                    div{
+                        div{
+                            class: "flex items-center px-6 py-2 mt-4 duration-200 border-l-4 border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 cursor-pointer",
+                            onclick: move |_| {
+                                let mut is_menu_open = is_menu_open.write();
+                                is_menu_open[0] = !is_menu_open[0];
+                            },
+
+                            div {
+                                class: "flex items-center space-x-4",
+                                icons::icon_2 {}
+                                span {
+                                    "Test"
+                                }
+                                div{
+                                    class: format_args!{"{}",if is_menu_open.read()[0] {"rotate-180"} else {""}} ,
+                                    icons::icon_up_down {}
+                                }
+                            }
+                        }
+                        
+                        div{
+                            class: format_args!("ml-8 mt-1 {}", if is_menu_open.read()[0] {"block"} else {"hidden"}),
+                            Link{
+                                class: highlight_class("blank"),
+                                to: "/blank",
+                                icons::icon_8 {}
+                                span{class:"mx-4","Blank"}
+                            }
+                            Link{
+                                class: highlight_class("blank2"),
+                                to: "/blank",
+                                icons::icon_8 {}
+                                span{class:"mx-4","Blank"}
+                            }
+                        }
+                        
+                    }
+                    //  end
 
                 }
 
@@ -263,5 +299,15 @@ mod icons{
             </svg>
         ))
     }
+
+    // #[inline_props]
+    pub fn icon_up_down(cx:Scope)->Element{
+        cx.render(html!(
+            <svg class="w-3 h-3"
+                 view_box="0 0 12 12">
+                <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"></path>
+            </svg>
+        ))
+    }
 }
 
