add notification component

devblog/devblog/client/src/components/mod.rs

@@ -10,3 +10,4 @@ pub mod post;
 pub mod post_delete;
 pub mod post_edit;
 pub mod vote;
+pub mod notifications;

devblog/devblog/client/src/components/navbar.rs

@@ -1,4 +1,7 @@
-use crate::{icons::icons::MenuIcon, pages::sign_out::SignOut, router::Route, store::Store};
+use crate::{
+    components::notifications::Notifications, icons::icons::MenuIcon, pages::sign_out::SignOut,
+    router::Route, store::Store,
+};
 use stylist::Style;
 use yew::prelude::*;
 use yew_router::prelude::*;
@@ -57,6 +60,7 @@ pub fn navbar() -> Html {
                 </Link<Route>>
 
                 <div class="nav-menus-container">
+                    <Notifications />
 
                     <div class="nav-drop-down">
                         <span class="nav-icon" onclick={menu_click}>

devblog/devblog/client/src/components/notifications.rs

@@ -0,0 +1,53 @@
+use crate::{icons::icons::BellIcon, store::Store};
+use stylist::Style;
+use yew::{function_component, html, use_state, Callback, Html, Properties};
+use yew_router::hooks::use_location;
+use yewdux::use_store_value;
+
+const STYLE: &str = include_str!("styles/notifications.css");
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+    pub bell_display: String,
+    pub bell_clicked: bool,
+    pub menu_clicked: bool,
+}
+
+#[function_component(Notifications)]
+pub fn notifications() -> Html {
+    let style = Style::new(STYLE).unwrap();
+    let store = use_store_value::<Store>();
+    let menu_clicked = use_state(|| false);
+    let bell_display = use_state(|| "none".to_string());
+    let location = use_location();
+
+    let on_menu_click = || Callback::from(move |_| {});
+
+    let on_bell_click = || Callback::from(move |_| {});
+
+    html! {
+        if store.authenticated {
+            <div class={style}>
+                <div class="notification-drop-down">
+
+                    <span>
+                        <BellIcon />
+                    </span>
+
+                    <span class="notification-count">{"length"}</span>
+                    <div class="notifications">
+                        // notifications map
+                            <div class="">
+                                <span></span>
+                                <div class="notification-txt">
+                                    <span>{" posted"}</span>
+                                    <span>{" dismiss"}</span>
+                                </div>
+                            </div>
+                        //
+                    </div>
+                </div>
+            </div>
+        }
+    }
+}

devblog/devblog/client/src/components/styles/notifications.css

@@ -0,0 +1,96 @@
+.notification-icon {
+    opacity: 0.8;
+}
+
+.notification-drop-down {
+    font-size: 35px;
+    margin-top: 23px;
+    margin-right: 10px;
+    z-index: 21;
+}
+
+.notifications {
+    display: flex;
+    font-family: 'Chivo Mono', monospace;
+    flex-direction: column;
+    font-size: 15px;
+    right: 10px;
+    background-color: rgb(26, 32, 41);
+    position: absolute;
+    padding: 10px 4px;
+}
+
+.notification-count {
+    background-color: red;
+    font-family: 'Chivo Mono', monospace;
+    font-size: 13px;
+    position: absolute;
+    border-radius: 50%;
+    padding: 5px;
+    line-height: 8px;
+    right: 118px;
+}
+
+.notifications img {
+    height: 50px;
+    width: 60px;
+    border-radius: 0%;
+}
+
+.notifications>div {
+    border-top: 1px solid gray;
+    display: flex;
+    flex-direction: row;
+}
+
+.notification-txt {
+    display: flex;
+    flex-direction: column;
+}
+
+.notification-txt>span:last-child {
+    font-size: 12px;
+    opacity: 0.8;
+    margin-left: 10px;
+}
+
+.notification-txt span:first-child {
+    padding: 4px;
+    opacity: 0.8;
+    text-decoration: none;
+}
+
+
+.notification-icon:hover,
+.notification-txt>span:last-child:hover,
+.notification-txt span:hover {
+    opacity: 1.0;
+    cursor: pointer;
+}
+
+.notification-item {
+    transition: all 0.3s ease-in;
+}
+
+.dismissed {
+    transform: translateX(100%);
+    opacity: 0;
+}
+
+/* @media(max-width: 450px) {
+    .notifications {
+        right: 1px;
+    }
+
+    .notification-drop-down {
+        font-size: 25px;
+        margin-top: 19px;
+    }
+
+    .notification-count {
+        right: 92px;
+        font-size: 10px;
+        line-height: 6px;
+        padding: 4px;
+    }
+} */

devblog/devblog/client/src/icons/icons.rs

@@ -47,3 +47,8 @@ pub fn arrow_left() -> Html {
 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>}
 }
+
+#[function_component(BellIcon)]
+pub fn bell() -> Html {
+    html! {<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/></svg>}
+}