Skip to content

Commit 6582632

Browse files
LineIndentLineIndent
committed
nav
1 parent 0414cfa commit 6582632

File tree

8 files changed

+240
-112
lines changed

8 files changed

+240
-112
lines changed

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

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,10 @@
3535
REFLEX_CLOUD_URL,
3636
REFLEX_AI_BUILDER,
3737
)
38+
from ..sidebar import SidebarState
3839

3940

40-
def resource_item(text: str, url: str, icon: str):
41+
def resource_item(text: str, url: str, icon: str, index):
4142
return rx.el.li(
4243
rx.link(
4344
rx.box(
@@ -58,6 +59,7 @@ def resource_item(text: str, url: str, icon: str):
5859
class_name="w-full text-slate-9 hover:!text-slate-9",
5960
underline="none",
6061
href=url,
62+
on_click=SidebarState.set_sidebar_index(index),
6163
),
6264
class_name="w-full",
6365
)
@@ -290,21 +292,21 @@ def new_resource_section():
290292
)
291293

292294

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",
306-
),
307-
)
295+
# def resources_section() -> rx.Component:
296+
# return nav_menu.content(
297+
# rx.el.ul(
298+
# resource_item("Changelog", changelog.path, "list"),
299+
# resource_item("Debugging Guide", errors.path, "bug"),
300+
# resource_item("FAQ", faq.path, "circle-help"),
301+
# resource_item("Contribute", CONTRIBUTING_URL, "code-xml"),
302+
# resource_item("Roadmap", ROADMAP_URL, "route"),
303+
# resource_item("Forum", FORUM_URL, "github"),
304+
# resource_item("Blog", blogs.path, "blog"),
305+
# resource_item("Blog", blogs.path, "rss"),
306+
# resource_item("Templates", gallery.path, "layout-panel-top"),
307+
# 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",
308+
# ),
309+
# )
308310

309311

310312
def new_menu_trigger(title: str, url: str = None, active_str: str = "") -> rx.Component:
@@ -334,11 +336,16 @@ def logo() -> rx.Component:
334336

335337

336338
def doc_section():
339+
from pcweb.pages.docs.ai_builder import pages as ai_pages
340+
from pcweb.pages.docs.cloud import pages as cloud_pages
341+
337342
return nav_menu.content(
338343
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"),
344+
resource_item("AI Builder Docs", ai_pages[0].path, "bot", 0),
345+
resource_item(
346+
"Framework Docs", getting_started.introduction.path, "frame", 0
347+
),
348+
resource_item("Cloud Docs", cloud_pages[0].path, "server", 0),
342349
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",
343350
),
344351
)
@@ -359,12 +366,10 @@ def new_component_section() -> rx.Component:
359366
nav_menu.item(
360367
link_item("Cloud", "/hosting", "hosting"),
361368
),
362-
# doc_section
363369
nav_menu.item(new_menu_trigger("Docs"), doc_section()),
364-
# Resources link is shown on docs pages
365370
nav_menu.item(new_menu_trigger("Resources"), new_resource_section()),
366371
nav_menu.item(
367-
new_menu_trigger("Pricing", "/pricing", "blog"),
372+
new_menu_trigger("Pricing", "/pricing", "pricing"),
368373
),
369374
class_name="desktop-only flex flex-row items-center gap-0 lg:gap-7 m-0 h-full list-none",
370375
),

‎pcweb/components/docpage/sidebar/sidebar.py‎

Lines changed: 145 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44

55
import reflex as rx
66
from pcweb.components.docpage.navbar.state import NavbarState
7+
from .sidebar_items.cloud import cloud_items
78
from .state import SidebarState, SideBarItem, SideBarBase
89

910
from .sidebar_items.learn import learn, frontend, backend, hosting
1011
from .sidebar_items.component_lib import (
1112
component_lib,
1213
graphing_libs,
1314
)
15+
from .sidebar_items.ai_builder import ai_builder_items
1416
from .sidebar_items.reference import api_reference
1517
from .sidebar_items.recipes import recipes
1618
from pcweb.styles.colors import c_color
@@ -217,6 +219,7 @@ def append_to_items(items, flat_items):
217219
+ component_lib
218220
+ graphing_libs
219221
+ recipes
222+
+ ai_builder_items
220223
+ api_reference,
221224
flat_items,
222225
)
@@ -342,6 +345,9 @@ def sidebar_comp(
342345
graphing_libs_index: list[int],
343346
api_reference_index: list[int],
344347
recipes_index: list[int],
348+
#
349+
ai_builder_index: list[int],
350+
cloud_index: list[int],
345351
tutorials_index: list[int],
346352
width: str = "100%",
347353
):
@@ -355,110 +361,153 @@ def sidebar_comp(
355361
hosting as hosting_page,
356362
)
357363
from pcweb.pages.docs.apiref import pages
364+
from pcweb.pages.docs.ai_builder import pages as ai_pages
365+
from pcweb.pages.docs.cloud import pages as cloud_pages
358366

