From d3a1c28d944361d2b227531ffb0c3e5a9ddcd31e Mon Sep 17 00:00:00 2001 From: markrz12 Date: Wed, 22 Nov 2023 15:54:26 +0100 Subject: [PATCH] BLUR-32 sidebar modification --- assets/about-icon.png | Bin 0 -> 761 bytes assets/contact-icon.png | Bin 0 -> 529 bytes assets/home-icon.png | Bin 0 -> 477 bytes assets/image-icon.png | Bin 0 -> 660 bytes blurme/components/sidebar.py | 49 +++++++++-------------------------- blurme/pages/dashboard.py | 2 +- blurme/pages/index.py | 2 +- blurme/pages/settings.py | 2 +- 8 files changed, 15 insertions(+), 40 deletions(-) create mode 100644 assets/about-icon.png create mode 100644 assets/contact-icon.png create mode 100644 assets/home-icon.png create mode 100644 assets/image-icon.png diff --git a/assets/about-icon.png b/assets/about-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..be1d9d481f0a50e63d5d9e6525b854c21228e03f GIT binary patch literal 761 zcmVUNXWdn@5M(c0m^=60 zbI<#{FN!+Sk$(`9heGU90k|8-aU#{X#my=vP1Bvq$ziMryD0&ZPb^`I z?OmPGW&5W1ZoQI?(W`Y_5~a9#9t7YFnd(C zu*|MCB>>=!6&z6_fN8U@8G-xR5{QHpz`bw@NM5&?X~P&X`*kZbFjla^zB=bp^Y=H~ zgh`U@Q%*t5SW^NLl9x!n1@HsFQvgSzK)m;d06fqUv|~8uy+0VnCJ+a`Jv*CrPruuz00X*#lrXzit3NL{YR2!0m!H zEmQ!vEazi^Z&|hK2sr14Ea0X0emGO-+;RD{jpv*@7y5It=fmTs+|Vy@ zRU>R0Y(ltm`Q!xB-PV+q8Hn3bu`T zLg3YEwJW>H0K5Wlrc^5JmTKfd@x{Tx!R^XXt}yg$i#9`gdwZFYXrPOl!Kj^5tya7A rKC~mH=UYv022Hz0-qzwB`7h-s$9`!I->Xa*00000NkvXXu0mjf#d=!h literal 0 HcmV?d00001 diff --git a/assets/contact-icon.png b/assets/contact-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..dbaf9192c40e37ffa7c0b6744c7abdbff0da18cd GIT binary patch literal 529 zcmV+s0`C2ZP)znlVP|P=s+4|ImRj0c z`5!E_uuSV0f|izkH0g|>orq{-qiAGc0tYddXf|kZ4+f5#x%b}Q?d^;)88ZAgluD%$ zk}Cjq0aQK34$0*>j)zml^Z9%L;F@Hk9|7P>G};;XzmnW47K>v)6_#h@S>|Wb)orf>N!hpjU9`&Xpd)D|iJ@ zQK5AuEgtF>7iX z0B{W8i)0hP$;1kmN~HyoHIf~YZ5wi3leJunlUycwYYTpmJOXe4;7#rUxDUf{HJ9SX zm_3pWTj)`1y`2(PA^Bj}UZW`5_gQ;JJSN$)1+L;aUi!N!2!chDmnmybl~S`~RSt$v z>Lk_)OdTu9ck$YlD;9_qz3g&Mz;2UCg1b=~OE|(!8rHcl0BivGw8Z*2qh&|7ZXZN) zRtAzto?Ajyc>;j5hQM8%61^oRQW&*(VBm}f%y<9HOCHLYuo=;9<5&}BC)<@-K zPzYdQ0lUp&j5+KTgPL$yUIrwe`^|Z3-k*H&G9bAt{{jFm`b55i%K@e??ilBn9%yhrkyNoD;tcZtIO!fm5Z~6&} z=t0mQ2wpq~@h*s-LOcjT#e;`vK=C37Uc7klpot=wxGIupq(}`6%j`~Pb{sExP_WZe zRqsu2S9KY)iB05y$O@xwnNv>8v+;1!1`|%I~a}oex%38b2j0nj= z@`mPo9wMM8&Q*}7h@xn>3iuTwU`?zHk#nvM;H0%SE}fU<1Z)E^lg0x0N%CB60svgp zxX&aXll%?fM-)Y_E&;do%dcpTd3kouovus3b&Y!p-~xcJ^4x4TkJKU{iXumHAzSwV z?v={Rl2s7Lu_bwp4}f{W@DXmmq`A}*|j%80%ZFDJXG>8&bed#ak3`wH2#sq6p)K86$+4B z5x^5&U-aG|H3J~;NPYq^E4xrYE*~>HR6wKA*hBJ}I)9Mc&J-YygtTM1kcN;iSZfdG2B!lFfLH4LE?4OQgnT)GLxm$5*G0Vb-ZyI_ z&rHPGdMz|*D%uZ5BTpgID}Wa=!xfRs;WWl<0q~#_@-mQ`C;5HD2d*jrIQ8Gi&ANc8 uoWJJfKi&2|0ar;b>p8gGYPAl82LA<-N0Z1Ciu*eN0000 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_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, +def sidebar_item(text: str, icon: str, url: str, ) -> rx.Component: """Sidebar item. Args: @@ -66,11 +40,11 @@ def sidebar_item(text: str, url: str) -> rx.Component: return rx.link( rx.hstack( - #rx.image( - # src=icon, - # height="2.5em", - # padding="0.5em", - #), + rx.image( + src=icon, + height="2.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", - height = "2em" + padding_x="1.3em", + 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, diff --git a/blurme/pages/dashboard.py b/blurme/pages/dashboard.py index 1fe1a01..e794619 100644 --- a/blurme/pages/dashboard.py +++ b/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. diff --git a/blurme/pages/index.py b/blurme/pages/index.py index a92a161..e515c47 100644 --- a/blurme/pages/index.py +++ b/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"), diff --git a/blurme/pages/settings.py b/blurme/pages/settings.py index b3556d0..6f6d865 100644 --- a/blurme/pages/settings.py +++ b/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"),