add dynamic is-active for nav

server/src/helpers.rs

@@ -1,5 +1,6 @@
 use std::fmt::Write;
 use anyhow::anyhow;
+use log::debug;
 use rocket_dyn_templates::handlebars::{Context, Handlebars, Helper, HelperResult, Output, RenderContext, RenderError, RenderErrorReason};
 pub(crate) fn bytes(h: &Helper< '_>, _: &Handlebars<'_>, _: &Context, rc:
 &mut RenderContext<'_, '_>, out: &mut dyn Output) -> HelperResult {
@@ -18,4 +19,26 @@ pub(crate) fn debug(h: &Helper< '_>, _: &Handlebars<'_>, _: &Context, rc:
     let output = serde_json::to_string(param).unwrap();
     out.write(&output)?;
     Ok(())
+}
+
+pub(crate) fn is_active(h: &Helper< '_>, hbs: &Handlebars<'_>, ctx: &Context, rc: &mut RenderContext<'_, '_>, out: &mut dyn Output)
+    -> HelperResult
+{
+    let current_path = h.param(0)
+        .and_then(|v| v.value().as_str())
+        .ok_or::<RenderError>(RenderErrorReason::ParamNotFoundForIndex("", 0).into())?;
+    let href = h.param(1)
+        .and_then(|v| v.value().as_str())
+        .ok_or::<RenderError>(RenderErrorReason::ParamNotFoundForIndex("", 1).into())?;
+    // debug!("name={} curr={} href={}", h.name(), current_path, href);
+    if h.name() == "is-active-exact" {
+        if current_path == href {
+            out.write("is-active")?;
+        }
+    } else {
+        if current_path.starts_with(href) {
+            out.write("is-active")?;
+        }
+    }
+    Ok(())
 }

server/src/main.rs

@@ -71,6 +71,7 @@ async fn rocket() -> _ {
             api::library::move_file, api::library::upload_file, api::library::download_file, api::library::list_files, api::library::get_file, api::library::delete_file,
         ])
         .mount("/", routes![
+            ui::help::about,
             ui::user::index, ui::user::redirect_list_library_files, ui::user::list_library_files, ui::user::get_library_file
         ])
         .attach(Template::custom(|engines| {
@@ -78,6 +79,8 @@ async fn rocket() -> _ {
 
             hb.register_helper("bytes", Box::new(helpers::bytes));
             hb.register_helper("debug", Box::new(helpers::debug));
+            hb.register_helper("is-active", Box::new(helpers::is_active));
+            hb.register_helper("is-active-exact", Box::new(helpers::is_active));
         }))
 
 }

server/src/routes/ui.rs

@@ -1 +1,2 @@
-pub mod user;
+pub mod user;
+pub mod help;

server/src/routes/ui/help.rs

@@ -0,0 +1,7 @@
+use rocket::{get, Route};
+use rocket_dyn_templates::{context, Template};
+
+#[get("/help/about")]
+pub fn about(route: &Route) -> Template {
+    Template::render("about", context! { route: route.uri.path() })
+}

server/src/routes/ui/user.rs

@@ -2,7 +2,7 @@ use std::io::Cursor;
 use std::path::{Path, PathBuf};
 use std::sync::Arc;
 use log::debug;
-use rocket::{get, uri, Response, State};
+use rocket::{get, uri, Response, Route, State};
 use rocket::fs::NamedFile;
 use rocket::http::{ContentType, Header};
 use rocket::http::hyper::body::Buf;
@@ -17,8 +17,8 @@ use crate::managers::libraries::LibraryManager;
 use crate::util::{JsonErrorResponse, ResponseError};
 
 #[get("/")]
