left nav works with shift checkpoint

postgresml · Apr 25, 2024 · 8122f77 · 8122f77
1 parent b01f9d7
commit 8122f77
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 71 deletions.
diff --git a/pgml-dashboard/Cargo.lock b/pgml-dashboard/Cargo.lock
diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html
@@ -5,7 +5,7 @@
 <div class="dropdown <% if expandable { %>expandable<% } %>">
   <% if let DropdownValue::Icon(icon) = value { %>
   <a
-    class="topnav-controlls dropdown-toggle"
+    class="top-nav-controls dropdown-toggle"
     role="button"
     data-bs-toggle="dropdown"
     data-bs-offset="<%= offset %>"

diff --git a/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js b/pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js
@@ -17,16 +17,16 @@ export default class extends Controller {
     document.addEventListener("turbo:load", this.callback);
   }
 
+  // Find link element in the left nav that matches the current window 
+  // location and set to active
   setLeftNavToLocation() {
     this.removeAllActive();
 
-    let tag = "a[href='" + window.location.pathname + "']";
-    console.log("tag: " + tag)
-    let elements = this.element.querySelectorAll(tag);
+    let tag = "a[href='" + window.location.pathname + window.location.search + "']";
+    let element = this.element.querySelector(tag);
 
-    if (elements.length > 0) {
-      console.log("found element " + elements[0].href)
-      elements[0].classList.add("active");
+    if (element) {
+      element.classList.add("active");
     }
   }
 
@@ -37,6 +37,7 @@ export default class extends Controller {
     }
   }
 
+  // Remove event listener when controller is disconnected
   disconnect() {
     document.removeEventListener("turbo:load", this.callback);
   }

diff --git a/pgml-dashboard/src/components/left_nav_menu/template.html b/pgml-dashboard/src/components/left_nav_menu/template.html
@@ -2,7 +2,7 @@
     <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<% } %>" >
+        <li class="menu-item leftnav-collapse-affect collapsed <% if link.disabled { %>disabled<% } %>" >
             <a
             data-left-nav-menu-target="link"
             class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled  { %> disabled <% } %> <% if link.active { %> active <% } %>"
@@ -11,7 +11,7 @@
             <% if link.icon.as_ref().is_some() { %>
             <span class="material-symbols-outlined"><%- link.icon.unwrap() %></span>
             <% } %>
-            <span class="collapse collapse-horizontal leftnav-collapse show"><%= link.name %></span>
+            <span class="collapse collapse-horizontal leftnav-collapse"><%= link.name %></span>
             </a>
         </li>
         <% } %>

diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html b/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
@@ -1,19 +1,22 @@
 
 <% use crate::components::{LeftNavMenu, Dropdown}; %>
 <div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app" data-turbo-permanent id='<%- id.unwrap_or_else(|| String::from("defaultId"))%>'>
-  <nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
-    <div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
+  <nav 
+    class="leftnav nav-pills h-100" 
+    data-controller="extend-bs-collapse" 
+    data-extend-bs-collapse-affected-value=".leftnav-collapse-affect" 
+    data-action="mousemove@document->navigation-left-nav-web-app#checkIfHover">
+    <div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect collapsed">
       <div class="d-flex flex-column">
-        <button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
+
+        <!-- <button class="btn btn-left-nav-toggle mb-4" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
           <span class="left-nav-toggle-icon material-symbols-outlined leftnav-collapse-affect expanded">
             keyboard_double_arrow_left
           </span>
           <span class="collapse collapse-horizontal leftnav-collapse show" data-extend-bs-collapse-target="stateReference"></span>
-        </button>
+        </button> -->
 
-        <div class="mb-4">
-          <%+ Dropdown::nav(dropdown_nav.links).collapsable() %>
-        </div>
+        <span class="leftnav-collapse collapse" data-extend-bs-collapse-target="stateReference" data-navigation-left-nav-web-app-target="stateReference"></span>
         <%+ LeftNavMenu { nav: upper_nav } %>
       </div>
       <%+ LeftNavMenu { nav: lower_nav} %>

diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js
@@ -1,8 +1,26 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = [];
+  static targets = ['stateReference']
+  expand() {
+    if( !this.stateReferenceTarget.classList.contains("show")) {
+      const elements = this.element.getElementsByClassName('leftnav-collapse')
+      for( const element of elements) {
+        bootstrap.Collapse.getOrCreateInstance(element).show()
+      }
+    }
+  }
 
