Merge branch 'main' into ahmad/navbar-hover

Author: Alek99

pcweb/components/docpage/navbar/navbar.py

@@ -274,32 +274,76 @@ def grid_card_unique(title: str, description: str, url: str, component) -> rx.Co
 
 
 def new_resource_section():
-    return nav_menu.content(
-        rx.box(
-            # Links
+    _company_items = [
+        {"label": "Newsletter", "url": "#newsletter", "icon": "mails"},
+        {"label": "Blog", "url": "/blog", "icon": "library-big"},
+    ]
+
+    _open_source_items = [
+        {"label": "Templates", "url": "/templates", "icon": "layout-panel-top"},
+        {"label": "Changelog", "url": changelog.path, "icon": "history"},
+        {
+            "label": "Contributing",
+            "url": "https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md",
+            "icon": "handshake",
+        },
+        {
+            "label": "Discussions",
+            "url": "https://github.com/orgs/reflex-dev/discussions",
+            "icon": "message-square-text",
+        },
+        {
+            "label": "FAQ",
+            "url": faq.path,
+            "icon": "table-of-contents",
+        },
+    ]
+
+    def _link_button(label: str, url: str, icon: str) -> rx.Component:
+        return rx.link(
+            resources_button(
+                rx.icon(icon, class_name="size-4"),
+                label,
+                size="md",
+                variant="transparent",
+                class_name="justify-start w-full items-center",
+            ),
+            href=url,
+            is_external=True,
+            underline="none",
+            class_name="!w-full",
+        )
+
+    def _resource_section_column(
+        section_title: str, resource_item: list[dict[str, str]]
+    ):
+        return rx.box(
             rx.box(
-                link_button("Changelog", changelog.path),
-                link_button(
-                    "Contributing",
-                    "https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md",
+                rx.text(
+                    section_title,
+                    class_name="text-sm text-slate-10 font-semibold px-2.5 py-1",
                 ),
-                link_button(
-                    "Discussions", "https://github.com/orgs/reflex-dev/discussions"
+                rx.foreach(
+                    resource_item,
+                    lambda item: _link_button(item["label"], item["url"], item["icon"]),
                 ),
-                link_button("FAQ", faq.path),
                 class_name="flex flex-col w-full p-2",
             ),
-            class_name="flex flex-col w-full max-w-[10.1875rem] border-r border-slate-5",
-        ),
+            class_name="flex flex-col w-full max-w-[9.1875rem]",
+        )
+
+    return nav_menu.content(
+        _resource_section_column("Open Source", _open_source_items),
+        _resource_section_column("Company", _company_items),
         # Grid cards
         rx.box(
-            grid_card(
-                "Blog",
-                "See what's new in the Reflex ecosystem.",
-                f"/blog",
-                "/blog/top_python_web_frameworks.png",
-                "absolute bottom-0 rounded-tl-md",
-            ),
+            # grid_card(
+            #     "Blog",
+            #     "See what's new in the Reflex ecosystem.",
+            #     f"/blog",
+            #     "/blog/top_python_web_frameworks.png",
+            #     "absolute bottom-0 rounded-tl-md",
+            # ),
             grid_card(
                 "Customers",
                 "Meet the teams who chose Reflex.",
@@ -312,7 +356,7 @@ def new_resource_section():
             ),
             class_name="grid grid-cols-2 gap-3 p-3 bg-slate-1",
         ),
-        class_name="flex flex-row shadow-large rounded-xl bg-slate-2 border border-slate-5 w-[41.55rem] font-sans overflow-hidden",
+        class_name="flex flex-row shadow-large rounded-xl bg-slate-2 border border-slate-5 w-[34.55rem] font-sans overflow-hidden",
     )
 
 

pcweb/components/docpage/sidebar/sidebar.py

@@ -151,7 +151,7 @@ def sidebar_item_comp(
                     ),
                     rx.box(class_name="flex-grow"),
                     rx.accordion.icon(class_name="size-4"),
-                    class_name="flex items-center !bg-transparent !hover:bg-transparent !py-2 !pr-0 !pl-2 w-full text-slate-9 aria-expanded:text-slate-11 hover:text-slate-11 transition-color",
+                    class_name="flex items-center !bg-transparent !hover:bg-transparent !py-2 !pr-0 w-full text-slate-9 aria-expanded:text-slate-11 hover:text-slate-11 transition-color",
                 ),
             ),
             rx.accordion.content(
@@ -168,7 +168,7 @@ def sidebar_item_comp(
                     type="multiple",
                     collapsible=True,
                     default_value=index[:1].foreach(lambda x: "index" + x.to_string()),
-                    class_name="!my-2 flex flex-col items-start gap-4 !ml-[15px] list-none [box-shadow:inset_1.25px_0_0_0_var(--c-slate-4)]",
+                    class_name="!my-2 flex flex-col items-start gap-4 !ml-[10px] list-none [box-shadow:inset_1.25px_0_0_0_var(--c-slate-4)]",
                 ),
                 class_name="!p-0 w-full",
             ),

pcweb/components/hosting_banner.py

@@ -30,13 +30,19 @@ def hosting_banner() -> rx.Component:
                             "Reflex Cloud - ",
                             rx.el.span(
                                 "Fast, secure & scalable hosting. One command to deploy.",
-                                class_name="text-slate-12 font-medium text-sm",
+                                # class_name="text-slate-12 font-medium text-sm",
+                                class_name="hidden md:inline-block text-slate-12 font-medium text-sm",
+                            ),
+                            rx.el.span(
+                                "Fast & scalable hosting.",
+                                # class_name="text-slate-12 font-medium text-sm",
+                                class_name="inline-block md:hidden text-slate-12 font-medium text-sm",
                             ),
                             class_name="text-slate-12 font-semibold text-sm z-[1]",
                         ),
                         rx.el.button(
                             "Live Now!",
-                            class_name="text-green-11 h-[1.5rem] rounded-md bg-green-4 px-1.5 text-sm font-semibold z-[1] items-center justify-center shrink-0",
+                            class_name="hidden md:inline-block text-green-11 h-[1.5rem] rounded-md bg-green-4 px-1.5 text-sm font-semibold z-[1] items-center justify-center shrink-0",
                         ),
                         class_name="flex items-center gap-4",
                     ),
