Finished admin navbar and added empty pages for admin panel

css/admin-start.css

@@ -1,7 +1,7 @@
 .admin-start-container {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: start;
     align-items: center;
     gap: 50px;
 

css/body.css

@@ -10,3 +10,12 @@ body {
     justify-content: center;
     align-items: stretch;
 }
+
+.admin-page-container {
+    padding-top: 110px;
+    padding-left: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: stretch;
+}

css/components/admin_nav_bar.css

@@ -0,0 +1,75 @@
+.admin-navbar-background {
+    /*border-top: 3px solid #04B2D9;*/
+    position: fixed;
+    z-index: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: stretch;
+    background-color: #02114A;
+    min-width: 170px;
+    border-right: solid 0.5px #d8d8d8;
+    padding: 0px 15px
+}
+.admin-navbar-image {
+    object-fit: cover;
+    width: 80%;
+    height: 130px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.admin-navbar-elements-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    gap: 5px;
+    
+    width: 100%;
+}
+.admin-navbar-element {
+    width: 100%;
+    height: 35px;
+    color: white;
+
+    text-align: center;
+    font-size: 16px;
+    font-family: Source Sans Pro;
+    font-weight: 500;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.admin-navbar-element:hover {
+    cursor: pointer;
+    background-color: #ffffff14;
+    border-radius: 3px;
+    transition-duration: 0.3s;
+}
+.admin-navbar-element-selected {
+    width: 100%;
+    height: 35px;
+    color: rgb(27, 27, 27);
+    background-color: white;
+    border-radius: 3px;
+
+    text-align: center;
+    font-size: 16px;
+    font-family: Source Sans Pro;
+    font-weight: 500;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.admin-navbar-element-selected { cursor: default; }
+.admin-navbar-divider {
+    width: 100%;
+    height: 0.5px;
+    background-color: #d8d8d8;
+}

index.html

@@ -15,12 +15,13 @@
         <link data-trunk type="text/css" href="css/admin-login.css" rel="css" />
         <link data-trunk type="text/css" href="css/admin-start.css" rel="css" />
 
+        
         <link data-trunk type="text/css" href="css/components/loading.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/footer.css" rel="css" />
         <link data-trunk type="text/css" href="css/components/agent_card.css" rel="css" />
-        
+        <link data-trunk type="text/css" href="css/components/admin_nav_bar.css" rel="css" />
 
 
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

src/components/admin_nav_bar.rs

@@ -0,0 +1,34 @@
+use yew::prelude::*;
+use yew_router::prelude::{use_navigator, use_route};
+
+use crate::{routes::main_router::Route};
+//use yew_router::prelude::use_navigator;
+
+
+#[function_component(AdminNavigationBar)]
+pub fn admin_navigation_bar() -> Html {
+    let current_route: Option<Route> = use_route();
+    let navigator = use_navigator().unwrap();
+    let cloned_navigator_1 = navigator.clone();
+    let cloned_navigator_2 = navigator.clone();
+    let cloned_navigator_3 = navigator.clone();
+    let cloned_navigator_4 = navigator.clone();
+    
+    html! {
+        <div class={"admin-navbar-background"}>
+            <div class={"admin-navbar-image"}>
+                <img class={"navbar-image"} src={"images/logo-white.png"} alt="logo"/>
+            </div>
+            <div class={"admin-navbar-elements-container"}>
+                <div class={"admin-navbar-divider"}></div>
+                <div class={ if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::AdminStart) {"admin-navbar-element-selected"} else {"admin-navbar-element"} } onclick={move |_| cloned_navigator_1.push(&Route::AdminStart)}>{"Inicio"}</div>
+                <div class={ if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::AdminProjects) {"admin-navbar-element-selected"} else {"admin-navbar-element"} } onclick={move |_| cloned_navigator_2.push(&Route::AdminProjects)}>{"Proyectos"}</div>
+                <div class={ if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::AdminAgents) {"admin-navbar-element-selected"} else {"admin-navbar-element"} } onclick={move |_| cloned_navigator_3.push(&Route::AdminAgents)}>{"Agentes"}</div>
+                <div class={ if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::AdminContacts) {"admin-navbar-element-selected"} else {"admin-navbar-element"} } onclick={move |_| cloned_navigator_4.push(&Route::AdminContacts)}>{"Mensajes"}</div>
+                <div class={"admin-navbar-divider"}></div>
+            </div>
+            
+            
+        </div>
+    }
+}

src/components/mod.rs

@@ -1,8 +1,8 @@
 pub mod nav_bar;
-pub mod search_filter;
 pub mod project_card;
 pub mod media_slideshow;
 pub mod floating_widget;
 pub mod feature;
 pub mod footer;
 pub mod agent_card;
+pub mod admin_nav_bar;

src/pages/admin/agents.rs

