diff --git a/rxconfig.py b/rxconfig.py index 9175e87..f14556b 100644 --- a/rxconfig.py +++ b/rxconfig.py @@ -9,7 +9,7 @@ rx.plugins.TailwindV4Plugin( TailwindConfig( darkMode="class", - plugins=["@tailwindcss/typography"], + plugins=["@tailwindcss/typography", "tailwind-scrollbar"], theme={ "extend": { "colors": { diff --git a/src/comps/ui/buttons.py b/src/comps/ui/buttons.py index de30955..05d4413 100644 --- a/src/comps/ui/buttons.py +++ b/src/comps/ui/buttons.py @@ -27,7 +27,7 @@ def site_github() -> rx.Component: return rx.el.a( button( simple_icon("SiGithub"), - rx.el.p("230", class_name="text-xs font-semibold text-muted-foreground"), + rx.el.p("235", class_name="text-xs font-semibold text-muted-foreground"), class_name="cursor-pointer flex flex-row items-center gap-x-2", variant="ghost", size="sm", diff --git a/src/comps/ui/themes.py b/src/comps/ui/themes.py index aceed19..15d068c 100644 --- a/src/comps/ui/themes.py +++ b/src/comps/ui/themes.py @@ -62,6 +62,7 @@ def theme_buttons(): class_name="w-[150px]", ), side_offset=4, + align_item_with_trigger=True, ), ), name="theme_select", diff --git a/src/hooks.py b/src/hooks.py index 3f5947f..a89fa84 100644 --- a/src/hooks.py +++ b/src/hooks.py @@ -20,3 +20,6 @@ + routes.JS_INTEGRATIONS_URLS + routes.WRAPPED_COMPONENTS_URLS, ) + +# Client state to rotate mobile menu icon +menu_icon = ClientStateVar.create("menu_icon", False) diff --git a/src/templates/docpage.py b/src/templates/docpage.py index cd39e8e..8624430 100644 --- a/src/templates/docpage.py +++ b/src/templates/docpage.py @@ -14,8 +14,11 @@ def docpage(main_content, toc_content): sidebar(), rx.el.div( rx.el.div( - main_content, - class_name="flex-1 min-w-0 pt-6", + rx.el.div( + main_content, + class_name="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 px-2 py-6 md:px-0 lg:py-8", + ), + class_name="flex-1 min-w-0", ), toc_content, class_name="flex items-start w-full flex-1 min-w-0", diff --git a/src/templates/drawer.py b/src/templates/drawer.py index 6ce3d18..ae6c02d 100644 --- a/src/templates/drawer.py +++ b/src/templates/drawer.py @@ -1,13 +1,29 @@ import reflex as rx -from src.templates.sidebar import sidebar +import src.hooks as hooks from src.docs.library.base_ui.components.base.button import button +from src.docs.library.base_ui.icons.hugeicon import hi +from src.templates.sidebar import sidebar def drawer(): return rx.drawer.root( rx.drawer.trigger( - button(rx.icon(tag="menu", size=13), variant="ghost", size="sm"), + button( + hi( + "Add01Icon", + class_name=( + "size-5 transition-transform duration-75 ease-in-out " + + rx.cond(hooks.menu_icon.value, "rotate-45", "").to(str) + ), + ), + rx.el.p("Menu", class_name="text-lg font-medium"), + size="sm", + variant="ghost", + on_click=hooks.menu_icon.set_value(~hooks.menu_icon.value), + class_name="flex flex-row items-center justify-between", + ), + class_name="px-2", ), rx.drawer.portal( rx.drawer.content( @@ -15,11 +31,13 @@ def drawer(): width="100%", top="3.5rem", right="0", - height="calc(100% - 3.5rem)", background=rx.color_mode_cond( - "oklch(1 0 0 / 0.95)", "oklch(0.145 0 0 / 0.95)" + "oklch(1 0 0 / 0.99)", "oklch(0.145 0 0 / 0.99)" ), + on_escape_key_down=hooks.menu_icon.set_value(~hooks.menu_icon.value), + on_interact_outside=hooks.menu_icon.set_value(~hooks.menu_icon.value), ), + class_name="z-[9999]", ), direction="left", ) diff --git a/src/templates/navbar.py b/src/templates/navbar.py index 203aec5..d6a9b7e 100644 --- a/src/templates/navbar.py +++ b/src/templates/navbar.py @@ -1,12 +1,11 @@ import reflex as rx import src.routes as routes - -from src.templates.drawer import drawer -from src.templates.search import site_search +from src.comps.ui.buttons import site_github, site_theme from src.comps.ui.titles import site_title from src.docs.library.base_ui.components.base.button import button -from src.comps.ui.buttons import site_github, site_theme +from src.templates.drawer import drawer +from src.templates.search import site_search def main_navbar_nav_link(nav: str, url: str): @@ -22,7 +21,11 @@ def main_navbar(): rx.el.div( rx.el.div( rx.el.div(drawer(), class_name="flex lg:hidden"), - rx.el.a(button(site_title(), variant="ghost"), to="/"), + rx.el.a( + button(site_title(), variant="ghost"), + to="/", + class_name="hidden lg:flex", + ), rx.el.div( main_navbar_nav_link("Docs", routes.GET_STARTED_URLS[0]["url"]), main_navbar_nav_link( @@ -35,9 +38,9 @@ def main_navbar(): main_navbar_nav_link( "Integrations", routes.JS_INTEGRATIONS_URLS[0]["url"] ), - class_name="hidden lg:flex flex-row items-center text-sm no-underline gap-x-2", + class_name="hidden lg:flex flex-row items-center text-sm no-underline gap-x-0", ), - class_name="flex flex-row items-baseline gap-x-2 lg:gap-x-4", + class_name="flex flex-row items-baseline gap-x-2 lg:gap-x-0", ), rx.el.div( site_search(), diff --git a/src/templates/sidebar.py b/src/templates/sidebar.py index d67df05..139a5a5 100644 --- a/src/templates/sidebar.py +++ b/src/templates/sidebar.py @@ -3,6 +3,7 @@ import reflex as rx +import src.hooks as hooks import src.routes as routes @@ -44,55 +45,58 @@ class SidebarSection: ] -def create_menu_item(data: dict): +def create_menu_item(data: dict, in_drawer): """Create a single menu item.""" return rx.el.div( rx.el.a( rx.el.p( data["title"], - class_name="cursor-pointer text-sm font-[450]", + class_name="cursor-pointer font-[450] " + + rx.cond(in_drawer, "text-lg px-2", "text-sm").to(str), ), to=f"/{data['url']}", text_decoration="none", + on_click=hooks.menu_icon.set_value(False), ), class_name="w-full", id=data["url"], ) -def create_sidebar_menu_items(routes: List[dict]): +def create_sidebar_menu_items(routes: List[dict], in_drawer): """Create menu items from routes.""" return rx.el.div( - *[create_menu_item(route) for route in routes], + *[create_menu_item(route, in_drawer) for route in routes], class_name="w-full flex flex-col gap-y-1.5", ) -def create_section_content(section: SidebarSection): +def create_section_content(section: SidebarSection, in_drawer): """Create content for a sidebar section.""" return rx.el.div( rx.el.div( - create_sidebar_menu_items(section.routes), + create_sidebar_menu_items(section.routes, in_drawer), class_name="flex flex-row h-full w-full gap-x-2", ), class_name="flex flex-col p-0 m-0", ) -def sidebar_section(section: SidebarSection): +def sidebar_section(section: SidebarSection, in_drawer=False): """Create a complete sidebar section with title and content.""" return rx.el.div( rx.el.div( rx.el.div( rx.el.p( section.title, - class_name="text-xs text-muted-foreground font-medium", + class_name="text-muted-foreground font-medium " + + rx.cond(in_drawer, "text-md px-2", "text-xs").to(str), ), class_name="flex flex-row items-center gap-x-2", ), class_name="w-full flex flex-row justify-between align-center items-center", ), - create_section_content(section), + create_section_content(section, in_drawer), class_name="flex flex-col w-full gap-y-2 p-4", ) @@ -100,19 +104,19 @@ def sidebar_section(section: SidebarSection): def sidebar(in_drawer=False): """Main sidebar component.""" content = rx.el.div( - *[sidebar_section(section) for section in SIDEBAR_SECTIONS], + *[sidebar_section(section, in_drawer) for section in SIDEBAR_SECTIONS], class_name="flex flex-col max-w-[18rem] w-full h-full", ) drawer_classes = "flex flex-col w-full h-full" default_classes = ( - "hidden xl:flex max-w-[18rem] w-full sticky top-18 max-h-[100vh] z-[10] pb-5" + "hidden lg:flex max-w-[18rem] w-full sticky top-18 max-h-[100vh] z-[10] pb-5" ) return rx.el.div( - rx.scroll_area( + rx.el.div( content, - class_name="flex flex-col items-center gap-y-4 [&_.rt-ScrollAreaScrollbar]:mt-[2rem] [&_.rt-ScrollAreaScrollbar]:mb-[2rem]", + class_name="flex flex-col items-center gap-y-4 overflow-scroll scrollbar-none justify-start items-start", ), class_name=drawer_classes if in_drawer else default_classes, ) diff --git a/src/templates/toc.py b/src/templates/toc.py index b89b026..6b7de5c 100644 --- a/src/templates/toc.py +++ b/src/templates/toc.py @@ -117,7 +117,7 @@ def table_of_content(url: str, toc_data: List[Dict]): """ return rx.el.div( - rx.scroll_area( + rx.el.div( rx.el.div( # rx.el.div( @@ -153,7 +153,7 @@ def table_of_content(url: str, toc_data: List[Dict]): ), class_name="flex flex-col w-full h-full p-4 gap-y-6", ), - class_name="flex flex-col gap-y-4 [&_.rt-ScrollAreaScrollbar]:mt-[2rem] [&_.rt-ScrollAreaScrollbar]:mb-[2rem]", + class_name="flex flex-col gap-y-4 overflow-scroll scrollbar-none", ), - class_name="hidden lg:block max-w-[18rem] w-full sticky top-18 h-[calc(100vh-3rem)] shrink-0", + class_name="hidden xl:block max-w-[18rem] w-full sticky top-18 h-[calc(100vh-3rem)] shrink-0", ) diff --git a/src/views/landing/landing.py b/src/views/landing/landing.py index 9fc45d6..3a24108 100644 --- a/src/views/landing/landing.py +++ b/src/views/landing/landing.py @@ -1,10 +1,10 @@ import reflex as rx +import src.routes as routes +from src.comps.ui.themes import theme_buttons from src.docs.library.base_ui.components.base.button import button from src.templates.navbar import main_navbar from src.views.examples.examples import examples_page -from src.comps.ui.themes import theme_buttons -import src.routes as routes def header(): @@ -14,7 +14,7 @@ def header(): font_weight="800", letter_spacing="-0.05em", line_height="1", - class_name="text-center", + class_name="text-center px-20 sm:px-0", ) @@ -34,7 +34,7 @@ def sub_header(): letter_spacing="-0.01em", line_height="1.8", ), - class_name="w-full max-w-[750px] flex text-center px-2", + class_name="w-full max-w-[750px] flex text-center px-10", ) @@ -42,7 +42,8 @@ def landing_buttons(): return rx.el.div( rx.el.div( rx.el.a( - button("Get Started", size="sm"), to=routes.GET_STARTED_URLS[0]["url"] + button("Get Started", size="sm", class_name="rounded-lg"), + to=routes.GET_STARTED_URLS[0]["url"], ), rx.el.a( button("View Components", variant="ghost", size="sm"), @@ -67,7 +68,7 @@ def site_landing_page(): examples_page(), class_name="flex flex-col gap-y-0 w-full pt-[7rem]", ), - class_name="w-full min-h-screen flex flex-col gap-y-6 items-center justify-start pt-[7rem]", + class_name="w-full min-h-screen flex flex-col gap-y-6 items-center justify-start pt-14 sm:pt-[7rem]", ), class_name="xl:max-w-[90rem] 2xl:max-w-[85rem] w-full mx-auto flex-col", ),