sidebar safari flex

2022-10-17 09:32:20 +08:00
parent 60d9b68dc1
commit 6e1b811c07
8 changed files with 122 additions and 143 deletions
--- 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-436bab45f7450582_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
-<link rel="modulepreload" href="/r-dashboard-436bab45f7450582.js"></head>
+<link rel="preload" href="/r-dashboard-62a84ba8161e70ff_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+<link rel="modulepreload" href="/r-dashboard-62a84ba8161e70ff.js"></head>
 <body>
    <div id="main"></div>
    <div class="lg:hidden bg-black"></div>
    

-<script type="module">import init from '/r-dashboard-436bab45f7450582.js';init('/r-dashboard-436bab45f7450582_bg.wasm');</script><script>(function () {
+<script type="module">import init from '/r-dashboard-62a84ba8161e70ff.js';init('/r-dashboard-62a84ba8161e70ff_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;
--- a/dist/r-dashboard-62a84ba8161e70ff.js
+++ b/dist/r-dashboard-62a84ba8161e70ff.js
@@ -1026,23 +1026,23 @@ 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_wrapper6803 = function(arg0, arg1, arg2) {
+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_wrapper10414 = function(arg0, arg1, arg2) {
+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_wrapper10416 = function(arg0, arg1, arg2) {
+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_wrapper10969 = function(arg0, arg1, arg2) {
+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_wrapper11818 = function(arg0, arg1, arg2) {
+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-436bab45f7450582_bg.wasm', import.meta.url);
+        input = new URL('r-dashboard-62a84ba8161e70ff_bg.wasm', import.meta.url);
    }
    const imports = getImports();

--- a/dist/r-dashboard-62a84ba8161e70ff_bg.wasm
+++ b/dist/r-dashboard-62a84ba8161e70ff_bg.wasm
--- a/dist/style.css
+++ b/dist/style.css
@@ -1035,10 +1035,6 @@ select{
  width: 1.25rem;
 }

-.w-64{
-  width: 16rem;
-}
-
 .w-12{
  width: 3rem;
 }
--- a/readme.md
+++ b/readme.md
@@ -1,4 +1,4 @@
-# v-dashboard ui wasm
+# dashboard ui wasm

 by rust + dioxus + tailwindcss

--- a/src/components/header.rs
+++ b/src/components/header.rs
@@ -4,8 +4,6 @@ use tracing::info;
 use super::sidebar::IS_SIDEBAR_OPEN;

 pub fn view(cx: Scope)->Element{
-    //const dropdownOpen = ref(false);
-    //const { isOpen } = useSidebar();
    let set_sidebar_open = use_set(&cx,IS_SIDEBAR_OPEN);
    let dropdown_open = use_state(&cx, || true);
   
@@ -66,8 +64,6 @@ pub fn view(cx: Scope)->Element{
                    }
                    div{
                        class:"fixed inset-0 z-10 w-full h-full",//
-                        // v-show: "dropdownOpen",
-                        //@click=\"dropdownOpen = false\"
                        // 点击屏幕关闭菜单
                        hidden: "{dropdown_open}",
                        onclick: move |_| {
@@ -76,18 +72,8 @@ pub fn view(cx: Scope)->Element{
                       
                    }
                
-        //   <transition
-        //   enter-active-class="transition duration-150 ease-out transform"
-        //   enter-from-class="scale-95 opacity-0"
-        //   enter-to-class="scale-100 opacity-100"
-        //   leave-active-class="transition duration-150 ease-in transform"
-        //   leave-from-class="scale-100 opacity-100"
-        //   leave-to-class="scale-95 opacity-0"
-        // >
-                
                    div{
                        class:"absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl {dropdown_class}",
-                        // v-show: "dropdownOpen",
                        hidden: "{dropdown_open}",
                        //onmouseout onmouseover
                        onmouseout: move |_| {
@@ -115,7 +101,6 @@ pub fn view(cx: Scope)->Element{
                    }
                }
                
-              // </transition>
            }
        }
        
--- 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-17 00:51:09
+ * @LastEditTime: 2022-10-17 09:22:09
 * @Description: 
 */

@@ -27,130 +27,128 @@ pub fn view(cx:Scope)->Element{
    };

    cx.render(rsx!(
+        //  class: format_args!("flex  {} bg-gray-900  ",if *is_sidebar_open { "" } else { "hidden lg:block" }),
+        // mask
        div{
-            class: format_args!("flex  {} lg:block bg-gray-900  ",if *is_sidebar_open { "block" } else { "hidden" }),
-            // mask
-            div{
-                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_sidebar_open {"block"} else {"hidden"}),
-                // hidden: format_args!("{}",!is_sidebar_open),
+            onclick: move |_| {
+                set_sidebar_open(false);
+            },
+            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_sidebar_open),

-            } 
-            div{
-                // :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_sidebar_open { "translate-x-0 ease-out " } else {"-translate-x-full ease-in"  }),
-                
-                // title
+        }
+
+        // sidebar
+        div{
+            class: format_args!("fixed inset-y-0 left-0 z-30 w-48 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0 {}", 
+            if *is_sidebar_open { "translate-x-0 ease-out " } else {"-translate-x-full ease-in"  }),
+            
+            // title
+            div {
+                class: "flex items-center justify-center mt-8 ",
                div {
-                    class: "flex items-center justify-center mt-8 ",
-                    div {
-                        class: "flex items-center",
-                        icons::icon_1 {}
-                        span {
-                            class: "mx-2 text-2xl font-semibold text-white",
-                            "Dashboard"
-                        }
+                    class: "flex items-center",
+                    icons::icon_1 {}
+                    span {
+                        class: "mx-2 text-2xl font-semibold text-white",
+                        "Dashboard"
                    }
                }
-                // menu
-                nav{
-                    class: "mt-10 ",//
-                    // router-link
-                    Link{
-                        class: highlight_class("dashboard"),
-                        //to="/dashboard"
-                        to: "/dashboard",
-                        icons::icon_2 {}
-                        span{class:"mx-4","Dashboard"}
-                    }
-                    Link{
-                        class: highlight_class("ui-elements"),
-                        to: "/ui-elements",
-                        icons::icon_3 {}
-                        span{class:"mx-4","UI Elements"}
-                    }
-                    Link{
-                        class: highlight_class("tables"),
-                        to: "/tables",
-                        icons::icon_4 {}
-                        span{class:"mx-4","Tables"}
-                    }
-                    Link{
-                        class: highlight_class("forms"),
-                        to: "/forms",
-                        icons::icon_5 {}
-                        span{class:"mx-4","Forms"}
-                    }
-                    Link{
-                        class: highlight_class("cards"),
-                        to: "/cards",
-                        icons::icon_6 {}
-                        span{class:"mx-4","Cards"}
-                    }
-                    Link{
-                        class: highlight_class("modal"),
-                        to: "/modal",
-                        icons::icon_7 {}
-                        span{class:"mx-4","Modal"}
-                    }
-                   
-                    Link{
-                        class: highlight_class("blank"),
-                        to: "/blank",
-                        icons::icon_8 {}
-                        span{class:"mx-4","Blank"}
-                    }
-                   
-                    // ul{li{}}
+            }
+            // menu
+            nav{
+                class: "mt-10 ",//
+                // router-link
+                Link{
+                    class: highlight_class("dashboard"),
+                    //to="/dashboard"
+                    to: "/dashboard",
+                    icons::icon_2 {}
+                    span{class:"mx-4","Dashboard"}
+                }
+                Link{
+                    class: highlight_class("ui-elements"),
+                    to: "/ui-elements",
+                    icons::icon_3 {}
+                    span{class:"mx-4","UI Elements"}
+                }
+                Link{
+                    class: highlight_class("tables"),
+                    to: "/tables",
+                    icons::icon_4 {}
+                    span{class:"mx-4","Tables"}
+                }
+                Link{
+                    class: highlight_class("forms"),
+                    to: "/forms",
+                    icons::icon_5 {}
+                    span{class:"mx-4","Forms"}
+                }
+                Link{
+                    class: highlight_class("cards"),
+                    to: "/cards",
+                    icons::icon_6 {}
+                    span{class:"mx-4","Cards"}
+                }
+                Link{
+                    class: highlight_class("modal"),
+                    to: "/modal",
+                    icons::icon_7 {}
+                    span{class:"mx-4","Modal"}
+                }
+                
+                Link{
+                    class: highlight_class("blank"),
+                    to: "/blank",
+                    icons::icon_8 {}
+                    span{class:"mx-4","Blank"}
+                }
+                
+                // ul{li{}}
+                div{
                    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];
-                            },
+                        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: "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
-
+                    
+                    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

            }

+            
+
        }
    ))
    
@@ -304,7 +302,8 @@ mod icons{
    pub fn icon_up_down(cx:Scope)->Element{
        cx.render(html!(
            <svg class="w-3 h-3"
-                 view_box="0 0 12 12">
+                fill="currentColor"
+                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>
        ))
--- a/src/views/dashboard.rs
+++ b/src/views/dashboard.rs
@@ -1,7 +1,7 @@
 /*
 * @Author: plucky
 * @Date: 2022-10-14 12:31:43
- * @LastEditTime: 2022-10-14 23:48:22
+ * @LastEditTime: 2022-10-17 09:02:01
 * @Description: 
 */

@@ -142,7 +142,6 @@ pub fn view(cx: Scope)->Element{
                            // 表格数据
                            tbody {
                                class: "bg-white",
-                                // "<tr v-for=\"(u, index) in users\" :key=\"index\">"
                                users.iter().map(|u|{
                                    rsx!{ UserList{user:u}}
                                })