user-auth store frontend css v6

frontend/src/main.rs

@@ -14,9 +14,9 @@ use std::collections::HashMap;
 use wasm_bindgen::closure::Closure;
 use wasm_bindgen::JsCast;
 use web_sys::{Event, EventTarget, HtmlInputElement, KeyboardEvent}; // 0.3.5
-//use gloo_timers::future::TimeoutFuture;
+                                                                    //use gloo_timers::future::TimeoutFuture;
-//#[macro_use]
+                                                                    //#[macro_use]
-//extern crate dotenv_codegen;
+                                                                    //extern crate dotenv_codegen;
 
 #[derive(Deserialize, Serialize, Debug, Default, Clone, PartialEq, Hash, Eq)]
 pub struct BookUI {
@@ -95,6 +95,7 @@ pub struct AppState {
     pub dropdownselect: RcSignal<bool>,
     pub scrolling: RcSignal<bool>,
     pub scrollevent: RcSignal<bool>,
+    pub menuexpand: RcSignal<bool>,
     pub warningmsg: RcSignal<String>,
 }
 
@@ -355,6 +356,11 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
         app_state.dropdownselect.set(true);
     };
 
+    let click_menu_expand = |_| {
+        let app_state = app_state.clone();
+        app_state.menuexpand.set(!(*app_state.menuexpand.get()));
+    };
+
     create_effect(cx, || {
         // Calling checked.set will also update the `checked` property on the input element.
         editchecked.set(*completed.get())
@@ -396,7 +402,7 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                 })
             }
 
-            div(class="w-1/10 flex mb-2"){
+            div(class="w-4/5 md:w-1/10 flex mb-2"){
               (if *app_state.editmode.get() == false {
                   view!{ cx,
     //                                    button(class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center ", on:click=dropdown_userselect) {
@@ -436,10 +442,10 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                     })
     }
 
-            div(class="w-4/5 flex mb-2"){
+            div(class="w-1/10 md:w-4/5 flex mb-2"){
 
-
+            div(class="hidden md:inline-flex"){
-            (if *app_state.editmode.get() == true {
+                (if *app_state.editmode.get() == true {
                   view!{ cx,
 
                 div(class="w-1/2 flex"){
@@ -475,24 +481,28 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
                     )}
                 }
 
-            }} else {
+                }} else {
-                view!{cx,
+                    view!{cx,
-                (if *app_state.userid.get() != 0 {
+                    (if *app_state.userid.get() != 0 {
-                    view!{ cx,
+                        view!{ cx,
-                    button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
+                        button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
-                    div(class="min-w-40 inline-flex"){
+                        div(class="min-w-40 inline-flex"){
-                    input(ref=input_ref2,
+                        input(ref=input_ref2,
-                        class = "inline-flex h-full m-0 p-1 w-full",
+                            class = "inline-flex h-full m-0 p-1 w-full",
-                        placeholder="🔍 Search",
+                            placeholder="🔍 Search",
-                        bind:value=value2,
+                            bind:value=value2,
-                        on:keyup=handle_submit_seachall,
+                            on:keyup=handle_submit_seachall,
-                    )}
+                        )}
-                    }} else {
+                        }} else {
-                    view!{cx, ""}
+                        view!{cx, ""}
-                    })
+                        })
-                    }
+                        }
-            })
+                })
             }
+            div(class="inline-flex md:hidden w-full"){
+                button(on:click=click_menu_expand, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center") { i(class="fa-solid fa-bars") }
+            }
+        }
 
                 div(class="grow flex mb-2 gap-x-1 ml-auto") {
                 PageBar{}
@@ -501,6 +511,133 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
         }
 }
 
