[REF-876] Update base template styles (#2022)

reflex/.templates/apps/base/code/base.py

@@ -5,8 +5,16 @@ import reflex as rx
 
 from .pages import dashboard_page, home_page, settings_page
 from .sidebar import sidebar
+from .state import State
 from .styles import *
 
+meta = [
+    {
+        "name": "viewport",
+        "content": "width=device-width, shrink-to-fit=no, initial-scale=1",
+    },
+]
+
 
 def template(main_content: Callable[[], rx.Component]) -> rx.Component:
     """The template for each page of the app.
@@ -49,10 +57,13 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component:
         rx.spacer(),
         menu_button,
         align_items="flex-start",
+        transition="left 0.5s, width 0.5s",
+        position="relative",
+        left=rx.cond(State.sidebar_displayed, "0px", f"-{sidebar_width}"),
     )
 
 
-@rx.page("/")
+@rx.page("/", meta=meta)
 @template
 def home() -> rx.Component:
     """Home page.
@@ -63,7 +74,7 @@ def home() -> rx.Component:
     return home_page()
 
 
-@rx.page("/settings")
+@rx.page("/settings", meta=meta)
 @template
 def settings() -> rx.Component:
     """Settings page.
@@ -74,7 +85,7 @@ def settings() -> rx.Component:
     return settings_page()
 
 
-@rx.page("/dashboard")
+@rx.page("/dashboard", meta=meta)
 @template
 def dashboard() -> rx.Component:
     """Dashboard page.

reflex/.templates/apps/base/code/pages/dashboard.py

@@ -14,7 +14,7 @@ def dashboard_page() -> rx.Component:
         rx.vstack(
             rx.heading(
                 "Dashboard",
-                size="3em",
+                font_size="3em",
             ),
             rx.text(
                 "Welcome to Reflex!",

reflex/.templates/apps/base/code/pages/home.py

@@ -14,7 +14,7 @@ def home_page() -> rx.Component:
         rx.vstack(
             rx.heading(
                 "Home",
-                size="3em",
+                font_size="3em",
             ),
             rx.text(
                 "Welcome to Reflex!",

reflex/.templates/apps/base/code/pages/settings.py

@@ -14,7 +14,7 @@ def settings_page() -> rx.Component:
         rx.vstack(
             rx.heading(
                 "Settings",
-                size="3em",
+                font_size="3em",
             ),
             rx.text(
                 "Welcome to Reflex!",

reflex/.templates/apps/base/code/sidebar.py

@@ -56,11 +56,14 @@ def sidebar_footer() -> rx.Component:
                 ),
                 bg="transparent",
                 border_radius=border_radius,
-                _hover={
-                    "bg": accent_color,
-                },
+                **hover_accent_bg,
             ),
-            href="https://github.com/reflex-dev/reflex",
+            on_click=State.toggle_sidebar_displayed,
+            transform=rx.cond(~State.sidebar_displayed, "rotate(180deg)", ""),
+            transition="transform 0.5s, left 0.5s",
+            position="relative",
+            left=rx.cond(State.sidebar_displayed, "0px", "20.5em"),
+            **overlapping_button_style,
         ),
         rx.spacer(),
         rx.link(
@@ -143,17 +146,17 @@ def sidebar() -> rx.Component:
                     "/settings",
                 ),
                 width="100%",
+                overflow_y="auto",
                 align_items="flex-start",
                 padding="1em",
             ),
             rx.spacer(),
             sidebar_footer(),
-            height="100vh",
+            height="100dvh",
         ),
-        min_width="20em",
-        width="25em",
+        min_width=sidebar_width,
         height="100%",
-        left="0px",
+        position="sticky",
         top="0px",
         border_right=border,
     )

reflex/.templates/apps/base/code/state.py

@@ -6,6 +6,8 @@ import reflex as rx
 class State(rx.State):
     """State for the app."""
 
+    sidebar_displayed: bool = True
+
     @rx.var
     def origin_url(self) -> str:
         """Get the url of the current page.
@@ -14,3 +16,7 @@ class State(rx.State):
             str: The url of the current page.
         """
         return self.router_data.get("asPath", "")
+
+    def toggle_sidebar_displayed(self) -> None:
+        """Toggle the sidebar displayed."""
+        self.sidebar_displayed = not self.sidebar_displayed

reflex/.templates/apps/base/code/styles.py

@@ -1,41 +1,55 @@
 """Styles for the app."""
 import reflex as rx
 
-border_radius = ("0.375rem",)
-box_shadow = ("0px 0px 0px 1px rgba(84, 82, 95, 0.14)",)
+from .state import State
+
+border_radius = "0.375rem"
+box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
 border = "1px solid #F4F3F6"
 text_color = "black"
 accent_text_color = "#1A1060"
 accent_color = "#F5EFFE"
+hover_accent_color = {"_hover": {"color": accent_color}}
+hover_accent_bg = {"_hover": {"bg": accent_color}}
+content_width_vw = "90vw"
+sidebar_width = "20em"
 
 template_page_style = {
-    "height": "100vh",
-    "width": "100%",
     "padding_top": "5em",
     "padding_x": "2em",
 }
 
 template_content_style = {
-    "width": "100%",
+    "width": rx.cond(
+        State.sidebar_displayed,
+        f"calc({content_width_vw} - {sidebar_width})",
+        content_width_vw,
+    ),
+    "min-width": sidebar_width,
     "align_items": "flex-start",
-    "height": "90%",
-    "box_shadow": "0px 0px 0px 1px rgba(84, 82, 95, 0.14)",
+    "box_shadow": box_shadow,
     "border_radius": border_radius,
     "padding": "1em",
+    "margin_bottom": "2em",
 }
 
 link_style = {
     "color": text_color,
     "text_decoration": "none",
-    "_hover": {
-        "color": accent_color,
-    },
+    **hover_accent_color,
+}
+
+overlapping_button_style = {
+    "background_color": "white",
+    "border": border,
+    "border_radius": border_radius,
 }
 
 base_style = {
-    rx.MenuItem: {
-        "_hover": {
-            "bg": accent_color,
-        },
+    rx.MenuButton: {
+        "width": "3em",
+        "height": "3em",
+        **overlapping_button_style,
     },
+    rx.MenuItem: hover_accent_bg,
 }