postgresml · chillenberger · Oct 12, 2023 · Oct 11, 2023 · Oct 12, 2023 · Oct 12, 2023
diff --git a/pgml-dashboard/content/blog/how-to-improve-search-results-with-machine-learning.md b/pgml-dashboard/content/blog/how-to-improve-search-results-with-machine-learning.md
@@ -316,11 +316,11 @@ The `pgml.train` function will return a table with some information about the tr
 
 !!!
 
-PostgresML automatically deploys a model for online predictions after training, if the **key metric** is a better than the currently deployed model. We'll train many models over time for this project, and you can read more about deployments later.
+PostgresML automatically deploys a model for online predictions after training, if the **key metric** is better than the currently deployed model. We'll train many models over time for this project, and you can read more about deployments later.
 
 ### Making Predictions
 
-Once a model is trained, you can use `pgml.predict` to use it on new inputs. `pgml.predict` is a function that takes our project name, along with an array of features to predict on. In this case, our features are th `title_rank` and `body_rank`. We can use the `pgml.predict` function to make predictions on the training data, but in a real application, we'd want to make predictions on new data that the model hasn't seen before. Let's do a quick sanity check, and see what the model predicts for all the values of our training data. 
+Once a model is trained, you can use `pgml.predict` to use it on new inputs. `pgml.predict` is a function that takes our project name, along with an array of features to predict on. In this case, our features are `title_rank` and `body_rank`. We can use the `pgml.predict` function to make predictions on the training data, but in a real application, we'd want to make predictions on new data that the model hasn't seen before. Let's do a quick sanity check, and see what the model predicts for all the values of our training data. 
 
 
 !!! generic

diff --git a/pgml-dashboard/src/components/left_nav_menu/template.html b/pgml-dashboard/src/components/left_nav_menu/template.html
@@ -1,16 +1,17 @@
-<nav>
+<nav data-controller="left-nav-menu">
     <ul class="nav flex-column justify-content-end">
         <% for link in nav.links { %>
         <% if !link.hide_for_lg_screens { %>
         <li class="menu-item leftnav-collapse-affect expanded <% if link.disabled { %>disabled<% } %>" >
             <a
-            class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled  { %> disabled <% } %>"
+            data-left-nav-menu-target="<%- link.name.to_lowercase() %>"
+            class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled  { %> disabled <% } %> <% if link.active { %> active <% } %>"
             href="<%= link.href %>"
             >
             <% if link.icon.as_ref().is_some() { %>
             <span class="material-symbols-outlined"><%- link.icon.unwrap() %></span>
             <% } %>
-            <span class="fw-normal collapse collapse-horizontal leftnav-collapse show"><%= link.name %></span>
+            <span class="collapse collapse-horizontal leftnav-collapse show"><%= link.name %></span>
             </a>
         </li>
         <% } %>

diff --git a/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss b/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss
diff --git a/pgml-dashboard/src/components/left_nav_web_app/mod.rs b/pgml-dashboard/src/components/left_nav_web_app/mod.rs
diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
@@ -28,10 +28,6 @@ pub mod inputs;
 pub mod left_nav_menu;
 pub use left_nav_menu::LeftNavMenu;
 
-// src/components/left_nav_web_app
-pub mod left_nav_web_app;
-pub use left_nav_web_app::LeftNavWebApp;
-
 // src/components/modal
 pub mod modal;
 pub use modal::Modal;
@@ -44,14 +40,6 @@ pub use nav::Nav;
 pub mod nav_link;
 pub use nav_link::NavLink;
 
-// src/components/navbar
-pub mod navbar;
-pub use navbar::Navbar;
-
-// src/components/navbar_web_app
-pub mod navbar_web_app;
-pub use navbar_web_app::NavbarWebApp;
-
 // src/components/navigation
 pub mod navigation;
 

diff --git a/pgml-dashboard/src/components/navbar/navbar.scss b/pgml-dashboard/src/components/navbar/navbar.scss
diff --git a/pgml-dashboard/src/components/navbar/template.html b/pgml-dashboard/src/components/navbar/template.html
diff --git a/pgml-dashboard/src/components/navigation/left_nav/mod.rs b/pgml-dashboard/src/components/navigation/left_nav/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/navigation/left_nav/web_app
+pub mod web_app;
+pub use web_app::WebApp;
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/mod.rs b/pgml-dashboard/src/components/navigation/left_nav/web_app/mod.rs
@@ -0,0 +1,23 @@
+use crate::components::StaticNav;
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "navigation/left_nav/web_app/template.html")]
+pub struct WebApp {
+    pub upper_nav: StaticNav,
+    pub lower_nav: StaticNav,
+    pub dropdown_nav: StaticNav,
+}
+
+impl WebApp {
+    pub fn new(upper_nav: StaticNav, lower_nav: StaticNav, dropdown_nav: StaticNav) -> WebApp {
+        WebApp {
+            upper_nav,
+            lower_nav,
+            dropdown_nav,
+        }
+    }
+}
+
+component!(WebApp);
diff --git a/...components/left_nav_web_app/template.html → ...navigation/left_nav/web_app/template.html b/...components/left_nav_web_app/template.html → ...navigation/left_nav/web_app/template.html
@@ -1,5 +1,5 @@
 <% use crate::components::{LeftNavMenu, Dropdown}; %>