-  connect() {}
+  collapse() {
+    if( this.stateReferenceTarget.classList.contains("show")) {
+      const elements = this.element.getElementsByClassName('leftnav-collapse')
+      for( const element of elements) {
+        bootstrap.Collapse.getOrCreateInstance(element, {toggle: false}).hide()
+      }
+    }
+  }
 
+  checkIfHover() {
+    this.element.matches(':hover') ? this.expand() : this.collapse()
+  }
 }
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs b/pgml-dashboard/src/components/navigation/navbar/web_app/mod.rs
@@ -9,14 +9,16 @@ pub struct WebApp {
     pub standalone_dashboard: bool,
     pub links: Vec<StaticNavLink>,
     pub account_management_nav: StaticNav,
+    pub deployment_controls: StaticNav,
 }
 
 impl WebApp {
-    pub fn new(links: Vec<StaticNavLink>, account_management_nav: StaticNav) -> WebApp {
+    pub fn new(links: Vec<StaticNavLink>, deployment_controls: StaticNav) -> WebApp {
         WebApp {
             standalone_dashboard: config::standalone_dashboard(),
             links,
-            account_management_nav,
+            account_management_nav: StaticNav::default(),
+            deployment_controls,
         }
     }
 }

diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/template.html b/pgml-dashboard/src/components/navigation/navbar/web_app/template.html
@@ -9,19 +9,23 @@
 
       <div class="controls">
         <!-- Toggles items that come from left nav -->
-        <button class="navbar-toggler collapsed topnav-controlls" type="button" data-bs-toggle="collapse" data-bs-target="#leftNavItems" aria-controls="LeftNavItems" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="material-symbols-outlined" style="font-size: 44px">
-            menu
-          </span>
+        <button class="navbar-toggler collapsed top-nav-controls" type="button" data-bs-toggle="collapse" data-bs-target="#leftNavItems" aria-controls="LeftNavItems" aria-expanded="false" aria-label="Toggle navigation">
+          <div class="mobile-left-nav-controls rounded-1">
+            <img class="m-2" src="/dashboard/static/images/owl_white.webp" alt="postgresml_owl" width="12" height="16">
+          </div>
         </button>
 
         <div class="web-app-left-nav-sized-container">
-          <%+ PostgresLogo::new("/") %>
+          <%+ PostgresLogo::new("/").hide_owl() %>
         </div>
 
         <!-- 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">
-          <%+ ProfileIcon::new() %>
+        <button class="navbar-toggler collapsed top-nav-controls" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <svg xmlns="http://www.w3.org/2000/svg" width="33" height="18" viewBox="0 0 33 18" fill="none">
+            <line x1="8.04297" y1="17.25" x2="24.543" y2="17.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="5.04297" y1="9.25" x2="27.543" y2="9.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="1.04297" y1="1.25" x2="31.543" y2="1.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
         </button>
       </div>
 
@@ -31,33 +35,31 @@
         <div class="nav-item w-100 d-flex flex-column flex-lg-row align-items-lg-center collapse collapse-horizontal horizontal-collapse show drawer-submenu">
           <ul class="navbar-nav flex-grow-1 ps-4 p-lg-0 d-none d-lg-block">
             <li class="nav-item d-flex align-items-center">
-              <button type="text" class="btn-search d-flex justify-content-between" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
-                Search
-                <span class="material-symbols-outlined">
-                  search
-                </span>
-              </button>
+              <div class="deployment_controls">
+                <%+ Dropdown::nav(deployment_controls.links) %>
+              </div>
             </li>
           </ul>
 
           <!-- Main nav links for lg screens -->
           <ul class="navbar-nav gap-3 mb-0 d-none d-lg-flex">
             <li class="align-items-center d-none d-lg-flex">
-              <%- GithubIcon{show_stars: false}.render_once().unwrap() %>
-            </li>
-            <li class="align-items-center d-flex d-lg-none">
-              <a class="nav-link p-lg-0" href="https://github.com/postgresml/postgresml">Open Source</a>
+              <button type="text" class="btn nav-link btn-search-input-webapp border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
+                <span class="material-symbols-outlined">search</span>
+              </button>
             </li>
 
             <li class="nav-item d-flex align-items-center">
               <a class="nav-link p-lg-0" href="/docs">Docs</a>
             </li>
 
-            <div class="vr my-2 opacity-100 d-lg-block d-none" style="width: 2px"></div>
-
             <li class="nav-item d-flex align-items-center">
               <a class="nav-link p-lg-0" href="/blog">Blog</a>
             </li>
+
+            <li class="nav-item d-flex align-items-center">
+              <a class="nav-link p-lg-0" href="/support">Support</a>
+            </li>
 
             <% if !account_management_nav.links.is_empty() { %>
             <li class="d-none d-lg-flex nav-item align-items-center">
@@ -75,8 +77,13 @@
 
           <!-- Main nav links for less than lg screens -->
           <ul class="sub-menu-dropdown mb-2 d-lg-none">
-            <li class="menu-item rounded-0 d-flex align-items-center">
-              <a href="https://github.com/postgresml/postgresml">Open Source</a>
+            <li class="nav-item d-flex align-items-center">
+              <button type="text" class="btn-search d-flex justify-content-between w-100 mx-4 mb-4" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
+                Search
+                <span class="material-symbols-outlined">
+                  search
+                </span>
+              </button>
             </li>
 
             <li class="menu-item rounded-0 d-flex align-items-center">
@@ -86,12 +93,18 @@
             <li class="menu-item rounded-0 d-flex align-items-center">
               <a href="/blog">Blog</a>
             </li>
+
+            <li class="menu-item rounded-0 d-flex align-items-center">
+              <a href="/support">Support</a>
+            </li>
 
             <% if !standalone_dashboard { %>
+            <% if !account_management_nav.links.is_empty() { %>
             <li class="menu-item rounded-0 d-flex align-items-center">
               <a href="#" data-bs-toggle="collapse" data-bs-target=".horizontal-collapse">Account Management</a>
             </li>
             <% } %>
+            <% } %>
           </ul>
         </div>
 
@@ -123,14 +136,6 @@
         <div class="collapse navbar-collapse" id="leftNavItems">
           <div class="nav-item w-100 d-flex flex-column flex-lg-row collapse show drawer-submenu">
             <ul class="sub-menu-dropdown mb-2 d-lg-none">
-              <li class="nav-item d-flex align-items-center">
-                <button type="text" class="btn-search d-flex justify-content-between w-100 mx-4 mb-4" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
-                  Search
-                  <span class="material-symbols-outlined">
-                    search
-                  </span>
-                </button>
-              </li>
               <% for link in links { %>
               <li class="menu-item rounded-0 d-flex align-items-center">
                 <a

diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss b/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss
@@ -45,4 +45,24 @@
             }
         }
     }
