BLUR-32 sidebar modification

blurme/components/sidebar.py

@@ -7,9 +7,7 @@ import reflex as rx
 
 
 def sidebar_header() -> rx.Component:
-    """Sidebar header.
+    """Returns:
-
-    Returns:
         The sidebar header component.
     """
     return rx.hstack(
@@ -19,36 +17,12 @@ def sidebar_header() -> rx.Component:
             height="4.5em",
         ),
         rx.spacer(),
-        # Link to Reflex GitHub repo.
         width="100%",
         border_bottom=styles.border,
         padding="1em",
     )
 
-
+def sidebar_item(text: str, icon: str, url: str, ) -> rx.Component:
-#def sidebar_footer() -> rx.Component:
-    """Sidebar footer.
-
-    Returns:
-        The sidebar footer component.
-    """
- #   return rx.hstack(
- #       rx.spacer(),
- #       rx.link(
- #           rx.text("Docs"),
- #           href="https://reflex.dev/docs/getting-started/introduction/",
- #       ),
- #       rx.link(
- #           rx.text("Blog"),
- #           href="https://reflex.dev/blog/",
- #       ),
- #       width="100%",
- #       border_top=styles.border,
- #       padding="1em",
- #   )
-
-def sidebar_item(text: str, url: str) -> rx.Component:
-                 #icon: str, 
     """Sidebar item.
 
     Args:
@@ -66,11 +40,11 @@ def sidebar_item(text: str, url: str) -> rx.Component:
 
     return rx.link(
         rx.hstack(
-            #rx.image(
+            rx.image(
-            #    src=icon,
+                src=icon,
-            #    height="2.5em",
+                height="2.5em",
-            #    padding="0.5em",
+                padding="0.5em",
-            #),
+            ),
             rx.text(
                 text,
             ),
@@ -87,11 +61,12 @@ def sidebar_item(text: str, url: str) -> rx.Component:
             border_radius=styles.border_radius,
             box_shadow=styles.box_shadow,
             width="100%",
-            padding_x="1em",
+            padding_x="1.3em",
-            height = "2em"
+            height = "2.5em"
         ),
         href=url,
         width="100%",
+        
     )
 
 
@@ -111,7 +86,7 @@ def sidebar() -> rx.Component:
                 *[
                     sidebar_item(
                         text=page.get("title", page["route"].strip("/").capitalize()),
-                        #icon=page.get("image", "/github.svg"),
+                        icon=page.get("image",page["route"].strip("/").capitalize()),
                         url=page["route"],
                     )
                     for page in get_decorated_pages()
@@ -123,7 +98,7 @@ def sidebar() -> rx.Component:
             ),
             rx.spacer(),
             #sidebar_footer(),
-            height="100dvh",
+            height="100em",
         ),
         display=["none", "none", "block"],
         min_width=styles.sidebar_width,

blurme/pages/dashboard.py

@@ -4,7 +4,7 @@ from blurme.templates import template
 import reflex as rx
 
 
-@template(route="/dashboard", title="Dashboard")
+@template(route="/dashboard", title="Kontakt", image = "/contact-icon.png")
 def dashboard() -> rx.Component:
     """The dashboard page.
 

blurme/pages/index.py

@@ -5,7 +5,7 @@ from blurme.templates import template
 
 import reflex as rx
 
-@template(route="/", title="Strona główna", image="/github.svg")
+@template(route="/", title="Strona główna", image = "/home-icon.png")
 def index() -> rx.Component:
     return rx.vstack(
         rx.heading("Witaj w BlurMe!", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),

blurme/pages/settings.py

@@ -4,7 +4,7 @@ from blurme.templates import template
 
 import reflex as rx
 
-@template(route="/settings", title="Settings")
+@template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
 def settings() -> rx.Component:
     return rx.vstack(
         rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),