-<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
+<nav class="navbar leftnav nav-pills h-100" data-controller="extend-bs-collapse navigation-left-nav-web-app" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
   <div class="d-flex flex-column justify-content-between h-100 w-100">
     <div class="d-flex flex-column">
       <button class="btn-left-nav-toggle mb-5" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">

diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss
@@ -0,0 +1,26 @@
+.leftnav-container {
+    position: sticky; 
+    top: $navbar-height; 
+    height: calc( 100vh - $navbar-height );
+    background-color: var(--webapp-nav-bg);
+    border-right: 1px solid #{$gray-500};
+    max-width: $left-nav-w;
+    padding-top: 0px;
+    z-index: $zindex-fixed;
+
+    @include media-breakpoint-down(lg) {
+        display: none;
+    }
+}
+
+.leftnav {
+    max-width: 260px;
+
+    border: none;
+    align-items: start;
+    background-color: inherit;
+
+    @include media-breakpoint-down(lg) {
+        background-color: #{$gray-900}
+    }
+}
diff --git a/pgml-dashboard/src/components/navigation/mod.rs b/pgml-dashboard/src/components/navigation/mod.rs
@@ -5,5 +5,11 @@
 pub mod dropdown_link;
 pub use dropdown_link::DropdownLink;
 
+// src/components/navigation/left_nav
+pub mod left_nav;
+
+// src/components/navigation/navbar
+pub mod navbar;
+
 // src/components/navigation/tabs
 pub mod tabs;
diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss b/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss
@@ -0,0 +1,5 @@
+.navbar-marketing-site {
+    &.horizontal {
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) -55.68%, rgba(0, 0, 0, 0) 100%);
+    }
+}
diff --git a/pgml-dashboard/src/components/navbar/mod.rs → ...onents/navigation/navbar/marketing/mod.rs b/pgml-dashboard/src/components/navbar/mod.rs → ...onents/navigation/navbar/marketing/mod.rs
@@ -3,22 +3,20 @@ use crate::utils::config;
 use pgml_components::component;
 use sailfish::TemplateOnce;
 
