Skip to content

Dan marketing nav update #1494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 2, 2024
Merged

Dan marketing nav update #1494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7145d1a
allow nav to have two colums, or have double nested draweres, add new…
chillenberger Jun 1, 2024
d0bd8cc
Merge branch 'master' into dan-marketing-nav-update
chillenberger Jun 1, 2024
6bd304a
remove marketing footnote about terms of credit
chillenberger Jun 1, 2024
3890d48
remove comments
chillenberger Jun 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 108 additions & 45 deletions pgml-dashboard/src/components/navigation/navbar/marketing/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@
use crate::templates::components::PostgresLogo;
use crate::components::navigation::navbar::marketing_link::MarketingLink;
use crate::components::static_nav_link::StaticNavLink;
use pgml_components::Component;

let solutions_links = vec![
let solutions_use_cases_links = vec![
StaticNavLink::new("Search".to_string(), "/docs/guides/improve-search-results-with-machine-learning".to_string()).icon("feature_search"),
StaticNavLink::new("Chatbots".to_string(), "/chatbot".to_string()).icon("smart_toy"),
StaticNavLink::new("Site Search".to_string(), "/test2".to_string()).icon("manage_search").disabled(true),
StaticNavLink::new("Fraud Detection".to_string(), "/test2".to_string()).icon("e911_emergency").disabled(true),
StaticNavLink::new("Forecasting".to_string(), "/test2".to_string()).icon("avg_pace").disabled(true),
];

let solutions_tasks_links = vec![
StaticNavLink::new("RAG".to_string(), "/test2".to_string()).icon("manage_search").disabled(true),
StaticNavLink::new("NLP".to_string(), "/docs/guides/natural-language-processing".to_string()).icon("description"),
StaticNavLink::new("Supervised Learning".to_string(), "/docs/guides/supervised-learning".to_string()).icon("model_training"),
StaticNavLink::new("Embeddings".to_string(), "/docs/api/sql-extension/pgml.embed".to_string()).icon("subtitles"),
StaticNavLink::new("Vector Database".to_string(), "/docs/product/vector-database".to_string()).icon("open_with"),
];

let company_links = vec![
Expand All @@ -17,21 +24,45 @@
StaticNavLink::new("Contact".to_string(), "/contact".to_string()).icon("alternate_email")
];

struct MobileNavs {
collapse: String,
links: Vec<StaticNavLink>
struct DrawerNav {
collapse_name: String,
links: Vec<Component>,
to_expand: Vec<String>
}

let mobile_nav_items = vec![
MobileNavs {
collapse: "solutions-collapse".to_string(),
links: solutions_links.clone()
},
MobileNavs {
collapse: "company-collapse".to_string(),
links: company_links.clone()
}
];
let drawer = |item: DrawerNav| {
let collapse_name = item.collapse_name;

let links = item.links.iter().map(|link| {
link.clone().render_once().unwrap()
}).collect::<Vec<String>>().join("\n");

let to_expand = item.to_expand.join(" ");

format!(r#"
<div class="nav-item collapse-horizontal {collapse_name} collapse drawer-submenu {to_expand}">
<ul class="sub-menu-dropdown mb-5 d-flex flex-column gap-3">
<a class="btn btn-tertiary-web-app" data-bs-toggle="collapse" data-bs-target=".{collapse_name}">
<span class="material-symbols-outlined icon-back-btn">
arrow_back
</span>
Back
</a>
{links}
</ul>
</div>
"#)
};

let link_to_drawer = |name: &str, target: &str| {
format!(r##"
<li class="nav-item d-flex align-items-center d-flex d-xl-none">
<a class="nav-link p-0 fw-semibold" href="#" data-bs-toggle="collapse" data-bs-target=".{target}">{name}</a>
</li>
"##)
};

let close_mobile_main_nav_items = vec!["solutions-collapse", "company-collapse"];
%>

<div class="sticky-top-nav" data-controller="navigation-navbar-marketing">
Expand All @@ -57,18 +88,19 @@

<div class="collapse navbar-collapse drawer-submenu-container navbarSupportedContent" id="navbarSupportedContent">
<!-- Main Menu -->
<div class="nav-item w-100 d-xl-flex flex-column flex-xl-row align-items-xl-center collapse collapse-horizontal drawer-submenu <% for item in &mobile_nav_items {%> <%- item.collapse %><% } %> show">
<div class="nav-item w-100 d-xl-flex flex-column flex-xl-row align-items-xl-center collapse collapse-horizontal drawer-submenu <% for item in close_mobile_main_nav_items {%> <%- item %><% } %> solutions-collapse show">
<ul class="navbar-nav flex-grow-1 gap-4 me-auto my-4 my-xl-0">

<% if !standalone_dashboard { %>
<div class="d-none d-xl-flex">
<%+ MarketingLink::new()
.name("Solutions")
.links(solutions_links.clone()) %>
.links(solutions_tasks_links.clone())
.title_col1("ml & ai tasks")
.links_col2(solutions_use_cases_links.clone())
.title_col2("use cases") %>
</div>
<li class="nav-item d-flex align-items-center d-flex d-xl-none">
<a class="nav-link p-0 fw-semibold" href="#" data-bs-toggle="collapse" data-bs-target=".solutions-collapse">Solutions</a>
</li>
<%- link_to_drawer("Solutions", "solutions-collapse") %>

<%+ MarketingLink::new().link(StaticNavLink::new("Pricing".to_string(), "/pricing".to_string())) %>
<% } %>
Expand All @@ -82,9 +114,7 @@
.name("Company")
.links(company_links.clone()) %>
</div>
<li class="nav-item d-flex align-items-center d-flex d-xl-none">
<a class="nav-link p-0 fw-semibold" href="#" data-bs-toggle="collapse" data-bs-target=".company-collapse">Company</a>
</li>
<%- link_to_drawer("Company", "company-collapse") %>
<% } %>

<li class="nav-item d-none d-xl-flex align-items-center">
Expand Down Expand Up @@ -133,27 +163,60 @@
</ul>
</div>


<!-- subnavs for less than large screens -->
<% for item in mobile_nav_items { %>
<div class="nav-item collapse-horizontal <%- item.collapse %> collapse drawer-submenu">
<ul class="sub-menu-dropdown mb-5 d-flex flex-column gap-3">
<a class="btn btn-tertiary-web-app" data-bs-toggle="collapse" data-bs-target=".<%- item.collapse%>">
<span class="material-symbols-outlined icon-back-btn">
arrow_back
</span>
Back
</a>
<% for link in item.links { %>
<%+ MarketingLink::new().link(
StaticNavLink::new(link.name.to_string(), link.href.to_string())
.disabled(link.disabled)
) %>
<% } %>
</ul>
</div>
<% } %>
</div>
<%- drawer(
DrawerNav {
collapse_name: "company-collapse".to_string(),
links:
company_links.iter().map(|link| {
MarketingLink::new().link(
StaticNavLink::new(link.name.to_string(), link.href.to_string())
.disabled(link.disabled))
.into()
}).collect::<Vec<Component>>(),
to_expand: vec![]
}
) %>

<%- drawer(
DrawerNav {
collapse_name: "solutions-tasks-collapse".to_string(),
links:
solutions_tasks_links.iter().map(|link| {
MarketingLink::new().link(
StaticNavLink::new(link.name.to_string(), link.href.to_string())
.disabled(link.disabled))
.into()
}).collect::<Vec<Component>>(),
to_expand: vec![]
}
) %>

<%- drawer(
DrawerNav {
collapse_name: "solutions-use-cases-collapse".to_string(),
links:
solutions_use_cases_links.iter().map(|link| {
MarketingLink::new().link(
StaticNavLink::new(link.name.to_string(), link.href.to_string())
.disabled(link.disabled))
.into()
}).collect::<Vec<Component>>(),
to_expand: vec![]
}
) %>

<%- drawer(
DrawerNav {
collapse_name: "solutions-collapse".to_string(),
links:
vec![
Component::from(link_to_drawer("Tasks", "solutions-tasks-collapse")),
Component::from(link_to_drawer("Use Cases", "solutions-use-cases-collapse"))
],
to_expand: vec!["solutions-tasks-collapse".to_string(), "solutions-use-cases-collapse".to_string()]
}
) %>

</div>
</nav>
Expand Down
29 changes: 21 additions & 8 deletions pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,20 @@ li[data-controller="navigation-navbar-marketing-link"] {
color: #{$slate-shade-100};
}

.dropdown-list {
.dropdown-container {
display: flex;
}
}
.dropdown-container {
display: none;
flex-direction: row;
position: absolute;
top: 100%;
background: #{$gray-100};
border-radius: $border-radius;
min-width: 12.5rem;
padding: 1.5rem;
}

&:active {
.nav-link {
Expand All @@ -43,17 +53,14 @@ li[data-controller="navigation-navbar-marketing-link"] {

.dropdown-list {
list-style-type: none; /* Remove bullets */
padding: 1.5rem;
padding: 0px;
margin: 0;

background: #{$gray-100};
color: #{$gray-900};
position: absolute;
top: 100%;
text-wrap: nowrap;
border-radius: $border-radius;
min-width: 12.5rem;
display: none;
display: flex;
flex-direction: column;
gap: 0.75rem;

Expand Down Expand Up @@ -115,8 +122,13 @@ li[data-controller="navigation-navbar-marketing-link"] {
}
}
}

.dropdown-list::before {

.col-title {
color: #{$gray-400};
padding-bottom: 12px;
}

.dropdown-container::before {
content: "";
width: 0;
height: 0;
Expand All @@ -126,6 +138,7 @@ li[data-controller="navigation-navbar-marketing-link"] {
border-right: 10px solid transparent;
top: -17px;
position: absolute;
left: 25px;
}
}

21 changes: 21 additions & 0 deletions pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,20 @@ pub struct MarketingLink {
name: String,
link: Option<NavLink>,
links: Vec<NavLink>,
links_col2: Vec<NavLink>,
title_col1: Option<String>,
title_col2: Option<String>,
}

impl MarketingLink {
pub fn new() -> MarketingLink {
MarketingLink {
name: String::from("Link Name"),
links: Vec::new(),
links_col2: Vec::new(),
link: None,
title_col1: None,
title_col2: None,
}
}

Expand All @@ -34,6 +40,21 @@ impl MarketingLink {
self.link = Some(link);
self
}

pub fn links_col2(mut self, links: Vec<NavLink>) -> MarketingLink {
self.links_col2 = links;
self
}

pub fn title_col1(mut self, title: &str) -> MarketingLink {
self.title_col1 = Some(title.to_owned());
self
}

pub fn title_col2(mut self, title: &str) -> MarketingLink {
self.title_col2 = Some(title.to_owned());
self
}
}

component!(MarketingLink);
52 changes: 44 additions & 8 deletions pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,54 @@

<%
use crate::components::static_nav_link::StaticNavLink as NavLink;

let col_title = |title: String| {format!(r#"
<div class="w-100 d-flex col-title text-uppercase legal-text fw-bold">{}</div>"#, title)
};

let list_item = |link: NavLink| {
let is_disabled = if link.disabled { "disabled" } else { "" };
let icon = link.icon.unwrap();
let href = link.href;
let name = link.name;
format!(r#"
<li class="d-flex gap-3 {is_disabled}">
<span class="material-symbols-outlined" style="width: 16px; height: 16px;">{icon}</span>
<a class="submenu-link" href="{href}">{name}</a>
</li>"#)
};
%>

<li class="nav-item d-flex align-items-center position-relative" data-controller="navigation-navbar-marketing-link">
<div class="nav-item-container">
<% if links.len() > 0 { %>
<div class="nav-link p-0"><%- name %></div>

<div class="position-absolute w-100" style="height: 20px;">
<ul class="dropdown-list">
<% for link in links { %>
<li class="d-flex gap-3 <% if link.disabled { %>disabled<% } %>">
<span class="material-symbols-outlined" style="width: 16px; height: 16px;"><%- link.icon.unwrap() %></span>
<a class="submenu-link" href="<%- link.href %>"><%- link.name %></a>
</li>
<div class="position-absolute w-100 d-flex flex-row" style="height: 20px;">
<div class="dropdown-container gap-3">
<div>
<% if title_col1.is_some() {%>
<%- col_title(title_col1.unwrap()) %>
<% } %>
<ul class="dropdown-list">
<% for link in links { %>
<%- list_item(link) %>
<% } %>
</ul>
</div>
<% if !links_col2.is_empty() {%>
<div>
<% if title_col2.is_some() {%>
<%- col_title(title_col2.unwrap()) %>
<% } %>
<ul class="dropdown-list">
<% for link in links_col2 { %>
<%- list_item(link) %>
<% } %>
</ul>
</div>
<% } %>
</ul>
</div>
</div>

<% } else { %>
Expand Down
4 changes: 0 additions & 4 deletions pgml-dashboard/src/components/sections/footers/marketing_footer/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,5 @@ <h5 class="h5 d-flex align-items-center gap-2 mb-5">
<div class="container">
<p class="rights d-flex justify-content-center justify-content-sm-start">PostgresML 2023 Ⓒ All rights reserved.</p>
</div>

<div class="container">
<p class="legal-text text-white-300"><span class="mb-1">*</span>Complete your profile to get $100 in free usage credits towards your first AI engine. See Terms of Service.</p>
</div>
</div>
</div>