drill prop if item should be expanded or not

packages/libs/kode-ui/src/components/SideBar/SideBar.stories.tsx

@@ -3,8 +3,10 @@ import React from 'react';
 
 import type { ISideBar } from './SideBar';
 import { SideBar } from './SideBar';
-import { SideBarHeader } from './components/SideBarFooter';
+import { SideBarFooter } from './components/SideBarFooter';
+import { SideBarHeader } from './components/SideBarHeader';
 import { SideBarItem } from './components/SideBarItem';
+import { SideBarNavigation } from './components/SideBarNavigation';
 
 const sampleNetworkItems: string[] = ['Mainnet', 'Testnet'];
 
@@ -34,10 +36,16 @@ export const Primary: IStory = {
   args: {},
   render: () => {
     return (
-      <SideBar>
+      <SideBar isExpanded={true}>
         <SideBarHeader>
-          <SideBarItem label="item 1" />
+          <SideBarItem label="headeritem 1" />
         </SideBarHeader>
+        <SideBarNavigation>
+          <SideBarItem label="nav item 1" />
+        </SideBarNavigation>
+        <SideBarFooter>
+          <SideBarItem label="footer item 1" />
+        </SideBarFooter>
       </SideBar>
     );
   },

packages/libs/kode-ui/src/components/SideBar/SideBar.tsx

@@ -1,8 +1,17 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 
-export interface ISideBar extends PropsWithChildren {}
+export interface ISideBar extends PropsWithChildren {
+  isExpanded?: boolean;
+}
 
-export const SideBar: FC<ISideBar> = ({ children }) => {
-  return <aside>{children}</aside>;
+export const SideBar: FC<ISideBar> = ({ children, isExpanded = false }) => {
+  return (
+    <aside>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return null;
+        return React.cloneElement(child, { ...child.props, isExpanded });
+      })}
+    </aside>
+  );
 };

packages/libs/kode-ui/src/components/SideBar/components/SideBarFooter.tsx

@@ -1,12 +1,22 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 
-export interface ISideBarHeader extends PropsWithChildren {}
+export interface ISideBarFooter extends PropsWithChildren {
+  isExpanded?: boolean;
+}
 
-export const SideBarHeader: FC<ISideBarHeader> = ({ children }) => {
+export const SideBarFooter: FC<ISideBarFooter> = ({
+  children,
+  isExpanded = false,
+}) => {
   return (
-    <header>
-      <ul>{children}</ul>
-    </header>
+    <footer>
+      <ul>
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return null;
+          return React.cloneElement(child, { ...child.props, isExpanded });
+        })}
+      </ul>
+    </footer>
   );
 };

packages/libs/kode-ui/src/components/SideBar/components/SideBarHeader.tsx

@@ -1,8 +1,22 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 
-export interface ISideBarFooter extends PropsWithChildren {}
+export interface ISideBarHeader extends PropsWithChildren {
+  isExpanded?: boolean;
+}
 
-export const SideBarFooter: FC<ISideBarFooter> = ({ children }) => {
-  return <ul>{children}</ul>;
+export const SideBarHeader: FC<ISideBarHeader> = ({
+  children,
+  isExpanded = false,
+}) => {
+  return (
+    <header>
+      <ul>
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return null;
+          return React.cloneElement(child, { ...child.props, isExpanded });
+        })}
+      </ul>
+    </header>
+  );
 };

packages/libs/kode-ui/src/components/SideBar/components/SideBarItem.tsx

@@ -4,12 +4,18 @@ import { Text } from './../../Typography';
 
 export interface ISideBarItem {
   label: string;
+  isExpanded?: boolean;
 }
 
-export const SideBarItem: FC<ISideBarItem> = ({ label }) => {
+export const SideBarItem: FC<ISideBarItem> = ({
+  label,
+  isExpanded = false,
+}) => {
   return (
     <li>
-      <Text>{label}</Text>
+      <Text>
+        {label} {isExpanded.toString()}
+      </Text>
     </li>
   );
 };

packages/libs/kode-ui/src/components/SideBar/components/SideBarNavigation.tsx

@@ -1,8 +1,22 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 
-export interface ISideBarNavigation extends PropsWithChildren {}
+export interface ISideBarNavigation extends PropsWithChildren {
+  isExpanded?: boolean;
+}
 
-export const SideBarNavigation: FC<ISideBarNavigation> = ({ children }) => {
-  return <ul>{children}</ul>;
+export const SideBarNavigation: FC<ISideBarNavigation> = ({
+  children,
+  isExpanded = false,
+}) => {
+  return (
+    <nav>
+      <ul>
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return null;
+          return React.cloneElement(child, { ...child.props, isExpanded });
+        })}
+      </ul>
+    </nav>
+  );
 };