From 4aa7b9c6faf200ebac0ea4653e4fcb41337734ca Mon Sep 17 00:00:00 2001
From: Raj <rajkumar464650@gmail.com>
Date: Mon, 26 Feb 2024 14:34:07 +0530
Subject: [PATCH] add sidebar

---
 nextpy/__init__.py                            |  2 +
 nextpy/__init__.pyi                           |  2 +
 .../web/components/chakra/__init__.py         |  2 +
 .../web/components/chakra/layout/__init__.py  |  1 +
 .../web/components/chakra/layout/sidebar.py   | 42 +++++++++++++++++++
 5 files changed, 49 insertions(+)
 create mode 100644 nextpy/interfaces/web/components/chakra/layout/sidebar.py

diff --git a/nextpy/__init__.py b/nextpy/__init__.py
index 4201a02a..dc699918 100644
--- a/nextpy/__init__.py
+++ b/nextpy/__init__.py
@@ -179,6 +179,8 @@
     "ScaleFade",
     "Script",
     "Select",
+    "Sidebar",
+    "SidebarItem",
     "Skeleton",
     "SkeletonCircle",
     "SkeletonText",
diff --git a/nextpy/__init__.pyi b/nextpy/__init__.pyi
index b6cc8b76..68468bae 100644
--- a/nextpy/__init__.pyi
+++ b/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
diff --git a/nextpy/interfaces/web/components/chakra/__init__.py b/nextpy/interfaces/web/components/chakra/__init__.py
index 8dad4ab5..5193c573 100644
--- a/nextpy/interfaces/web/components/chakra/__init__.py
+++ b/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
diff --git a/nextpy/interfaces/web/components/chakra/layout/__init__.py b/nextpy/interfaces/web/components/chakra/layout/__init__.py
index 1da9d73b..a57a0dfc 100644
--- a/nextpy/interfaces/web/components/chakra/layout/__init__.py
+++ b/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
diff --git a/nextpy/interfaces/web/components/chakra/layout/sidebar.py b/nextpy/interfaces/web/components/chakra/layout/sidebar.py
new file mode 100644
index 00000000..0266415f
--- /dev/null
+++ b/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,
+    )