misc. UI fixes for site

rxconfig.py

@@ -9,7 +9,7 @@
         rx.plugins.TailwindV4Plugin(
             TailwindConfig(
                 darkMode="class",
-                plugins=["@tailwindcss/typography"],
+                plugins=["@tailwindcss/typography", "tailwind-scrollbar"],
                 theme={
                     "extend": {
                         "colors": {

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",

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",

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)

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",

src/templates/drawer.py

@@ -1,25 +1,43 @@
 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(
                 sidebar(in_drawer=True),
                 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",
     )

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(),

src/templates/sidebar.py

@@ -3,6 +3,7 @@
 
 import reflex as rx
 
+import src.hooks as hooks
 import src.routes as routes
 
 
@@ -44,75 +45,78 @@ 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",
     )
 
 
 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,
     )

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",
     )

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,15 +34,16 @@ 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",
     )
 
 
 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",
         ),