add styling and fix insights page

The-DevBlog · Feb 18, 2024 · 8bec5e5 · 8bec5e5
1 parent c34e762
commit 8bec5e5
Show file tree

Hide file tree

Showing 13 changed files with 211 additions and 85 deletions.
diff --git a/devblog/devblog/client/index.html b/devblog/devblog/client/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TheDevBlog</title>
     <link data-trunk rel="copy-dir" href="assets/" />
-    <link data-trunk rel="copy-file" href="assets/imgs/me.png" />
 </head>
 
 </html>
diff --git a/devblog/devblog/client/src/components/comment.rs b/devblog/devblog/client/src/components/comment.rs
@@ -6,7 +6,6 @@ use crate::{
     CommentModel,
 };
 use chrono::{Local, TimeZone};
-use gloo::console::log;
 use stylist::Style;
 use yew::{function_component, html, use_state, Callback, Html, Properties};
 use yewdux::use_store_value;
@@ -36,7 +35,6 @@ pub fn comment(props: &Props) -> Html {
 
     let content_clone = content.clone();
     let on_edit_save = move |value: String| {
-        log!("SAVE EDIT COMMENT");
         content_clone.set(value);
     };
 
@@ -65,19 +63,21 @@ pub fn comment(props: &Props) -> Html {
                     <div class={"date"}>
                         <span>{date.to_string()}</span>
                     </div>
+                </div>
 
-                    // EDIT COMMENT
-                    if *is_editing && props.comment.username == store.username {
-                        <EditComment id={props.comment.id}
-                            content={props.comment.content.clone()}
-                            is_editing={*is_editing}
-                            on_is_editing={on_is_editing}
-                            on_edit_save={on_edit_save}/>
-                    }
+                // EDIT COMMENT
+                if *is_editing && props.comment.username == store.username {
+                    <EditComment id={props.comment.id}
+                        content={props.comment.content.clone()}
+                        is_editing={*is_editing}
+                        on_is_editing={on_is_editing}
+                        on_edit_save={on_edit_save}/>
+                }
 
-                    // CONTENT
+                // CONTENT
+                if !*is_editing {
                     <p>{content.deref()}</p>
-                </div>
+                }
             </div>
         </div>
     }

diff --git a/devblog/devblog/client/src/components/comment_edit.rs b/devblog/devblog/client/src/components/comment_edit.rs
@@ -72,23 +72,25 @@ pub fn edit_comment(props: &Props) -> Html {
     };
 
     html! {
-        <div class={style}>
-            if !props.is_editing {
-                <span class="edit-comment-btn" onclick={edit}>
-                    <EditIcon />
-                </span>
-            }
+        <>
+            <div class={style}>
+                if !props.is_editing {
+                    <span class="edit-comment-btn" onclick={edit}>
+                        <EditIcon />
+                    </span>
+                }
 
-            if props.is_editing {
-                <div class="edit-comment">
-                    <textarea value={props.content.clone()} {onchange}></textarea>
+                if props.is_editing {
+                    <div class="edit-comment">
+                        <textarea value={props.content.clone()} {onchange}></textarea>
 
-                    <div>
-                        <button onclick={save}>{"Save"}</button>
-                        <button onclick={cancel}>{"Cancel"}</button>
+                        <div>
+                            <button onclick={save}>{"Save"}</button>
+                            <button onclick={cancel}>{"Cancel"}</button>
+                        </div>
                     </div>
-                </div>
-            }
-        </div>
+                }
+            </div>
+        </>
     }
 }
diff --git a/devblog/devblog/client/src/components/navbar.rs b/devblog/devblog/client/src/components/navbar.rs
@@ -1,4 +1,4 @@
-use crate::{pages::sign_out::SignOut, router::Route, store::Store};
+use crate::{icons::icons::MenuIcon, pages::sign_out::SignOut, router::Route, store::Store};
 use stylist::Style;
 use yew::prelude::*;
 use yew_router::prelude::*;
