Skip to content

Commit 48449b2

Browse files
codingforentrepreneurscodingforentrepreneurs
committed
44 - Creating the Dashboard & Sidebar
1 parent 9748c94 commit 48449b2

File tree

3 files changed

+239
-10
lines changed

3 files changed

+239
-10
lines changed

‎full_stack_python/ui/base.py‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import reflex as rx
22

33
from .nav import navbar
4+
from .dashboard import base_dashboard_page
45

5-
def base_page(child: rx.Component, hide_navbar=False, *args, **kwargs) -> rx.Component:
6-
# print([type(x) for x in args])
7-
if not isinstance(child,rx. Component):
8-
child = rx.heading("this is not a valid child element")
9-
if hide_navbar:
10-
return rx.container(
11-
child,
12-
rx.logo(),
13-
rx.color_mode.button(position="bottom-left"),
14-
)
6+
def base_layout_component(child, *args, **kwargs) -> rx.Component:
157
return rx.fragment( # renders nada
168
navbar(),
179
rx.box(
@@ -25,4 +17,14 @@ def base_page(child: rx.Component, hide_navbar=False, *args, **kwargs) -> rx.Com
2517
rx.color_mode.button(position="bottom-left"),
2618
padding='10em',
2719
id="my-base-container"
20+
)
21+
22+
def base_page(child: rx.Component, *args, **kwargs) -> rx.Component:
23+
is_logged_in = False
24+
if not isinstance(child,rx. Component):
25+
child = rx.heading("this is not a valid child element")
26+
return rx.cond(
27+
is_logged_in,
28+
base_dashboard_page(child, *args, **kwargs),
29+
base_layout_component(child, *args, **kwargs ),
2830
)

‎full_stack_python/ui/dashboard.py‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import reflex as rx
2+
3+
from .sidebar import sidebar
4+
5+
def base_dashboard_page(child: rx.Component, *args, **kwargs) -> rx.Component:
6+
# print([type(x) for x in args])
7+
if not isinstance(child,rx. Component):
8+
child = rx.heading("this is not a valid child element")
9+
return rx.fragment(
10+
rx.hstack(
11+
sidebar(),
12+
rx.box(
13+
child,
14+
rx.logo(),
15+
# bg=rx.color("accent", 3),
16+
padding="1em",
17+
width="100%",
18+
id="my-content-area-el"
19+
),
20+
21+
),
22+
# rx.color_mode.button(position="bottom-left"),
23+
padding='10em',
24+
id="my-base-container"
25+
)

‎full_stack_python/ui/sidebar.py‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import reflex as rx
2+
3+
from .. import navigation
4+
5+
def sidebar_item(
6+
text: str, icon: str, href: str
7+
) -> rx.Component:
8+
return rx.link(
9+
rx.hstack(
10+
rx.icon(icon),
11+
rx.text(text, size="4"),
12+
width="100%",
13+
padding_x="0.5rem",
14+
padding_y="0.75rem",
15+
align="center",
16+
style={
17+
"_hover": {
18+
"bg": rx.color("accent", 4),
19+
"color": rx.color("accent", 11),
20+
},
21+
"border-radius": "0.5em",
22+
},
23+
),
24+
href=href,
25+
underline="none",
26+
weight="medium",
27+
width="100%",
28+
)
29+
30+
31+
def sidebar_items() -> rx.Component:
32+
return rx.vstack(
33+
sidebar_item("Dashboard", "layout-dashboard", navigation.routes.HOME_ROUTE),
34+
sidebar_item("Blog", "square-library", navigation.routes.BLOG_POSTS_ROUTE),
35+
sidebar_item("Create post", "square-library", navigation.routes.BLOG_POST_ADD_ROUTE),
36+
spacing="1",
37+
width="100%",
38+
)
39+
40+
41+
def sidebar() -> rx.Component:
42+
return rx.box(
43+
rx.desktop_only(
44+
rx.vstack(
45+
rx.hstack(
46+
rx.image(
47+
src="/logo.jpg",
48+
width="2.25em",
49+
height="auto",
50+
border_radius="25%",
51+
),
52+
rx.heading(
53+
"Reflex", size="7", weight="bold"
54+
),
55+
align="center",
56+
justify="start",
57+
padding_x="0.5rem",
58+
width="100%",
59+
),
60+
sidebar_items(),
61+
rx.spacer(),
62+
rx.vstack(
63+
rx.vstack(
64+
sidebar_item(
65+
"Settings", "settings", "/#"
66+
),
67+
sidebar_item(
68+
"Log out", "log-out", "/#"
69+
),
70+
spacing="1",
71+
width="100%",
72+
),
73+
rx.divider(),
74+
rx.hstack(
75+
rx.icon_button(
76+
rx.icon("user"),
77+
size="3",
78+
radius="full",
79+
),
80+
rx.vstack(
81+
rx.box(
82+
rx.text(
83+
"My account",
84+
size="3",
85+
weight="bold",
86+
),
87+
rx.text(
88+
"user@reflex.dev",
89+
size="2",
90+
weight="medium",
91+
),
92+
width="100%",
93+
),
94+
spacing="0",
95+
align="start",
96+
justify="start",
97+
width="100%",
98+
),
99+
padding_x="0.5rem",
100+
align="center",
101+
justify="start",
102+
width="100%",
103+
),
104+
width="100%",
105+
spacing="5",
106+
),
107+
spacing="5",
108+
# position="fixed",
109+
# left="0px",
110+
# top="0px",
111+
# z_index="5",
112+
padding_x="1em",
113+
padding_y="1.5em",
114+
bg=rx.color("accent", 3),
115+
align="start",
116+
height="100vh",
117+
# height="650px",
118+
width="16em",
119+
),
120+
),
121+
rx.mobile_and_tablet(
122+
rx.drawer.root(
123+
rx.drawer.trigger(
124+
rx.icon("align-justify", size=30)
125+
),
126+
rx.drawer.overlay(z_index="5"),
127+
rx.drawer.portal(
128+
rx.drawer.content(
129+
rx.vstack(
130+
rx.box(
131+
rx.drawer.close(
132+
rx.icon("x", size=30)
133+
),
134+
width="100%",
135+
),
136+
sidebar_items(),
137+
rx.spacer(),
138+
rx.vstack(
139+
rx.vstack(
140+
sidebar_item(
141+
"Settings",
142+
"settings",
143+
"/#",
144+
),
145+
sidebar_item(
146+
"Log out",
147+
"log-out",
148+
"/#",
149+
),
150+
width="100%",
151+
spacing="1",
152+
),
153+
rx.divider(margin="0"),
154+
rx.hstack(
155+
rx.icon_button(
156+
rx.icon("user"),
157+
size="3",
158+
radius="full",
159+
),
160+
rx.vstack(
161+
rx.box(
162+
rx.text(
163+
"My account",
164+
size="3",
165+
weight="bold",
166+
),
167+
rx.text(
168+
"user@reflex.dev",
169+
size="2",
170+
weight="medium",
171+
),
172+
width="100%",
173+
),
174+
spacing="0",
175+
justify="start",
176+
width="100%",
177+
),
178+
padding_x="0.5rem",
179+
align="center",
180+
justify="start",
181+
width="100%",
182+
),
183+
width="100%",
184+
spacing="5",
185+
),
186+
spacing="5",
187+
width="100%",
188+
),
189+
top="auto",
190+
right="auto",
191+
height="100%",
192+
width="20em",
193+
padding="1.5em",
194+
bg=rx.color("accent", 2),
195+
),
196+
width="100%",
197+
),
198+
direction="left",
199+
),
200+
padding="1em",
201+
),
202+
)

0 commit comments

Comments
 (0)