+
+    .deployment_controls {
+        min-width: 300px;
+    }
+
+    .sub-menu-dropdown {
+        background-color: #{$gray-800};
+    }
+
+    .top-nav-controls {
+        &:not(.collapsed) {
+            .mobile-left-nav-controls {
+                background-color: #{$neon-tint-100};
+            }
+        }
+
+        .mobile-left-nav-controls {
+            background-color: #{$gray-700};
+        }
+    }
 }
diff --git a/pgml-dashboard/src/components/postgres_logo/mod.rs b/pgml-dashboard/src/components/postgres_logo/mod.rs
@@ -6,20 +6,27 @@ use sailfish::TemplateOnce;
 pub struct PostgresLogo {
     link: String,
     bigger: bool,
+    hide_owl: bool,
 }
 
 impl PostgresLogo {
     pub fn new(link: &str) -> PostgresLogo {
         PostgresLogo {
             link: link.to_owned(),
             bigger: false,
+            hide_owl: false,
         }
     }
 
     pub fn bigger(mut self) -> PostgresLogo {
         self.bigger = true;
         self
     }
+
+    pub fn hide_owl(mut self) -> PostgresLogo {
+        self.hide_owl = true;
+        self
+    }
 }
 
 component!(PostgresLogo);
diff --git a/pgml-dashboard/src/components/postgres_logo/template.html b/pgml-dashboard/src/components/postgres_logo/template.html
@@ -5,7 +5,7 @@
 %>
 
 <a class="postgres-logo navbar-brand" href="<%- link %>">
-    <img src="/dashboard/static/images/owl_gradient.svg" alt="PostgresML Logo" height="<%- image_dimensions%>" width="<%- image_dimensions%>">
+    <img <% if hide_owl {%>class="d-none"<% } %>" src="/dashboard/static/images/owl_gradient.svg" alt="PostgresML Logo" height="<%- image_dimensions%>" width="<%- image_dimensions%>">
     <span class="position-relative overflow-visible text-white <%- postgres_size %> mb-0">
         Postgres<span class="<%- ml_size %>">ML</span>
     </span>