From 7936b898a7c24f441e14ec334d77fbdc8dbfb7c0 Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Tue, 5 Nov 2024 11:31:28 +0100
Subject: [PATCH] fix storybook

---
 .changeset/shy-mails-punch.md                 |  2 +
 .../SideBarLayout/SideBarLayout.stories.tsx   | 42 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/shy-mails-punch.md

diff --git a/.changeset/shy-mails-punch.md b/.changeset/shy-mails-punch.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/shy-mails-punch.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
index 54d5492e96..4dd1b06f30 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -19,6 +19,12 @@ import {
 import { LayoutProvider, useLayout } from './components/LayoutProvider';
 import { KadenaLogo } from './components/Logo/KadenaLogo';
 import { KLogo } from './components/Logo/KLogo';
+import {
+  RightAside,
+  RightAsideContent,
+  RightAsideFooter,
+  RightAsideHeader,
+} from './components/RightAside';
 import { SideBarFooter } from './components/SideBarFooter';
 import { SideBarFooterItem } from './components/SideBarFooterItem';
 import { SideBarItem } from './components/SideBarItem';
@@ -63,7 +69,12 @@ const LinkComponent: FC<PropsWithChildren<{ to: string }>> = ({
 };
 
 const InnerLayout = () => {
-  const { setAppContext, isExpanded } = useLayout();
+  const {
+    setAppContext,
+    isExpanded,
+    setIsRightAsideExpanded,
+    isRightAsideExpanded,
+  } = useLayout();
 
   useEffect(() => {
     setAppContext({
@@ -187,7 +198,34 @@ const InnerLayout = () => {
         </SideBarFooter>
       }
     >
-      <Stack style={{ maxWidth: '800px', height: '400px' }}>content</Stack>
+      <RightAside isOpen={isRightAsideExpanded}>
+        <RightAsideHeader label="test title" />
+        <RightAsideContent>more content</RightAsideContent>
+        <RightAsideFooter>
+          <Button
+            onPress={() => {
+              setIsRightAsideExpanded(false);
+            }}
+          >
+            Close
+          </Button>
+        </RightAsideFooter>
+      </RightAside>
+
+      <Stack
+        width="100%"
+        style={{ height: '400px' }}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Button
+          onPress={() => {
+            setIsRightAsideExpanded(true);
+          }}
+        >
+          open sidebar
+        </Button>
+      </Stack>
     </SideBarLayout>
   );
 };