@@ -9,7 +9,43 @@ const STYLE: &str = include_str!("styles/navbar.css");
 #[function_component(Navbar)]
 pub fn navbar() -> Html {
     let style = Style::new(STYLE).unwrap();
+    let is_menu_clicked = use_state(|| false);
+    let nav_display = use_state(|| "none".to_string());
     let store = use_store_value::<Store>();
+    let location = use_location();
+
+    let is_active = |path: String| -> String {
+        match location.clone().unwrap().path() == path {
+            true => "active".to_string(),
+            false => "non-active".to_string(),
+        }
+    };
+
+    let st = format!(r#":root {{ display: {} }}"#, *nav_display);
+    let nav_links_style = Style::new(st).unwrap();
+
+    // set 'is_menu_clicked' state to true
+    let is_menu_clicked_clone = is_menu_clicked.clone();
+    let menu_click = move |_| {
+        is_menu_clicked_clone.set(!*is_menu_clicked_clone);
+    };
+
+    // reset 'is_menu_clicked' state when path changes
+    let path = location.clone().unwrap().path().to_string();
+    let is_menu_clicked_clone = is_menu_clicked.clone();
+    use_effect_with(path, move |_| {
+        is_menu_clicked_clone.set(false);
+    });
+
+    // show / hide nav menu
+    let is_menu_clicked_clone = is_menu_clicked.clone();
+    use_effect_with(
+        is_menu_clicked_clone.clone(),
+        move |_| match *is_menu_clicked_clone {
+            true => nav_display.set("flex".to_string()),
+            false => nav_display.set("none".to_string()),
+        },
+    );
 
     html! {
         <div class={style}>
@@ -21,21 +57,32 @@ pub fn navbar() -> Html {
                 </Link<Route>>
 
                 <div class="nav-menus-container">
-                    <Link<Route> to={Route::Home}>{"Home"}</Link<Route>>
-                    <Link<Route> to={Route::Posts}>{"Posts"}</Link<Route>>
-                    <Link<Route> to={Route::About}>{"About"}</Link<Route>>
-
-                    if store.admin {
-                        <Link<Route> to={Route::Insights}>{"Insights"}</Link<Route>>
-                    }
-
-                    if store.authenticated {
-                        <Link<Route> to={Route::Account}>{"Account"}</Link<Route>>
-                        <SignOut />
-                    } else {
-                        <Link<Route> to={Route::SignIn}>{"SignIn"}</Link<Route>>
-                        <Link<Route> to={Route::SignUp}>{"SignUp"}</Link<Route>>
-                    }
+
+                    <div class="nav-drop-down">
+                        <span class="nav-icon" onclick={menu_click}>
+                            <MenuIcon />
+                        </span>
+
+                        <div class={classes!("nav-links", nav_links_style)}>
+                            <span class={is_active("/".to_string())}><Link<Route> to={Route::Home}>{"Home"}</Link<Route>></span>
+                            <span class={is_active("/posts".to_string())}><Link<Route> to={Route::Posts}>{"Posts"}</Link<Route>></span>
+                            <span class={is_active("/about".to_string())}><Link<Route> to={Route::About}>{"About"}</Link<Route>></span>
+
+                            if store.admin {
+                                <span class={is_active("/insights".to_string())}><Link<Route> to={Route::Insights}>{"Insights"}</Link<Route>></span>
+                            }
+
+                            if store.authenticated {
+                                <span class={is_active("/account".to_string())}><Link<Route> to={Route::Account}>{"Account"}</Link<Route>></span>
+                                <SignOut />
+                            } else {
+                                <span class="nav-accounts">
+                                    <span class={is_active("/signin".to_string())}><Link<Route> to={Route::SignIn}>{"SignIn"}</Link<Route>></span>
+                                    <span class={is_active("/signup".to_string())}><Link<Route> to={Route::SignUp}>{"SignUp"}</Link<Route>></span>
+                                </span>
+                            }
+                        </div>
+                    </div>
                 </div>
             </nav>
         </div>

diff --git a/devblog/devblog/client/src/components/pager.rs b/devblog/devblog/client/src/components/pager.rs
@@ -1,7 +1,7 @@
 use stylist::Style;
 use yew::{function_component, html, Callback, Html, Properties};
 
-use crate::icons::icons::{ArrowLeft, ArrowRight};
+use crate::icons::icons::{ArrowLeftIcon, ArrowRightIcon};
 // use gloo::console::log;
 
 const STYLE: &str = include_str!("styles/pager.css");
@@ -31,14 +31,14 @@ pub fn pager(props: &Props) -> Html {
             <div class="pager">
                 // PAGE LEFT
                 if props.page_num > 1 {
-                    <span onclick={page(-1)}><ArrowLeft /></span>
+                    <span onclick={page(-1)}><ArrowLeftIcon /></span>
                 }
 
                 <span>{props.page_num}</span>
 
                 // PAGE RIGHT
                 if props.page_num < props.total_pages {
-                    <span onclick={page(1)}><ArrowRight /></span>
+                    <span onclick={page(1)}><ArrowRightIcon /></span>
                 }
             </div>
         </div>

diff --git a/devblog/devblog/client/src/components/styles/commentEdit.css b/devblog/devblog/client/src/components/styles/commentEdit.css
@@ -4,7 +4,6 @@
 }
 
 .edit-comment-btn svg {
-    fill: white;
     height: 12;
 }
 

diff --git a/devblog/devblog/client/src/components/styles/navbar.css b/devblog/devblog/client/src/components/styles/navbar.css
@@ -1,3 +1,60 @@
+.non-active,
+.accounts a,
+.nav-icon {
+    opacity: 0.8;
+}
+
+.nav-menus-container {
+    display: flex;
+    margin-left: auto;
+}
+
+.nav-drop-down {
+    display: flex;
+    margin-right: 20px;
+    flex-direction: column;
+    z-index: 20;
+}
+
+.nav-drop-down:hover,
+.nav-icon:hover,
+.nav-links span:hover {
+    opacity: 1.0;
+    cursor: pointer;
+}
+
+.nav-links a,
+.nav-links form {
+    text-decoration: none;
+    padding-top: 5px;
+}
+
+.nav-links span.active {
+    text-decoration: underline;
+}
+
+.nav-icon {
+    height: 45;
+    font-size: 17;
+    cursor: pointer;
+    display: flex;
+    margin-top: 7px;
+}
+
+.nav-links {
+    margin-top: 70px;
+    padding: 10px;
+    right: 2px;
+    position: fixed;
+    background-color: rgb(26, 32, 41);
+    flex-direction: column;
+}
+
+.nav-accounts {
+    display: flex;
+    flex-direction: column;
+}
+
 .navbar {
     top: 0;
     left: 0;
@@ -35,4 +92,14 @@
     .logo {
         font-size: 25px;
     }
+} */
+
+/* @media(max-width: 450px) {
+    .nav-icon {
+        font-size: 50px;
+    }
+
+    .nav-links {
+        margin-top: 50px;
+    }
 } */
diff --git a/devblog/devblog/client/src/icons/icons.rs b/devblog/devblog/client/src/icons/icons.rs
@@ -25,35 +25,25 @@ pub fn downvote(props: &Props) -> Html {
 
 #[function_component(TrashIcon)]
 pub fn trash() -> Html {
-    html! {
-        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path d="M8 1.5V2.5H3C2.44772 2.5 2 2.94772 2 3.5V4.5C2 5.05228 2.44772 5.5 3 5.5H21C21.5523 5.5 22 5.05228 22 4.5V3.5C22 2.94772 21.5523 2.5 21 2.5H16V1.5C16 0.947715 15.5523 0.5 15 0.5H9C8.44772 0.5 8 0.947715 8 1.5Z"/>
-            <path d="M3.9231 7.5H20.0767L19.1344 20.2216C19.0183 21.7882 17.7135 23 16.1426 23H7.85724C6.28636 23 4.98148 21.7882 4.86544 20.2216L3.9231 7.5Z"/>
-        </svg>
-    }
+    html! {<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 1.5V2.5H3C2.44772 2.5 2 2.94772 2 3.5V4.5C2 5.05228 2.44772 5.5 3 5.5H21C21.5523 5.5 22 5.05228 22 4.5V3.5C22 2.94772 21.5523 2.5 21 2.5H16V1.5C16 0.947715 15.5523 0.5 15 0.5H9C8.44772 0.5 8 0.947715 8 1.5Z"/><path d="M3.9231 7.5H20.0767L19.1344 20.2216C19.0183 21.7882 17.7135 23 16.1426 23H7.85724C6.28636 23 4.98148 21.7882 4.86544 20.2216L3.9231 7.5Z"/></svg>}
 }
 
 #[function_component(EditIcon)]
 pub fn edit() -> Html {
-    html! {
-        <svg viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg">
-            <g  stroke-width="1">
-                <g id="Dribbble-Light-Preview" transform="translate(-59.000000, -400.000000)">
-                    <g transform="translate(56.000000, 160.000000)">
-                        <path d="M3,260 L24,260 L24,258.010742 L3,258.010742 L3,260 Z M13.3341,254.032226 L9.3,254.032226 L9.3,249.950269 L19.63095,240 L24,244.115775 L13.3341,254.032226 Z"></path>
-                    </g>
-                </g>
-            </g>
-        </svg>
-    }
-}
-
-#[function_component(ArrowRight)]
+    html! {<svg viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg"><g  stroke-width="1"><g id="Dribbble-Light-Preview" transform="translate(-59.000000, -400.000000)"><g transform="translate(56.000000, 160.000000)"><path d="M3,260 L24,260 L24,258.010742 L3,258.010742 L3,260 Z M13.3341,254.032226 L9.3,254.032226 L9.3,249.950269 L19.63095,240 L24,244.115775 L13.3341,254.032226 Z"></path></g></g></g></svg>}
+}
+
+#[function_component(ArrowRightIcon)]
 pub fn arrow_right() -> Html {
     html! {<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>}
 }
 
-#[function_component(ArrowLeft)]
+#[function_component(ArrowLeftIcon)]
 pub fn arrow_left() -> Html {
     html! {<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>}
 }
+
+#[function_component(MenuIcon)]
+pub fn menu() -> Html {
+    html! {<svg class="nav-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 6H20M4 12H20M4 18H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>}
+}
diff --git a/devblog/devblog/client/src/main.rs b/devblog/devblog/client/src/main.rs
@@ -15,7 +15,7 @@ use api::*;
 use components::navbar::Navbar;
 use models::*;
 use store::Store;
-use stylist::{yew::Global, Style};
+use stylist::yew::Global;
 use yew::{function_component, html, Html};
 use yew_router::{BrowserRouter, Switch};
 

diff --git a/devblog/devblog/client/src/pages/about.rs b/devblog/devblog/client/src/pages/about.rs
@@ -18,7 +18,7 @@ pub fn about() -> Html {
                     <li><a target="_blank" rel="noreferrer" href="https://www.linkedin.com/in/andrew149/">{"LinkedIn"}</a></li>
                 </ul>
 
-                <img src="me.png" alt="The DevBlog creator Andrew Smith" />
+                <img src="./assets/imgs/me.png" alt="The DevBlog creator Andrew Smith" />
 
             </div>
         </section>