🌐 AI搜索 & 代理 主页
Skip to content

Commit 5661eec

Browse files
chillenbergerchillenberger
authored
Dan marketing nav update (#1494)
1 parent c557ce0 commit 5661eec

File tree

5 files changed

+194
-65
lines changed

5 files changed

+194
-65
lines changed

‎pgml-dashboard/src/components/navigation/navbar/marketing/template.html‎

Lines changed: 108 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,19 @@
33
use crate::templates::components::PostgresLogo;
44
use crate::components::navigation::navbar::marketing_link::MarketingLink;
55
use crate::components::static_nav_link::StaticNavLink;
6+
use pgml_components::Component;
67

7-
let solutions_links = vec![
8+
let solutions_use_cases_links = vec![
9+
StaticNavLink::new("Search".to_string(), "/docs/guides/improve-search-results-with-machine-learning".to_string()).icon("feature_search"),
810
StaticNavLink::new("Chatbots".to_string(), "/chatbot".to_string()).icon("smart_toy"),
9-
StaticNavLink::new("Site Search".to_string(), "/test2".to_string()).icon("manage_search").disabled(true),
10-
StaticNavLink::new("Fraud Detection".to_string(), "/test2".to_string()).icon("e911_emergency").disabled(true),
11-
StaticNavLink::new("Forecasting".to_string(), "/test2".to_string()).icon("avg_pace").disabled(true),
11+
];
12+
13+
let solutions_tasks_links = vec![
14+
StaticNavLink::new("RAG".to_string(), "/test2".to_string()).icon("manage_search").disabled(true),
15+
StaticNavLink::new("NLP".to_string(), "/docs/guides/natural-language-processing".to_string()).icon("description"),
16+
StaticNavLink::new("Supervised Learning".to_string(), "/docs/guides/supervised-learning".to_string()).icon("model_training"),
17+
StaticNavLink::new("Embeddings".to_string(), "/docs/api/sql-extension/pgml.embed".to_string()).icon("subtitles"),
18+
StaticNavLink::new("Vector Database".to_string(), "/docs/product/vector-database".to_string()).icon("open_with"),
1219
];
1320

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

20-
struct MobileNavs {
21-
collapse: String,
22-
links: Vec<StaticNavLink>
27+
struct DrawerNav {
28+
collapse_name: String,
29+
links: Vec<Component>,
30+
to_expand: Vec<String>
2331
}
2432

25-
let mobile_nav_items = vec![
26-
MobileNavs {
27-
collapse: "solutions-collapse".to_string(),
28-
links: solutions_links.clone()
29-
},
30-
MobileNavs {
31-
collapse: "company-collapse".to_string(),
32-
links: company_links.clone()
33-
}
34-
];
33+
let drawer = |item: DrawerNav| {
34+
let collapse_name = item.collapse_name;
35+
36+
let links = item.links.iter().map(|link| {
37+
link.clone().render_once().unwrap()
38+
}).collect::<Vec<String>>().join("\n");
39+
40+
let to_expand = item.to_expand.join(" ");
41+
42+
format!(r#"
43+
<div class="nav-item collapse-horizontal {collapse_name} collapse drawer-submenu {to_expand}">
44+
<ul class="sub-menu-dropdown mb-5 d-flex flex-column gap-3">
45+
<a class="btn btn-tertiary-web-app" data-bs-toggle="collapse" data-bs-target=".{collapse_name}">
46+
<span class="material-symbols-outlined icon-back-btn">
47+
arrow_back
48+
</span>
49+
Back
50+
</a>
51+
{links}
52+
</ul>
53+
</div>
54+
"#)
55+
};
56+
57+
let link_to_drawer = |name: &str, target: &str| {
58+
format!(r##"
59+
<li class="nav-item d-flex align-items-center d-flex d-xl-none">
60+
<a class="nav-link p-0 fw-semibold" href="#" data-bs-toggle="collapse" data-bs-target=".{target}">{name}</a>
61+
</li>
62+
"##)
63+
};
64+
65+
let close_mobile_main_nav_items = vec!["solutions-collapse", "company-collapse"];
3566
%>
3667

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

5889
<div class="collapse navbar-collapse drawer-submenu-container navbarSupportedContent" id="navbarSupportedContent">
5990
<!-- Main Menu -->
60-
<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">
91+
<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">
6192
<ul class="navbar-nav flex-grow-1 gap-4 me-auto my-4 my-xl-0">
6293

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

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

90120
<li class="nav-item d-none d-xl-flex align-items-center">
@@ -133,27 +163,60 @@
133163
</ul>
134164
</div>
135165

136-
137166
<!-- subnavs for less than large screens -->
138-
<% for item in mobile_nav_items { %>
139-
<div class="nav-item collapse-horizontal <%- item.collapse %> collapse drawer-submenu">
140-
<ul class="sub-menu-dropdown mb-5 d-flex flex-column gap-3">
141-
<a class="btn btn-tertiary-web-app" data-bs-toggle="collapse" data-bs-target=".<%- item.collapse%>">
142-
<span class="material-symbols-outlined icon-back-btn">
143-
arrow_back
144-
</span>
145-
Back
146-
</a>
147-
<% for link in item.links { %>
148-
<%+ MarketingLink::new().link(
149-
StaticNavLink::new(link.name.to_string(), link.href.to_string())
150-
.disabled(link.disabled)
151-
) %>
152-
<% } %>
153-
</ul>
154-
</div>
155-
<% } %>
156-
</div>
167+
<%- drawer(
168+
DrawerNav {
169+
collapse_name: "company-collapse".to_string(),
170+
links:
171+
company_links.iter().map(|link| {
172+
MarketingLink::new().link(
173+
StaticNavLink::new(link.name.to_string(), link.href.to_string())
174+
.disabled(link.disabled))
175+
.into()
176+
}).collect::<Vec<Component>>(),
177+
to_expand: vec![]
178+
}
179+
) %>
180+
181+
<%- drawer(
182+
DrawerNav {
183+
collapse_name: "solutions-tasks-collapse".to_string(),
184+
links:
185+
solutions_tasks_links.iter().map(|link| {
186+
MarketingLink::new().link(
187+
StaticNavLink::new(link.name.to_string(), link.href.to_string())
188+
.disabled(link.disabled))
189+
.into()
190+
}).collect::<Vec<Component>>(),
191+
to_expand: vec![]
192+
}
193+
) %>
194+
195+
<%- drawer(
196+
DrawerNav {
197+
collapse_name: "solutions-use-cases-collapse".to_string(),
198+
links:
199+
solutions_use_cases_links.iter().map(|link| {
200+
MarketingLink::new().link(
201+
StaticNavLink::new(link.name.to_string(), link.href.to_string())
202+
.disabled(link.disabled))
203+
.into()
204+
}).collect::<Vec<Component>>(),
205+
to_expand: vec![]
206+
}
207+
) %>
208+
209+
<%- drawer(
210+
DrawerNav {
211+
collapse_name: "solutions-collapse".to_string(),
212+
links:
213+
vec![
214+
Component::from(link_to_drawer("Tasks", "solutions-tasks-collapse")),
215+
Component::from(link_to_drawer("Use Cases", "solutions-use-cases-collapse"))
216+
],
217+
to_expand: vec!["solutions-tasks-collapse".to_string(), "solutions-use-cases-collapse".to_string()]
218+
}
219+
) %>
157220

158221
</div>
159222
</nav>

‎pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,20 @@ li[data-controller="navigation-navbar-marketing-link"] {
2626
color: #{$slate-shade-100};
2727
}
2828

29-
.dropdown-list {
29+
.dropdown-container {
3030
display: flex;
3131
}
3232
}
33+
.dropdown-container {
34+
display: none;
35+
flex-direction: row;
36+
position: absolute;
37+
top: 100%;
38+
background: #{$gray-100};
39+
border-radius: $border-radius;
40+
min-width: 12.5rem;
41+
padding: 1.5rem;
42+
}
3343

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

4454
.dropdown-list {
4555
list-style-type: none; /* Remove bullets */
46-
padding: 1.5rem;
56+
padding: 0px;
4757
margin: 0;
4858

4959
background: #{$gray-100};
5060
color: #{$gray-900};
51-
position: absolute;
52-
top: 100%;
5361
text-wrap: nowrap;
5462
border-radius: $border-radius;
55-
min-width: 12.5rem;
56-
display: none;
63+
display: flex;
5764
flex-direction: column;
5865
gap: 0.75rem;
5966

@@ -115,8 +122,13 @@ li[data-controller="navigation-navbar-marketing-link"] {
115122
}
116123
}
117124
}
118-
119-
.dropdown-list::before {
125+
126+
.col-title {
127+
color: #{$gray-400};
128+
padding-bottom: 12px;
129+
}
130+
131+
.dropdown-container::before {
120132
content: "";
121133
width: 0;
122134
height: 0;
@@ -126,6 +138,7 @@ li[data-controller="navigation-navbar-marketing-link"] {
126138
border-right: 10px solid transparent;
127139
top: -17px;
128140
position: absolute;
141+
left: 25px;
129142
}
130143
}
131144

‎pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,20 @@ pub struct MarketingLink {
88
name: String,
99
link: Option<NavLink>,
1010
links: Vec<NavLink>,
11+
links_col2: Vec<NavLink>,
12+
title_col1: Option<String>,
13+
title_col2: Option<String>,
1114
}
1215

1316
impl MarketingLink {
1417
pub fn new() -> MarketingLink {
1518
MarketingLink {
1619
name: String::from("Link Name"),
1720
links: Vec::new(),
21+
links_col2: Vec::new(),
1822
link: None,
23+
title_col1: None,
24+
title_col2: None,
1925
}
2026
}
2127

@@ -34,6 +40,21 @@ impl MarketingLink {
3440
self.link = Some(link);
3541
self
3642
}
43+
44+
pub fn links_col2(mut self, links: Vec<NavLink>) -> MarketingLink {
45+
self.links_col2 = links;
46+
self
47+
}
48+
49+
pub fn title_col1(mut self, title: &str) -> MarketingLink {
50+
self.title_col1 = Some(title.to_owned());
51+
self
52+
}
53+
54+
pub fn title_col2(mut self, title: &str) -> MarketingLink {
55+
self.title_col2 = Some(title.to_owned());
56+
self
57+
}
3758
}
3859

3960
component!(MarketingLink);

‎pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,54 @@
11

2+
<%
3+
use crate::components::static_nav_link::StaticNavLink as NavLink;
4+
5+
let col_title = |title: String| {format!(r#"
6+
<div class="w-100 d-flex col-title text-uppercase legal-text fw-bold">{}</div>"#, title)
7+
};
8+
9+
let list_item = |link: NavLink| {
10+
let is_disabled = if link.disabled { "disabled" } else { "" };
11+
let icon = link.icon.unwrap();
12+
let href = link.href;
13+
let name = link.name;
14+
format!(r#"
15+
<li class="d-flex gap-3 {is_disabled}">
16+
<span class="material-symbols-outlined" style="width: 16px; height: 16px;">{icon}</span>
17+
<a class="submenu-link" href="{href}">{name}</a>
18+
</li>"#)
19+
};
20+
%>
21+
222
<li class="nav-item d-flex align-items-center position-relative" data-controller="navigation-navbar-marketing-link">
323
<div class="nav-item-container">
424
<% if links.len() > 0 { %>
525
<div class="nav-link p-0"><%- name %></div>
626

7-
<div class="position-absolute w-100" style="height: 20px;">
8-
<ul class="dropdown-list">
9-
<% for link in links { %>
10-
<li class="d-flex gap-3 <% if link.disabled { %>disabled<% } %>">
11-
<span class="material-symbols-outlined" style="width: 16px; height: 16px;"><%- link.icon.unwrap() %></span>
12-
<a class="submenu-link" href="<%- link.href %>"><%- link.name %></a>
13-
</li>
27+
<div class="position-absolute w-100 d-flex flex-row" style="height: 20px;">
28+
<div class="dropdown-container gap-3">
29+
<div>
30+
<% if title_col1.is_some() {%>
31+
<%- col_title(title_col1.unwrap()) %>
32+
<% } %>
33+
<ul class="dropdown-list">
34+
<% for link in links { %>
35+
<%- list_item(link) %>
36+
<% } %>
37+
</ul>
38+
</div>
39+
<% if !links_col2.is_empty() {%>
40+
<div>
41+
<% if title_col2.is_some() {%>
42+
<%- col_title(title_col2.unwrap()) %>
43+
<% } %>
44+
<ul class="dropdown-list">
45+
<% for link in links_col2 { %>
46+
<%- list_item(link) %>
47+
<% } %>
48+
</ul>
49+
</div>
1450
<% } %>
15-
</ul>
51+
</div>
1652
</div>
1753

1854
<% } else { %>

‎pgml-dashboard/src/components/sections/footers/marketing_footer/template.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,5 @@ <h5 class="h5 d-flex align-items-center gap-2 mb-5">
8989
<div class="container">
9090
<p class="rights d-flex justify-content-center justify-content-sm-start">PostgresML 2023 Ⓒ All rights reserved.</p>
9191
</div>
92-
93-
<div class="container">
94-
<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>
95-
</div>
9692
</div>
9793
</div>

0 commit comments

Comments
 (0)