@@ -0,0 +1,17 @@
+use yew::prelude::*;
+
+use crate::components::admin_nav_bar::AdminNavigationBar;
+
+#[function_component(AdminAgents)]
+pub fn admin_agents() -> Html {
+    html! {
+        <>
+            <AdminNavigationBar/>
+            <div class={"page-container"}>
+                <div class={"admin-start-container"}>
+                    {""}
+                </div>
+            </div>
+        </>
+    }
+}

src/pages/admin/contacts.rs

@@ -0,0 +1,17 @@
+use yew::prelude::*;
+
+use crate::components::admin_nav_bar::AdminNavigationBar;
+
+#[function_component(AdminContacts)]
+pub fn admin_contacts() -> Html {
+    html! {
+        <>
+            <AdminNavigationBar/>
+            <div class={"page-container"}>
+                <div class={"admin-start-container"}>
+                    {""}
+                </div>
+            </div>
+        </>
+    }
+}

src/pages/admin/login.rs

@@ -5,6 +5,7 @@ use crate::{utils::input::get_value_from_input_event, routes::main_router::Route
 
 #[function_component(AdminLoginPage)]
 pub fn login_page() -> Html {
+    // TODO: If logged in go to start
     let navigator = use_navigator().unwrap();
     let error = use_state(|| false);
     let username = use_state(|| String::new());

src/pages/admin/mod.rs

@@ -1,2 +1,5 @@
 pub mod login;
 pub mod start;
+pub mod projects;
+pub mod contacts;
+pub mod agents;

src/pages/admin/projects.rs

@@ -0,0 +1,17 @@
+use yew::prelude::*;
+
+use crate::components::admin_nav_bar::AdminNavigationBar;
+
+#[function_component(AdminProjects)]
+pub fn admin_projects() -> Html {
+    html! {
+        <>
+            <AdminNavigationBar/>
+            <div class={"page-container"}>
+                <div class={"admin-start-container"}>
+                    {""}
+                </div>
+            </div>
+        </>
+    }
+}

src/pages/admin/start.rs

@@ -1,12 +1,17 @@
 use yew::prelude::*;
 
+use crate::components::admin_nav_bar::AdminNavigationBar;
+
 #[function_component(AdminStart)]
 pub fn admin_start() -> Html {
     html! {
-        <div class={"page-container"}>
+        <>
-            <div class={"admin-start-container"}>
+            <AdminNavigationBar/>
-                {""}
+            <div class={"admin-page-container"}>
+                <div class={"admin-start-container"}>
+                    {"a"}
+                </div>
             </div>
-        </div>
+        </>
     }
 }

src/routes/main_router.rs

@@ -3,7 +3,7 @@ use yew::prelude::*;
 
 use uuid::Uuid;
 
-use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage, admin::{login::AdminLoginPage, start::AdminStart}, agents::AgentsPage}};
+use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage, admin::{login::AdminLoginPage, start::AdminStart, projects::AdminProjects, agents::AdminAgents, contacts::AdminContacts}, agents::AgentsPage}};
 
 #[derive(Clone, Routable, PartialEq)]
 pub enum Route {
@@ -22,6 +22,12 @@ pub enum Route {
     Admin,
     #[at("/admin/start")]
     AdminStart,
+    #[at("/admin/projects")]
+    AdminProjects,
+    #[at("/admin/agents")]
+    AdminAgents,
+    #[at("/admin/contacts")]
+    AdminContacts,
 
     #[not_found]
     #[at("/404")]
@@ -39,6 +45,10 @@ pub fn switch(routes: Route) -> Html {
 
         Route::Admin => html! { <AdminLoginPage/> },
         Route::AdminStart => html! { <AdminStart/>},
+        Route::AdminProjects => html! { <AdminProjects/> },
+        Route::AdminAgents => html! { <AdminAgents/> },
+        Route::AdminContacts => html! { <AdminContacts/> },
+        
         
     }
 }

src/utils/admin_panel.rs

@@ -0,0 +1,12 @@
+use super::storage;
+
+
+pub fn get_admin_token_from_storage() -> Option<String> {
+    match storage::get_from_local_storage(storage::StorageKey::AdminUser) {
+        Ok(opt) => opt,
+        Err(_) => {
+            log::error!("No user stored when attempting to use admin panel. Redirect to admin panel.");
+            None
+        },
+    }
+}

src/utils/mod.rs

@@ -1,3 +1,4 @@
 pub mod get_value;
 pub mod input;
 pub mod storage;
+pub mod admin_panel;

src/utils/storage.rs

@@ -1,15 +1,17 @@
-use std::fmt::Display;
+use std::fmt::{Display};
 
 use err::{MessageResource, Error};
 use web_sys::window;
 
 pub enum StorageKey {
     AgentShortcode,
+    AdminUser,
 }
 impl Display for StorageKey {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         match self {
             StorageKey::AgentShortcode => write!(f, "agentshortcode"),
+            StorageKey::AdminUser => write!(f, "adminuser"),
         }
     }
 }