update styles

Author: carlosabadia

pcweb/components/docpage/navbar/search.py

@@ -1,10 +1,23 @@
 """Search bar component for the navbar."""
 
+from typing import Optional
+
 import reflex as rx
 
 from .inkeep import inkeep
 
 
-@rx.memo
-def search_bar(custom_style: str = "") -> rx.Component:
-    return inkeep(custom_style=custom_style)
+def search_bar(
+    custom_style: str = "", trigger: Optional[rx.Component] = None
+) -> rx.Component:
+    if trigger is None:
+        return inkeep(custom_style=custom_style)
+
+    return rx.el.div(
+        trigger,
+        rx.el.div(
+            inkeep(custom_style=custom_style),
+            class_name="absolute inset-0 z-10 opacity-0 overflow-hidden",
+        ),
+        class_name="relative inline-flex",
+    )

pcweb/views/marketing_navbar.py

@@ -486,14 +486,23 @@ def navigation_menu() -> rx.Component:
             ),
             ui.navigation_menu.item(
                 search_bar(
-                    custom_style=".ikp-search-bar__text { display: none !important; } "
-                    "[data-theme='light'] .ikp-search-bar__container, "
-                    "[data-theme='dark'] .ikp-search-bar__container { "
-                    "width: auto !important; max-width: fit-content !important; min-width: fit-content !important; }"
+                    trigger=button(
+                        ui.icon("Search01Icon", class_name="size-4"),
+                        "⌘+K",
+                        size="sm",
+                        variant="ghost",
+                        class_name="group-hover:text-primary-10 dark:group-hover:text-primary-9",
+                        native_button=False,
+                    ),
                 ),
+                class_name="group",
                 unstyled=True,
                 custom_attrs={"role": "menuitem"},
             ),
+            class_name="flex flex-row gap-2 m-0 h-full list-none items-center",
+            custom_attrs={"role": "menubar"},
+        ),
+        ui.navigation_menu.list(
             ui.navigation_menu.item(
                 rx.el.a(
                     button(