Make parent nav links clickable (#1064)

montanalow · web-flow · commit 8788c2b3667a · 2023-10-11T18:12:46.000-07:00
diff --git a/pgml-dashboard/src/api/docs.rs b/pgml-dashboard/src/api/docs.rs
@@ -53,7 +53,15 @@ async fn doc_handler(path: PathBuf, cluster: &Cluster) -> Result<ResponseOk, Sta
     let guides = markdown::parse_summary_into_nav_links(&mdast)
         .expect("could not extract nav links from table of contents");
 
-    render(cluster, &path, guides, "Guides", &Path::new("docs"), &config::docs_dir()).await
+    render(
+        cluster,
+        &path,
+        guides,
+        "Guides",
+        &Path::new("docs"),
+        &config::docs_dir(),
+    )
+    .await
 }
 
 #[get("/blog/<path..>", rank = 10)]
diff --git a/pgml-dashboard/src/components/inputs/select/mod.rs b/pgml-dashboard/src/components/inputs/select/mod.rs
@@ -1,9 +1,9 @@
 use crate::components::stimulus::stimulus_action::{StimulusAction, StimulusEvents};
 use crate::components::stimulus::stimulus_target::StimulusTarget;
+use crate::types::CustomOption;
 use pgml_components::component;
 use pgml_components::Component;
 use sailfish::TemplateOnce;
-use crate::types::CustomOption;
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "inputs/select/template.html")]
diff --git a/pgml-dashboard/src/components/nav/template.html b/pgml-dashboard/src/components/nav/template.html
@@ -26,14 +26,14 @@
   
       <% if link.nav.is_some() { %>
       <ul class="nav flex-column justify-content-end flex-grow-1 ps-5">
-  
+
         <% for link in link.nav.unwrap().links.iter() {
           let active = if link.active {
             "active"
           } else {
             ""
           };
-  
+
           let aria = if link.active {
             r#"area-current="page""#
           } else {
@@ -48,10 +48,10 @@
             <span class="nav-link-name"><%= link.name %></span>
           </a>
         </li>
-  
+
         <% } %>
       </ul>
-  
+
       <% } %>
     </li>
     <% } %>
diff --git a/pgml-dashboard/src/lib.rs b/pgml-dashboard/src/lib.rs
@@ -13,7 +13,6 @@ use sailfish::TemplateOnce;
 use sqlx::PgPool;
 use std::collections::HashMap;
 
-pub mod types;
 pub mod api;
 pub mod components;
 pub mod fairings;
@@ -22,6 +21,7 @@ pub mod guards;
 pub mod models;
 pub mod responses;
 pub mod templates;
+pub mod types;
 pub mod utils;
 
 use guards::{Cluster, ConnectedCluster};
diff --git a/pgml-dashboard/src/main.rs b/pgml-dashboard/src/main.rs
@@ -285,10 +285,7 @@ mod test {
     #[rocket::async_test]
     async fn test_docs() {
         let client = Client::tracked(rocket().await).await.unwrap();
-        let response = client
-            .get("/docs/guides/README")
-            .dispatch()
-            .await;
+        let response = client.get("/docs/guides/README").dispatch().await;
         assert_eq!(response.status().code, 200);
     }
 
diff --git a/pgml-dashboard/src/templates/docs.rs b/pgml-dashboard/src/templates/docs.rs
@@ -42,8 +42,8 @@ impl NavLink {
     //github.com/ Automatically expand the link and it's parents
     //github.com/ when one of the children is visible.
     pub fn should_open(&mut self, path: &str) -> bool {
+        self.open = self.href.contains(&path);
         let open = if self.children.is_empty() {
-            self.open = self.href.contains(&path);
             self.open
         } else {
             for child in self.children.iter_mut() {
diff --git a/pgml-dashboard/src/utils/markdown.rs b/pgml-dashboard/src/utils/markdown.rs
@@ -26,13 +26,11 @@ use url::Url;
 use crate::templates::docs::NavLink;
 use std::fmt;
 
-pub struct MarkdownHeadings {
-}
+pub struct MarkdownHeadings {}
 
 impl MarkdownHeadings {
     pub fn new() -> Self {
-        Self {
-        }
+        Self {}
     }
 }
 
@@ -583,7 +581,7 @@ pub fn get_sub_links(list: &markdown::mdast::List) -> Result<Vec<NavLink>> {
                                                         .unwrap();
                                                     let parent = NavLink::new(text.value.as_str())
                                                         .href(&url);
-                                                    links.push(parent)
+                                                    links.push(parent);
                                                 }
                                                 _ => error!("unhandled link child: {:?}", node),
                                             }
@@ -1074,8 +1072,8 @@ pub fn mkdocs<'a>(root: &'a AstNode<'a>, arena: &'a Arena<AstNode<'a>>) -> anyho
                                 r#"
                                 <ul class="nav nav-tabs">
                             "#
-                                    .to_string()
-                                    .into(),
+                                .to_string()
+                                .into(),
                             )))));
 
                         parent.insert_after(n);