+#[component]
+pub fn MenuExpanded<G: Html>(cx: Scope) -> View<G> {
+    let app_state = use_context::<AppState>(cx);
+    let value = create_signal(cx, String::new());
+    let input_ref = create_node_ref(cx);
+
+    let value2 = create_signal(cx, String::new());
+    let input_ref2 = create_node_ref(cx);
+
+    let handle_submit = |event: Event| {
+        let event: KeyboardEvent = event.unchecked_into();
+
+        if event.key() == "Enter" {
+            let mut task = value.get().as_ref().clone();
+            task = task.trim().to_string();
+
+            if !task.is_empty() {
+                app_state.search.set(task.clone());
+                app_state.openlibrary.set(true);
+                app_state.internalsearch.set(false);
+                app_state.refreshing.set(false);
+
+                info!("Fetching search {}\n", task.clone());
+                app_state.books.set(Vec::new());
+                value.set("".to_string());
+                input_ref
+                    .get::<DomNode>()
+                    .unchecked_into::<HtmlInputElement>()
+                    .set_value("");
+            }
+            app_state.menuexpand.set(!(*app_state.menuexpand.get()));
+        }
+    };
+
+    let handle_submit_seachall = |event: Event| {
+        let event: KeyboardEvent = event.unchecked_into();
+
+        if event.key() == "Enter" {
+            let mut task = value2.get().as_ref().clone();
+            task = task.trim().to_string();
+
+            if !task.is_empty() {
+                app_state.search.set(task);
+                app_state.openlibrary.set(false);
+                app_state.internalsearch.set(true);
+                app_state.refreshing.set(true);
+                info!("Fetching search 2\n");
+            }
+            app_state.menuexpand.set(!(*app_state.menuexpand.get()));
+        }
+    };
+
+    let click_listall = |_| {
+        app_state.openlibrary.set(false);
+        app_state.internalsearch.set(false);
+        app_state.refreshing.set(true);
+        app_state.menuexpand.set(!(*app_state.menuexpand.get()));
+    };
+
+    let click_addbook = |_| {
+        app_state.adding.set(true);
+        app_state.updating.set(false);
+        app_state.addingbook.set(BookUI::default());
+        app_state.menuexpand.set(!(*app_state.menuexpand.get()));
+    };
+
+    view! { cx,
+            (if *app_state.menuexpand.get() == true {
+                view!{cx,
+                    header(class="sticky top-50 z-50 flex flex-col bg-slate-400 gap-x-4") {
+                    (if *app_state.editmode.get() == true {
+                    view!{ cx,
+
+                    div(class="w-full flex flex-row mb-4"){
+                    (if *app_state.userid.get() != 0 {
+                        view!{ cx,
+                        button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-40") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
+                        div(class="min-w-40 inline-flex"){
+                        input(ref=input_ref2,
+                            class = "inline-flex h-full m-0 p-1 w-full",
+                            placeholder="🔍 Search",
+                            bind:value=value2,
+                            on:keyup=handle_submit_seachall,
+                        )}
+                        }} else {
+                        view!{cx, ""}
+                        })
+                        }
+                        br{}
+                    div(class="w-full flex flex-row mb-4"){
+                    button(on:click=click_addbook, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center  w-40") { i(class="fa-solid fa-circle-plus") span(class="inline-block"){"Add" }}
+                    div(class="min-w-40 inline-flex"){
+                        input(ref=input_ref,
+                            class = "inline-flex h-full m-0 p-1 w-full",
+                            placeholder="🔍 Internet",
+                            bind:value=value,
+                            on:keyup=handle_submit,
+                        )}
+                    }
+
+                    }} else {
+                        view!{cx,
+                        (if *app_state.userid.get() != 0 {
+                            view!{ cx,
+                            div(class="w-full flex mb-4"){
+
+                            button(on:click=click_listall, class="bg-gray-300 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center w-40") { i(class="fa-solid fa-layer-group") span(class="inline-block"){"All" }}
+                            div(class="min-w-40 inline-flex"){
+                            input(ref=input_ref2,
+                                class = "inline-flex h-full m-0 p-1 w-full",
+                                placeholder="🔍 Search",
+                                bind:value=value2,
+                                on:keyup=handle_submit_seachall,
+                            )}
+                            }}} else {
+                            view!{cx, ""}
+                            })
+                            }
+                    })
+                }
+            }
+        } else {
+            view!{cx, ""}
+        })
+    }
+}
+
 #[component(inline_props)]
 pub fn DropDownUser<G: Html>(cx: Scope, value: StringProp) -> View<G> {
     let app_state = use_context::<AppState>(cx);
@@ -2030,6 +2167,7 @@ fn App<G: Html>(cx: Scope) -> View<G> {
         dropdownselect: create_rc_signal(bool::default()),
         scrolling: create_rc_signal(bool::default()),
         scrollevent: create_rc_signal(bool::default()),
+        menuexpand: create_rc_signal(bool::default()),
         warningmsg: create_rc_signal("".to_string()),
     };
     provide_context(cx, app_state);
@@ -2038,6 +2176,7 @@ fn App<G: Html>(cx: Scope) -> View<G> {
         cx,
         div {
             Header {}
+            MenuExpanded {}
             main(class="relative"){
             LoginScreenUI{}
             AddingUI{}