Adding Sidebar

nextpy/__init__.py

@@ -179,6 +179,8 @@
  "ScaleFade",
  "Script",
  "Select",
+ "Sidebar",
+ "SidebarItem",
  "Skeleton",
  "SkeletonCircle",
  "SkeletonText",

nextpy/__init__.pyi

@@ -398,6 +398,8 @@ from nextpy.interfaces.web.components import (
 )
 from nextpy.interfaces.web.components import select_slider_thumb as select_slider_thumb
 from nextpy.interfaces.web.components import select_slider_track as select_slider_track
+from nextpy.interfaces.web.components import sidebar as sidebar
+from nextpy.interfaces.web.components import sidebar_item as sidebar_item
 from nextpy.interfaces.web.components import skeleton as skeleton
 from nextpy.interfaces.web.components import skeleton_circle as skeleton_circle
 from nextpy.interfaces.web.components import skeleton_text as skeleton_text

nextpy/interfaces/web/components/chakra/__init__.py

@@ -161,6 +161,8 @@
 select_slider_filled_track = RangeSliderFilledTrack.create
 select_slider_thumb = RangeSliderThumb.create
 select_slider_track = RangeSliderTrack.create
+sidebar = Sidebar
+sidebar_item = SidebarItem
 skeleton = Skeleton.create
 skeleton_circle = SkeletonCircle.create
 skeleton_text = SkeletonText.create

nextpy/interfaces/web/components/chakra/layout/__init__.py

@@ -13,6 +13,7 @@
 from .html import Html
 from .spacer import Spacer
 from .stack import Hstack, Stack, Vstack
+from .sidebar import Sidebar, SidebarItem
 from .wrap import Wrap, WrapItem
 
 __all__ = [f for f in dir() if f[0].isupper()] # type: ignore

nextpy/interfaces/web/components/chakra/layout/sidebar.py

@@ -0,0 +1,42 @@
+import nextpy as xt
+
+
+
+def SidebarItem(text, href, class_name="", **kwargs):
+ return xt.link(
+ xt.text(text),
+ class_name=f"text-md text-left {class_name}",
+ href=href,
+ bg="transparent",
+ _hover={"bg": "#0A4075"},
+ border_radius="999px",
+ width="100%",
+ pl="14px",
+ py="6px",
+ **kwargs,
+ )
+
+
+def Sidebar(
+ *children,
+ top="0px",
+ **kwargs,
+):
+ return xt.box(
+ xt.vstack(
+ *children,
+ spacing="4px",
+ width="100%",
+ align_items="start",
+ pl="4px",
+ pt="1rem",
+ height="100%",
+ ),
+ display=["none", "block", "block"],
+ width="15em",
+ top=top,
+ height=f"calc(100dvh - {top})",
+ position="sticky",
+ class_name="pt-4 pl-4 overflow-y-auto ",
+ **kwargs,
+ )