Skip to content

Commit 0414cfa

Browse files
LineIndentLineIndent
committed
wip site navigation
1 parent 3070df5 commit 0414cfa

File tree

4 files changed

+221
-103
lines changed

4 files changed

+221
-103
lines changed

‎docs/ai_builder/quickstart.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
## Some placeholder text ...

‎pcweb/components/docpage/navbar/navbar.py‎

Lines changed: 132 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
"""UI and logic for the navbar component."""
22

33
import reflex as rx
4+
from reflex.experimental import ClientStateVar
45

6+
from pcweb.pages.customers.views.bento_cards import _card
57
from pcweb.pages.docs import (
68
wrapping_react,
79
styling,
@@ -26,25 +28,32 @@
2628
from pcweb.pages.blog.paths import blog_data
2729

2830
from pcweb.components.docpage.navbar.navmenu.navmenu import nav_menu
29-
from pcweb.constants import CONTRIBUTING_URL, FORUM_URL, ROADMAP_URL, REFLEX_CLOUD_URL
31+
from pcweb.constants import (
32+
CONTRIBUTING_URL,
33+
FORUM_URL,
34+
ROADMAP_URL,
35+
REFLEX_CLOUD_URL,
36+
REFLEX_AI_BUILDER,
37+
)
3038

3139

3240
def resource_item(text: str, url: str, icon: str):
3341
return rx.el.li(
3442
rx.link(
3543
rx.box(
3644
rx.icon(icon, size=16, class_name="flex-shrink-0 text-slate-9"),
45+
rx.spacer(),
3746
rx.text(
3847
text,
39-
class_name="font-small text-slate-9 truncate",
48+
class_name="font-small text-slate-9 truncate text-start w-[100px]",
4049
),
4150
rx.spacer(),
4251
rx.icon(
4352
tag="chevron_right",
4453
size=14,
4554
class_name="flex-shrink-0 text-slate-12",
4655
),
47-
class_name="flex flex-row flex-nowrap items-center gap-3 hover:bg-slate-3 px-[1.125rem] py-2 rounded-md w-full transition-bg",
56+
class_name="flex flex-row flex-nowrap items-center gap-3 hover:bg-slate-3 px-[1.125rem] py-2 rounded-md w-full transition-bg justify-between",
4857
),
4958
class_name="w-full text-slate-9 hover:!text-slate-9",
5059
underline="none",
@@ -186,63 +195,114 @@ def blog_section() -> rx.Component:
186195
)
187196

188197

189-
def resources_section() -> rx.Component:
190-
return nav_menu.content(
191-
rx.el.ul(
192-
resource_item("Changelog", changelog.path, "list"),
193-
resource_item("Debugging Guide", errors.path, "bug"),
194-
resource_item("FAQ", faq.path, "circle-help"),
195-
resource_item("Contribute", CONTRIBUTING_URL, "code-xml"),
196-
resource_item("Roadmap", ROADMAP_URL, "route"),
197-
resource_item("Forum", FORUM_URL, "github"),
198-
class_name="items-start gap-1.5 gap-x-1.5 grid grid-cols-2 m-0 p-1.5 w-[492px] min-w-max",
198+
def link_button(label: str, url: str) -> rx.Component:
199+
common_cn = (
200+
"transition-color font-small desktop-only items-center justify-start p-1 "
201+
)
202+
203+
return rx.link(
204+
label,
205+
href=url,
206+
underline="none",
207+
_hover={"color": "var(--c-slate-11)"},
208+
class_name=common_cn + "text-slate-9",
209+
)
210+
211+
212+
def grid_card(title: str, description: str, url: str, image: str) -> rx.Component:
213+
return rx.link(
214+
rx.box(
215+
rx.text(title, class_name="text-slate-12 text-base font-semibold"),
216+
rx.el.button(
217+
rx.icon("chevron-right", class_name="text-slate-9 size-4"),
218+
class_name="size-6 group-hover:bg-slate-3 transition-bg rounded-md flex items-center justify-center",
219+
),
220+
class_name="flex flex-row items-center gap-2 justify-between",
221+
),
222+
rx.text(description, class_name="text-slate-9 text-sm font-medium"),
223+
rx.image(
224+
src=image,
225+
class_name="absolute bottom-0 right-0",
226+
),
227+
href=url,
228+
is_external=True,
229+
underline="none",
230+
class_name="w-[14.5rem] rounded-md shadow-small bg-white-1 border border-slate-4 flex flex-col gap-3 p-5 relative border-solid !h-[19.5625rem] overflow-hidden group",
231+
)
232+
233+
234+
def grid_card_unique(title: str, description: str, url: str, component) -> rx.Component:
235+
return rx.link(
236+
rx.box(
237+
rx.text(title, class_name="text-slate-12 text-base font-semibold"),
238+
rx.el.button(
239+
rx.icon("chevron-right", class_name="text-slate-9 size-4"),
240+
class_name="size-6 group-hover:bg-slate-3 transition-bg rounded-md flex items-center justify-center",
241+
),
242+
class_name="flex flex-row items-center gap-2 justify-between",
199243
),
244+
rx.text(description, class_name="text-slate-9 text-sm font-medium"),
245+
component,
246+
href=url,
247+
is_external=True,
248+
underline="none",
249+
class_name="w-[14.5rem] rounded-md shadow-small bg-white-1 border border-slate-4 flex flex-col gap-3 p-5 relative border-solid !h-[17.5625rem] overflow-hidden group",
200250
)
201251

202252

203-
def components_section() -> rx.Component:
253+
def new_resource_section():
204254
return nav_menu.content(
205255
rx.box(
256+
# Links
206257
rx.box(
207-
rx.el.h3(
208-
"Core Components",
209-
class_name="px-[1.125rem] py-3.5 font-smbold text-slate-12 truncate self-stretch",
210-
),
211-
rx.el.ul(
212-
resource_item(
213-
"Component Library", library.path, "layout-panel-left"
214-
),
215-
resource_item("Theming", styling.theming.path, "palette"),
216-
class_name="flex flex-col items-start gap-1.5 w-full",
217-
),
218-
class_name="flex flex-col items-start gap-1.5 p-1.5 w-[248px]",
258+
link_button("Changelog", changelog.path),
259+
link_button("Contributing", "/"),
260+
link_button("Discussions", "/"),
261+
link_button("FAQ", faq.path),
262+
class_name="flex flex-col w-full p-2",
219263
),
220-
rx.box(
221-
rx.el.h3(
222-
"Custom Components",
223-
class_name="px-[1.125rem] py-3.5 font-smbold text-slate-12 truncate self-stretch",
224-
),
225-
rx.el.ul(
226-
resource_item(
227-
"Community Library",
228-
custom_components.path,
229-
"blocks",
230-
),
231-
resource_item(
232-
"Wrapping React",
233-
wrapping_react.overview.path,
234-
"atom",
235-
),
236-
resource_item(
237-
"Publishing Components",
238-
custom_c.overview.path,
239-
"git-fork",
264+
class_name="flex flex-col w-full max-w-[9.1875rem] border-r border-slate-5",
265+
),
266+
# Grid cards
267+
rx.box(
268+
grid_card_unique(
269+
"Blog",
270+
"See what's new in the Reflex ecosystem.",
271+
f"/blog",
272+
_card(
273+
company="reflex",
274+
is_company=False,
275+
src=rx.color_mode_cond(
276+
"/logos/light/reflex.svg",
277+
"/logos/dark/reflex.svg",
240278
),
241-
class_name="flex flex-col items-start gap-1.5 w-full",
242279
),
243-
class_name="flex flex-col items-start gap-1.5 border-slate-5 bg-slate-1 p-1.5 border-l w-[280px]",
244280
),
245-
class_name="flex flex-row items-start m-0 w-full min-w-max",
281+
grid_card_unique(
282+
"Customers",
283+
"Meet the teams who chose Reflex.",
284+
"/customers",
285+
_card("bayesline"),
286+
),
287+
class_name="grid grid-cols-2 gap-3 p-3 bg-slate-1",
288+
),
289+
class_name="flex flex-row shadow-large rounded-xl bg-slate-2 border border-slate-5 w-[40.55rem] font-sans overflow-hidden",
290+
)
291+
292+
293+
def resources_section() -> rx.Component:
294+
return nav_menu.content(
295+
rx.el.ul(
296+
resource_item("Changelog", changelog.path, "list"),
297+
resource_item("Debugging Guide", errors.path, "bug"),
298+
resource_item("FAQ", faq.path, "circle-help"),
299+
resource_item("Contribute", CONTRIBUTING_URL, "code-xml"),
300+
resource_item("Roadmap", ROADMAP_URL, "route"),
301+
resource_item("Forum", FORUM_URL, "github"),
302+
resource_item("Blog", blogs.path, "blog"),
303+
resource_item("Blog", blogs.path, "rss"),
304+
resource_item("Templates", gallery.path, "layout-panel-top"),
305+
class_name="items-start gap-1.5 gap-x-1.5 grid grid-cols-2 m-0 p-1.5 w-[492px] min-w-max",
246306
),
247307
)
248308

@@ -273,74 +333,46 @@ def logo() -> rx.Component:
273333
)
274334

275335

336+
def doc_section():
337+
return nav_menu.content(
338+
rx.el.ul(
339+
resource_item("AI Builder Docs", changelog.path, "bot"),
340+
resource_item("Framework Docs", getting_started.introduction.path, "frame"),
341+
resource_item("Cloud Docs", "/", "server"),
342+
class_name="items-start gap-1.5 gap-x-1.5 grid grid-cols-1 m-0 p-1.5 w-[180px] min-w-max",
343+
),
344+
)
345+
346+
276347
def new_component_section() -> rx.Component:
277348
return nav_menu.root(
278349
nav_menu.list(
279350
nav_menu.item(
280351
logo(),
281352
),
282353
nav_menu.item(
283-
link_item("Docs", getting_started.introduction.path, "docs"),
284-
),
285-
nav_menu.item(
286-
link_item("Templates", gallery.path, "templates"),
354+
link_item("AI Builder", REFLEX_AI_BUILDER, "builder"),
287355
),
288356
nav_menu.item(
289-
new_menu_trigger("Blog", blogs.path, "blog"),
290-
blog_section(),
357+
link_item("Framework", "/", "framework"),
291358
),
292-
# Case Studies link isn't shown on docs pages
293359
nav_menu.item(
294-
new_menu_trigger("Case Studies", "/customers", "customers"),
295-
display=rx.cond(
296-
rx.State.router.page.path.contains("docs"),
297-
"none",
298-
"block",
299-
),
360+
link_item("Cloud", "/hosting", "hosting"),
300361
),
362+
# doc_section
363+
nav_menu.item(new_menu_trigger("Docs"), doc_section()),
301364
# Resources link is shown on docs pages
365+
nav_menu.item(new_menu_trigger("Resources"), new_resource_section()),
302366
nav_menu.item(
303-
new_menu_trigger("Resources"),
304-
resources_section(),
305-
display=rx.cond(
306-
rx.State.router.page.path.contains("docs"),
307-
"block",
308-
"none",
309-
),
310-
),
311-
# Components link is shown on non docs pages
312-
nav_menu.item(
313-
new_menu_trigger("Components", library.path, "library"),
314-
components_section(),
315-
display=rx.cond(
316-
rx.State.router.page.path.contains("docs"),
317-
"block",
318-
"none",
319-
),
320-
),
321-
nav_menu.item(
322-
link_item("Hosting", "/hosting", "hosting"),
323-
),
324-
nav_menu.item(
325-
link_item("Pricing", "/pricing", "pricing"),
367+
new_menu_trigger("Pricing", "/pricing", "blog"),
326368
),
327369
class_name="desktop-only flex flex-row items-center gap-0 lg:gap-7 m-0 h-full list-none",
328370
),
329371
nav_menu.list(
330-
nav_menu.item(
331-
search_bar(),
332-
),
333-
nav_menu.item(
334-
github(),
335-
),
336-
nav_menu.item(
337-
discord(),
338-
class_name="desktop-only",
339-
),
340-
nav_menu.item(
341-
color(),
342-
class_name="desktop-only",
343-
),
372+
nav_menu.item(search_bar()),
373+
nav_menu.item(github()),
374+
nav_menu.item(discord(), class_name="desktop-only"),
375+
nav_menu.item(color(), class_name="desktop-only"),
344376
nav_menu.item(
345377
rx.link(
346378
button(
@@ -353,10 +385,7 @@ def new_component_section() -> rx.Component:
353385
),
354386
class_name="desktop-only",
355387
),
356-
nav_menu.item(
357-
navbar_sidebar_button(),
358-
class_name="mobile-only",
359-
),
388+
nav_menu.item(navbar_sidebar_button(), class_name="mobile-only"),
360389
class_name="flex flex-row gap-2 m-0 h-full list-none items-center",
361390
),
362391
rx.box(

‎pcweb/constants.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
REFLEX_URL = "https://reflex.dev/"
1919
REFLEX_DOCS_URL = "https://reflex.dev/docs/getting-started/introduction/"
2020
REFLEX_CLOUD_URL = "https://cloud.reflex.dev/"
21+
REFLEX_AI_BUILDER = "https://reflex.build/"
2122
PYNECONE_URL = "https://pynecone.io"
2223
PIP_URL = "https://pypi.org/project/reflex"
2324
GITHUB_URL = "https://github.com/reflex-dev/reflex"

0 commit comments

Comments
 (0)