@@ -52,6 +58,6 @@ def hosting_banner() -> rx.Component:
                 size=16,
                 class_name="cursor-pointer hover:!text-slate-11 transition-color !text-slate-9 absolute right-4 z-10",
             ),
-            class_name="px-4 lg:px-6 w-screen h-auto lg:h-[3.5rem] shadow-[inset_0_-1px_0_0_var(--c-slate-3)] flex items-center justify-center bg-slate-1 flex-row gap-4 overflow-hidden relative lg:py-0 py-2 max-w-full",
+            class_name="px-4 lg:px-6 w-screen h-auto lg:h-[3.5rem] shadow-[inset_0_-1px_0_0_var(--c-slate-3)] flex items-center justify-between md:justify-center bg-slate-1 flex-row gap-4 overflow-hidden relative lg:py-0 py-2 max-w-full",
         ),
     )

pcweb/pages/index/views/os_newsletter.py

@@ -123,7 +123,8 @@ def newsletter_card() -> rx.Component:
             class_name="flex flex-col gap-2",
         ),
         newletter_input(),
-        class_name="flex flex-col gap-8 w-full p-10 pb-12 lg:!border-r !border-slate-3 items-center lg:items-start text-center lg:text-start",
+        id="newsletter",
+        class_name="flex flex-col gap-8 w-full p-10 pb-12 lg:!border-r !border-slate-3 items-center lg:items-start text-center lg:text-start scroll-mt-72",
     )