-pub async fn index() -> Template {
-    Template::render("index", context! { test: "value" })
+pub async fn index(route: &Route) -> Template {
+    Template::render("index", context! { route: route.uri.path(), test: "value" })
 }
 
 #[get("/library/<library_id>")]
@@ -27,15 +27,12 @@ pub async fn redirect_list_library_files(libraries: &State<Arc<Mutex<LibraryMana
 {
     let libs = libraries.lock().await;
     let library = libs.get(library_id).await?;
-    // let redirect_to = format!("/library/{}/{}/", library_id, library.model().name);
-    // debug!("{}", redirect_to);
     Ok(Redirect::to(uri!(list_library_files(library_id, library.model().name, ""))))
-    // Ok(Redirect::to(redirect_to))
 }
 
 
 #[get("/library/<library_id>/<_>/<path..>")]
-pub async fn list_library_files(libraries: &State<Arc<Mutex<LibraryManager>>>, library_id: &str, path: PathBuf)
+pub async fn list_library_files(route: &Route, libraries: &State<Arc<Mutex<LibraryManager>>>, library_id: &str, path: PathBuf)
     -> Result<Template, ResponseError>
 {
     let libs = libraries.lock().await;
@@ -63,6 +60,7 @@ pub async fn list_library_files(libraries: &State<Arc<Mutex<LibraryManager>>>, l
     debug!("segments={:?}", segments);
 
     Ok(Template::render("libraries", context! {
+        route: route.uri.path(),
         library: library.model(),
         files: files,
         parent,

server/templates/about.html.hbs

@@ -0,0 +1,10 @@
+{{#> layouts/main }}
+    <div class="content">
+        <h4>Credits</h4>
+        <ul>
+            <li><a href="https://www.flaticon.com/free-icons/default" title="default icons">Default icons created by kliwir art -
+                Flaticon</a></li>
+        </ul>
+    </div>
+
+{{/layouts/main}}

server/templates/layouts/main.html.hbs

@@ -11,6 +11,7 @@
         <link rel="stylesheet" href="/static/css/bulma.min.css">
         <link href="/static/icons/css/fontawesome.css" rel="stylesheet" />
         <link href="/static/icons/css/solid.css" rel="stylesheet" />
+        <link href="/static/icons/css/regular.css" rel="stylesheet" />
         <link href="/static/icons/css/brands.css" rel="stylesheet" />
     </head>
 	<body>

server/templates/partials/nav.html.hbs

@@ -25,10 +25,29 @@
             </div>
         </div>
         <div class="navbar-item">
-            Bell
+            <a class="icon">
+                <i class="far fa-bell"></i>
+                <span class="ml-2" >0</span>
+            </a>
+            
         </div>
-        <div class="navbar-item">
-            User
+        <div class="navbar-item has-dropdown is-hoverable">
+            <a class="navbar-link">
+                <img src="/static/img/default_user.png" alt="User Image" />
+            </a>
+        
+            <div class="navbar-dropdown">
+                <a class="navbar-item" href="/help/about">
+                    About
+                </a>
+                <a class="navbar-item">
+                    Contact
+                </a>
+                <hr class="navbar-divider">
+                <a class="navbar-item">
+                    Report an issue
+                </a>
+            </div>
         </div>
     </div>
 </nav>

server/templates/partials/sidebar.html.hbs

@@ -1,13 +1,13 @@
 <aside class="sidebar pl-0 mb-0">
     <p class="sidebar-header">Workspace</p>
     <ul class="sidebar-list">
-        <li  class="is-active"><a href="#"><i class="fa fa-file"></i> Files</a></li>
-        <li><a href="#"><i class="fas fa-heart"></i> Favorites</a></li>
-        <li><a href="#"><i class="fas fa-clock"></i> Activities</a></li>
+        <li class="{{is-active-exact route '/'}} {{is-active route '/library'}}"><a href="/"><i class="fa fa-file"></i> Files</a></li>
+        <li class="{{is-active route '/favorites'}}"><a href="/favorites"><i class="fas fa-heart"></i> Favorites</a></li>
+        <li class="{{is-active route '/activity'}}"><a href="/activity"><i class="fas fa-clock"></i> Activities</a></li>
     </ul>
     <p class="sidebar-header">Help</p>
     <ul class="sidebar-list">
-        <li><a href="#">Help</a></li>
-        <li><a href="#">About</a></li>
+        <li class="{{is-active-exact route '/help'}}"><a href="/help">Help</a></li>
+        <li class="{{is-active route '/help/about'}}"><a href="/help/about">About</a></li>
     </ul>
 </aside>