@@ -1136,7 +1134,7 @@ pub fn mkdocs<'a>(root: &'a AstNode<'a>, arena: &'a Arena<AstNode<'a>>) -> anyho
                                         active = if tab.active { "show active" } else { "" },
                                         id = tab.id
                                     )
-                                        .into(),
+                                    .into(),
                                 ),
                             ))));
 
@@ -1337,8 +1335,7 @@ impl SearchIndex {
     }
 
     pub fn documents() -> Vec<PathBuf> {
-        let guides =
-            glob::glob(&(config::docs_dir() + "/guides/**/*.md")).expect("glob failed");
+        let guides = glob::glob(&(config::docs_dir() + "/guides/**/*.md")).expect("glob failed");
         let blogs = glob::glob(&(config::blogs_dir() + "/blog/**/*.md")).expect("glob failed");
         guides
             .chain(blogs)
diff --git a/pgml-dashboard/static/css/scss/components/_navs.scss b/pgml-dashboard/static/css/scss/components/_navs.scss
@@ -198,12 +198,9 @@
         &:focus:not(:hover) {
             color: #{$gray-100}
         }
-
     }
     [aria-expanded=false] {
-        span.material-symbols-outlined {
-            transform: rotate(-90deg);
-        }
+        transform: rotate(-90deg);
     }
     @include media-breakpoint-down(xxl) {
         border-radius: 0px;
diff --git a/pgml-dashboard/templates/components/link.html b/pgml-dashboard/templates/components/link.html
@@ -1,5 +1,15 @@
 <div class="nav flex-column" role="tablist" aria-orientation="vertical">
-  <% if !children.is_empty() {
+  <%
+  let color = if open {
+    "purple"
+  } else {
+    ""
+  };
+
+  if children.is_empty() {
+  %>
+  <a class="nav-link px-0 text-break <%- color %>" href="<%- href %>"><%- title %></a>
+  <% } else {
     let aria = if open {
       "true"
     } else {
@@ -12,23 +22,17 @@
       "false"
     };
   %>
-  <a class="nav-link px-0 d-flex justify-content-between align-items-center text-break" data-bs-toggle="collapse" href="#doc-<%= id %>" role="button" aria-expanded="<%- aria %>" aria-controls="doc-<%= id %>">
-    <span><%= title %></span><span class="material-symbols-outlined">expand_more</span>
-  </a>
+
+  <span class="px-0 d-flex justify-content-between align-items-center text-break" >
+    <a class="nav-link px-0 text-break <%- color %>" href="<%- href %>"><%- title %></a>
+    <span class="material-symbols-outlined" data-bs-toggle="collapse" href="#doc-<%= id %>" role="button" aria-expanded="<%- aria %>" aria-controls="doc-<%= id %>">expand_more</span>
+  </span>
   <div class="collapse <%- show %> ps-3" id="doc-<%= id %>">
     <div class="nav flex-column" role="tablist" aria-orentation="vertical">
       <% for child in children.into_iter() { %>
         <%- child.render_once().unwrap() %>
       <% } %>
     </div>
   </div>
-  <% } else {
-    let color = if open {
-      "purple"
-    } else {
-      ""
-    };
-  %>
-    <a class="nav-link px-0 text-break <%- color %>" href="<%- href %>"><%- title %></a>
   <% } %>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -198,12 +198,9 @@`
`198`	`198`	`&:focus:not(:hover) {`
`199`	`199`	`color: #{$gray-100}`
`200`	`200`	`}`
`201`		`-`
`202`	`201`	`}`
`203`	`202`	`[aria-expanded=false] {`
`204`		`- span.material-symbols-outlined {`
`205`		`- transform: rotate(-90deg);`
`206`		`- }`
	`203`	`+ transform: rotate(-90deg);`
`207`	`204`	`}`
`208`	`205`	`@include media-breakpoint-down(xxl) {`
`209`	`206`	`border-radius: 0px;`