-#[derive(TemplateOnce)]
-#[template(path = "layout/nav/top.html")]
-pub struct Navbar {
+#[derive(TemplateOnce, Default)]
+#[template(path = "navigation/navbar/marketing/template.html")]
+pub struct Marketing {
     pub current_user: Option<models::User>,
     pub standalone_dashboard: bool,
 }
 
-impl Navbar {
-    pub fn render(user: Option<models::User>) -> String {
-        Navbar {
+impl Marketing {
+    pub fn new(user: Option<models::User>) -> Marketing {
+        Marketing {
             current_user: user,
             standalone_dashboard: config::standalone_dashboard(),
         }
-        .render_once()
-        .unwrap()
     }
 }
 
-component!(Navbar);
+component!(Marketing);
diff --git a/pgml-dashboard/templates/layout/nav/top.html → ...navigation/navbar/marketing/template.html b/pgml-dashboard/templates/layout/nav/top.html → ...navigation/navbar/marketing/template.html
@@ -1,12 +1,11 @@
 <% use crate::templates::components::GithubIcon; %>
 <% use crate::templates::components::PostgresLogo; %>
 
-  <div class="sticky-top-nav">
-    <nav class="navbar-marketing-site horizontal navbar-expand-lg" data-controller="search topnav-styling">
+  <div class="sticky-top-nav" data-controller="navigation-navbar-marketing">
+    <nav class="navbar navbar-marketing-site horizontal navbar-expand-lg" data-controller="search topnav-styling">
       <div class="container gap-4">
         <div class="controls">
           <%+ PostgresLogo::new("/") %>
-
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
@@ -29,7 +28,7 @@
 
           <ul class="navbar-nav gap-4 gap-lg-3 mb-2 mb-lg-0">
             <li class="align-items-center d-none d-lg-flex">
-              <%- GithubIcon{show_stars: true}.render_once().unwrap() %>
+              <%+ GithubIcon {show_stars: true} %>
             </li>
             <li class="d-flex align-items-center d-block d-lg-none">
               <a class="nav-link p-0" href="https://github.com/postgresml/postgresml">Open Source</a>
@@ -69,4 +68,4 @@
     </nav>
   </div>
 
-  <% include!("../../components/search_modal.html");%>
+  <% include!("../../../../../templates/components/search_modal.html");%>
diff --git a/pgml-dashboard/src/components/navigation/navbar/mod.rs b/pgml-dashboard/src/components/navigation/navbar/mod.rs
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/navigation/navbar/marketing
+pub mod marketing;
+pub use marketing::Marketing;
+
+// src/components/navigation/navbar/web_app
+pub mod web_app;
+pub use web_app::WebApp;
diff --git a/...oard/src/components/navbar_web_app/mod.rs → ...mponents/navigation/navbar/web_app/mod.rs b/...oard/src/components/navbar_web_app/mod.rs → ...mponents/navigation/navbar/web_app/mod.rs
@@ -3,24 +3,22 @@ use crate::utils::config;
 use pgml_components::component;
 use sailfish::TemplateOnce;
 
-#[derive(TemplateOnce)]
-#[template(path = "navbar_web_app/template.html")]
-pub struct NavbarWebApp {
+#[derive(TemplateOnce, Default)]
+#[template(path = "navigation/navbar/web_app/template.html")]
+pub struct WebApp {
     pub standalone_dashboard: bool,
     pub links: Vec<StaticNavLink>,
     pub account_management_nav: StaticNav,
 }
 
-impl NavbarWebApp {
-    pub fn render(links: Vec<StaticNavLink>, account_management_nav: StaticNav) -> String {
-        NavbarWebApp {
+impl WebApp {
+    pub fn new(links: Vec<StaticNavLink>, account_management_nav: StaticNav) -> WebApp {
+        WebApp {
             standalone_dashboard: config::standalone_dashboard(),
             links,
             account_management_nav,
         }
-        .render_once()
-        .unwrap()
     }
 }
 
-component!(NavbarWebApp);
+component!(WebApp);
diff --git a/...c/components/navbar_web_app/template.html → ...s/navigation/navbar/web_app/template.html b/...c/components/navbar_web_app/template.html → ...s/navigation/navbar/web_app/template.html
@@ -1,9 +1,11 @@
-<% use crate::templates::components::GithubIcon; %>
-<% use crate::templates::components::PostgresLogo; %>
-<% use crate::components::{Dropdown, ProfileIcon}; %>
+<% 
+  use crate::templates::components::GithubIcon;
+  use crate::templates::components::PostgresLogo;
+  use crate::components::{Dropdown, ProfileIcon}; 
+%>
 
-  <div class="fixed-top-nav">
-    <nav class="navbar-web-app horizontal navbar-expand-lg" data-controller="search topnav-web-app">
+  <div class="fixed-top-nav" data-controller="navigation-navbar-web-app">
+    <nav class="navbar navbar-web-app horizontal navbar-expand-lg" data-controller="search topnav-web-app">
 
       <div class="controls">
         <!-- Toggles items that come from left nav -->
@@ -19,7 +21,7 @@
 
         <!-- Button to toggle collapsed menu for less than lg screens -->
         <button class="navbar-toggler collapsed topnav-controlls" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <% include!("../../../templates/components/profile_icon.html"); %>
+          <%+ ProfileIcon::new() %>
         </button>
       </div>
 
@@ -149,4 +151,4 @@
     </nav>
   </div>
 
-  <% include!("../../../templates/components/search_modal.html");%>
+  <% include!("../../../../../templates/components/search_modal.html");%>