fix: mobile sidebar position

Author: anish-work

daras_ai_v2/base.py

@@ -395,7 +395,7 @@ def render(self):
             self.render_report_form()
             return
 
-        sidebar_mobile_header(self.request.session)
+        sidebar_mobile_header(self.request)
         header_placeholder = gui.div(className="my-1 w-100")
         with (
             gui.styled(NAV_TABS_CSS),

routers/account.py

@@ -382,7 +382,7 @@ def account_page_wrapper(request: Request, current_tab: TabData):
         raise gui.RedirectException(str(redirect_url))
 
     with page_wrapper(request) as current_workspace:
-        sidebar_mobile_header(request.session)
+        sidebar_mobile_header(request)
         with gui.nav_tabs():
             for tab in AccountTabs.get_tabs_for_user(request.user, current_workspace):
                 with gui.nav_item(tab.url_path, active=tab == current_tab):

routers/root.py

@@ -746,7 +746,7 @@ def page_wrapper(
                         src=settings.GOOEY_LOGO_FACE,
                         width=settings.SIDEBAR_ICON_SIZE,
                         height=settings.SIDEBAR_ICON_SIZE,
-                        className=" logo-face d-block",
+                        className=" logo-face d-none d-md-block",
                     )
                     open_sidebar_btn = gui.button(
                         label=icons.sidebar_flip,
@@ -844,36 +844,36 @@ def page_wrapper(
             gui.html(templates.get_template("login_scripts.html").render(**context))
 
 
-# def _render_mobile_search_button(request: Request, search_filters: SearchFilters):
-#     with gui.div(
-#         className="d-flex d-md-none flex-grow-1 justify-content-end",
-#     ):
-#         gui.button(
-#             icons.search,
-#             type="tertiary",
-#             unsafe_allow_html=True,
-#             className="m-0",
-#             onClick=JS_SHOW_MOBILE_SEARCH,
-#         )
-
-#     with (
-#         gui.styled("@media (min-width: 768px) { & { position: static !important; } }"),
-#         gui.div(
-#             className="d-md-flex flex-grow-1 justify-content-center align-items-center bg-white top-0 left-0",
-#             style={"display": "none", "zIndex": "10"},
-#             id="mobile_search_container",
-#         ),
-#     ):
-#         render_search_bar_with_redirect(
-#             request=request,
-#             search_filters=search_filters or SearchFilters(),
-#         )
-#         gui.button(
-#             "Cancel",
-#             type="tertiary",
-#             className="d-md-none fs-6 m-0 ms-1 p-1",
-#             onClick=JS_HIDE_MOBILE_SEARCH,
-#         )
+def _render_mobile_search_button(request: Request, search_filters: SearchFilters):
+    with gui.div(
+        className="d-flex d-md-none flex-grow-1 justify-content-end",
+    ):
+        gui.button(
+            icons.search,
+            type="tertiary",
+            unsafe_allow_html=True,
+            className="m-0",
+            onClick=JS_SHOW_MOBILE_SEARCH,
+        )
+
+    with (
+        gui.styled("@media (min-width: 768px) { & { position: static !important; } }"),
+        gui.div(
+            className="d-md-flex flex-grow-1 justify-content-center align-items-center bg-white top-0 left-0",
+            style={"display": "none", "zIndex": "10"},
+            id="mobile_search_container",
+        ),
+    ):
+        render_search_bar_with_redirect(
+            request=request,
+            search_filters=search_filters or SearchFilters(),
+        )
+        gui.button(
+            "Cancel",
+            type="tertiary",
+            className="d-md-none fs-6 m-0 ms-1 p-1",
+            onClick=JS_HIDE_MOBILE_SEARCH,
+        )
 
 
 JS_SHOW_MOBILE_SEARCH = """
@@ -904,7 +904,7 @@ def anonymous_login_container(
 
     with popover, gui.div(className="d-flex align-items-center overflow-hidden"):
         if not hide_sign_in:
-            with gui.tag("a", href=login_url, className="pe-2 d-none d-lg-block"):
+            with gui.tag("a", href=login_url, className="pe-2"):
                 gui.html("Sign In")
         gui.html(
             templates.get_template("google_one_tap_button.html").render(**context)

widgets/explore.py

@@ -53,7 +53,7 @@ def build_meta_tags(url: str, search_filters: SearchFilters | None):
 
 
 def render(request: Request, search_filters: SearchFilters | None):
-    sidebar_mobile_header(request.session)
+    sidebar_mobile_header(request)
     with gui.div(className="my-4"):
         # note: using css instead of `if not search_filters: ...` stops re-render
         # of the search bar. this preserves focus/blur between query-param redirects

widgets/sidebar.py

@@ -1,3 +1,4 @@
+from starlette.requests import Request
 import gooey_gui as gui
 from daras_ai_v2 import settings
 from textwrap import dedent
@@ -163,29 +164,39 @@ def render_default_sidebar(sidebar_ref: SidebarRef, request=None):
             sidebar_item_list(is_sidebar_open, current_url)
 
 
-def sidebar_mobile_header(session: dict):
+def sidebar_mobile_header(request: Request):
+    from routers.root import anonymous_login_container
+
     with gui.div(
         className="d-flex align-items-center justify-content-between d-md-none me-2 w-100 py-2",
         style={"height": "54px"},
     ):
-        sidebar_ref = use_sidebar("main-sidebar", session)
+        sidebar_ref = use_sidebar("main-sidebar", request.session)
         gui.tag(
             "img",
-            src=settings.GOOEY_LOGO_FACE,
-            width=settings.SIDEBAR_ICON_SIZE,
-            height=settings.SIDEBAR_ICON_SIZE,
+            src=settings.GOOEY_LOGO_RECT,
+            width="120px",
+            height="auto",
             className=" logo-face",
         )
-        open_mobile_sidebar = gui.button(
-            label=icons.sidebar_flip,
-            className="m-0",
-            unsafe_allow_html=True,
-            type="tertiary",
-            style={"padding": "6px 10px"},
-        )
-        if open_mobile_sidebar:
-            sidebar_ref.set_mobile_open(True)
-            raise gui.RerunException()
+        with gui.div(className="d-flex align-items-center gap-2"):
+            anonymous_login_container(
+                request,
+                context={
+                    "request": request,
+                    "block_incognito": True,
+                },
+            )
+            open_mobile_sidebar = gui.button(
+                label=icons.sidebar_flip,
+                className="m-0",
+                unsafe_allow_html=True,
+                type="tertiary",
+                style={"padding": "6px 10px"},
+            )
+            if open_mobile_sidebar:
+                sidebar_ref.set_mobile_open(True)
+                raise gui.RerunException()
 
 
 # Sidebar width variables
@@ -242,13 +253,19 @@ def sidebar_layout(sidebar_ref: SidebarRef):
             @media (max-width: 767px) {{
                 & .gooey-sidebar-open {{
                     position: fixed;
+                    right: 0;
+                    left: auto;
                     min-width: {sidebar_mobile_width};
                     width: {sidebar_mobile_width};
                     max-width: {sidebar_mobile_width};
                     z-index: 2000;
+                    border-left: 1px solid #e0e0e0;
+                    border-right: none;
                 }}
                 & .gooey-sidebar-closed {{
                     position: fixed;
+                    right: 0;
+                    left: auto;
                     min-width: 0px;
                     width: 0px;
                     max-width: 0px;