359367
return rx.box(
360-
rx.el.ul(
361-
sidebar_category(
362-
"Learn", getting_started.introduction.path, "graduation-cap", 0
368+
# ... hide/show the sidebar pills based on which product documentation we are on
369+
# ... ... main docs for the framework
370+
rx.cond(
371+
rx.State.router.page.path.contains("docs"),
372+
rx.el.ul(
373+
sidebar_category(
374+
"Learn", getting_started.introduction.path, "graduation-cap", 0
375+
),
376+
sidebar_category("Components", library.path, "layout-panel-left", 1),
377+
sidebar_category("API Reference", pages[0].path, "book-text", 2),
378+
class_name="flex flex-col items-start gap-1 w-full list-none",
363379
),
364-
sidebar_category("Components", library.path, "layout-panel-left", 1),
365-
sidebar_category(
366-
"Deploy", hosting_page.deploy_quick_start.path, "cloud", 2
380+
),
381+
# ... ... main docs for the ai builder
382+
rx.cond(
383+
rx.State.router.page.path.contains("ai-builder"),
384+
rx.el.ul(
385+
sidebar_category("Quickstart", ai_pages[0].path, "trending-up", 0),
386+
sidebar_category("Integrations", ai_pages[1].path, "blocks", 1),
387+
class_name="flex flex-col items-start gap-1 w-full list-none",
367388
),
368-
sidebar_category("API Reference", pages[0].path, "book-text", 3),
369-
class_name="flex flex-col items-start gap-1 w-full list-none",
370389
),
371-
rx.match(
372-
SidebarState.sidebar_index,
373-
(
374-
0,
375-
rx.el.ul(
376-
create_sidebar_section(
377-
"Onboarding",
378-
getting_started.introduction.path,
379-
learn,
380-
learn_index,
381-
url,
382-
),
383-
create_sidebar_section(
384-
"User Interface",
385-
ui.overview.path,
386-
filter_out_non_sidebar_items(frontend),
387-
frontend_index,
388-
url,
389-
),
390-
create_sidebar_section(
391-
"State",
392-
state.overview.path,
393-
filter_out_non_sidebar_items(backend),
394-
backend_index,
395-
url,
396-
),
397-
create_sidebar_section(
398-
"Recipes", overview.path, recipes, recipes_index, url
399-
),
400-
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
390+
# ... ... main docs for the cloud
391+
rx.cond(
392+
rx.State.router.page.path.contains("cloud"),
393+
rx.el.ul(
394+
sidebar_category("Cloud", cloud_pages[0].path, "cloud", 0),
395+
sidebar_category("CLI Reference", cloud_pages[0].path, "cloud", 1),
396+
class_name="flex flex-col items-start gap-1 w-full list-none",
397+
),
398+
),
399+
# ... hide/show the sidebar items (accordions etc...) based on which pill is selected
400+
rx.cond(
401+
rx.State.router.page.path.contains("ai-builder"),
402+
rx.el.ul(
403+
create_sidebar_section(
404+
"AI Builder",
405+
ai_pages[0].path,
406+
ai_builder_items,
407+
ai_builder_index,
408+
url,
401409
),
410+
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
402411
),
403-
(
404-
1,
405-
rx.el.ul(
406-
create_sidebar_section(
407-
"Core", library.path, component_lib, component_lib_index, url
408-
),
409-
create_sidebar_section(
410-
"Graphing",
411-
library.path,
412-
graphing_libs,
413-
graphing_libs_index,
414-
url,
412+
),
413+
rx.cond(
414+
rx.State.router.page.path.contains("cloud"),
415+
rx.el.ul(
416+
create_sidebar_section(
417+
"Cloud",
418+
cloud_pages[0].path,
419+
cloud_items,
420+
cloud_index,
421+
url,
422+
),
423+
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
424+
),
425+
),
426+
rx.cond(
427+
rx.State.router.page.path.contains("docs"),
428+
rx.match(
429+
SidebarState.sidebar_index,
430+
(
431+
0,
432+
rx.el.ul(
433+
create_sidebar_section(
434+
"Onboarding",
435+
getting_started.introduction.path,
436+
learn,
437+
learn_index,
438+
url,
439+
),
440+
create_sidebar_section(
441+
"User Interface",
442+
ui.overview.path,
443+
filter_out_non_sidebar_items(frontend),
444+
frontend_index,
445+
url,
446+
),
447+
create_sidebar_section(
448+
"State",
449+
state.overview.path,
450+
filter_out_non_sidebar_items(backend),
451+
backend_index,
452+
url,
453+
),
454+
create_sidebar_section(
455+
"Recipes", overview.path, recipes, recipes_index, url
456+
),
457+
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
415458
),
416-
rx.link(
417-
rx.box(
459+
),
460+
(
461+
1,
462+
rx.el.ul(
463+
create_sidebar_section(
464+
"Core",
465+
library.path,
466+
component_lib,
467+
component_lib_index,
468+
url,
469+
),
470+
create_sidebar_section(
471+
"Graphing",
472+
library.path,
473+
graphing_libs,
474+
graphing_libs_index,
475+
url,
476+
),
477+
rx.link(
418478
rx.box(
419-
rx.icon("atom", size=16),
420-
rx.el.h5(
421-
"Custom Components",
422-
class_name="font-smbold text-[0.875rem] text-slate-12 leading-5 tracking-[-0.01313rem] transition-color",
479+
rx.box(
480+
rx.icon("atom", size=16),
481+
rx.el.h5(
482+
"Custom Components",
483+
class_name="font-smbold text-[0.875rem] text-slate-12 leading-5 tracking-[-0.01313rem] transition-color",
484+
),
485+
class_name="flex flex-row items-center gap-3 text-slate-12",
423486
),
424-
class_name="flex flex-row items-center gap-3 text-slate-12",
425-
),
426-
rx.text(
427-
"See what components people have made with Reflex!",
428-
class_name="font-small text-slate-9",
487+
rx.text(
488+
"See what components people have made with Reflex!",
489+
class_name="font-small text-slate-9",
490+
),
491+
class_name="flex flex-col gap-2 border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-large px-3.5 py-2 border rounded-xl transition-bg",
429492
),
430-
class_name="flex flex-col gap-2 border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-large px-3.5 py-2 border rounded-xl transition-bg",
493+
underline="none",
494+
href=custom_components.path,
431495
),
432-
underline="none",
433-
href=custom_components.path,
434-
),
435-
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
436-
),
437-
),
438-
(
439-
2,
440-
rx.el.ul(
441-
create_sidebar_section(
442-
"Hosting",
443-
hosting_page.deploy_quick_start.path,
444-
hosting,
445-
hosting_index,
446-
url,
496+
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
447497
),
448-
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
449498
),
450-
),
451-
(
452-
3,
453-
rx.el.ul(
454-
create_sidebar_section(
455-
"Reference",
456-
pages[0].path,
457-
api_reference,
458-
api_reference_index,
459-
url,
499+
(
500+
2,
501+
rx.el.ul(
502+
create_sidebar_section(
503+
"Reference",
504+
pages[0].path,
505+
api_reference,
506+
api_reference_index,
507+
url,
508+
),
509+
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
460510
),
461-
class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
462511
),
463512
),
464513
),
@@ -485,6 +534,9 @@ def sidebar(url=None, width: str = "100%") -> rx.Component:
485534
api_reference_index = calculate_index(api_reference, url)
486535
recipes_index = calculate_index(recipes, url)
487536

537+
cloud_index = calculate_index(cloud_items, url)
538+
ai_builder_index = calculate_index(ai_builder_items, url)
539+
488540
return rx.box(
489541
sidebar_comp(
490542
url=url,
@@ -496,6 +548,10 @@ def sidebar(url=None, width: str = "100%") -> rx.Component:
496548
graphing_libs_index=graphing_libs_index,
497549
api_reference_index=api_reference_index,
498550
recipes_index=recipes_index,
551+
#
552+
cloud_index=cloud_index,
553+
ai_builder_index=ai_builder_index,
554+
#
499555
width=width,
500556
),
501557
class_name="flex justify-end w-full h-full",

0 commit comments

Comments
 (0)