From d71d8187bac18ba0673d7687327089d4e37d2ff9 Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Tue, 29 Oct 2024 16:06:43 +0100
Subject: [PATCH] add full layout

---
 .../apps/dev-wallet/src/App/Layout/Layout.tsx |  65 ++++---
 .../dev-wallet/src/App/Layout/SideBar.tsx     | 182 +++++++++---------
 packages/apps/dev-wallet/src/App/app.tsx      |   7 +-
 .../dev-wallet/src/App/layout-mini.css.ts     |  14 --
 .../apps/dev-wallet/src/App/layout-mini.tsx   |  10 +-
 .../patterns/SideBarLayout/InnerLayout.tsx    |  33 ----
 .../src/patterns/SideBarLayout/SideBar.tsx    |  18 +-
 .../SideBarLayout/SideBarLayout.stories.tsx   | 178 ++++++++++-------
 .../patterns/SideBarLayout/SideBarLayout.tsx  |  52 ++++-
 .../components/SideBarAppContext.tsx          |   4 +-
 .../components/SideBarHeader.tsx              |  47 +++--
 .../components/SideBarProvider.tsx            |  18 ++
 .../src/patterns/SideBarLayout/index.ts       |   5 +-
 .../src/patterns/SideBarLayout/sidebar.css.ts |  17 +-
 .../src/patterns/SideBarLayout/styles.css.ts  |  91 ++++++---
 packages/libs/kode-ui/src/patterns/index.ts   |   4 +-
 16 files changed, 423 insertions(+), 322 deletions(-)
 delete mode 100644 packages/libs/kode-ui/src/patterns/SideBarLayout/InnerLayout.tsx

diff --git a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
index 819d251b3a..684c5666b0 100644
--- a/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
+++ b/packages/apps/dev-wallet/src/App/Layout/Layout.tsx
@@ -28,38 +28,39 @@ export const Layout: FC = () => {
   };
   return (
     <>
-      <SideBarLayout topBanner={<BetaHeader />}>
-        <SideBar />
-
-        <main style={{ gridArea: 'sidebarlayout-main' }}>
-          <Outlet />
-        </main>
-        <SideBarFooter>
-          <SideBarFooterItem
-            visual={<MonoWindow />}
-            label=""
-            onPress={() => {}}
-          />
-          <SideBarFooterItem
-            visual={<MonoWifiTethering />}
-            label="Profile"
-            onPress={() => {
-              navigate('/profile');
-            }}
-          />
-          <SideBarFooterItem
-            visual={<MonoWorkspaces />}
-            label="Select network"
-            onPress={() => {}}
-          >
-            <NetworkSelector variant="transparent" showLabel={false} />
-          </SideBarFooterItem>
-          <SideBarFooterItem
-            visual={<MonoLightMode />}
-            label="Change theme"
-            onPress={toggleTheme}
-          />
-        </SideBarFooter>
+      <SideBarLayout
+        topBanner={<BetaHeader />}
+        sidebar={<SideBar />}
+        footer={
+          <SideBarFooter>
+            <SideBarFooterItem
+              visual={<MonoWindow />}
+              label=""
+              onPress={() => {}}
+            />
+            <SideBarFooterItem
+              visual={<MonoWifiTethering />}
+              label="Profile"
+              onPress={() => {
+                navigate('/profile');
+              }}
+            />
+            <SideBarFooterItem
+              visual={<MonoWorkspaces />}
+              label="Select network"
+              onPress={() => {}}
+            >
+              <NetworkSelector variant="transparent" showLabel={false} />
+            </SideBarFooterItem>
+            <SideBarFooterItem
+              visual={<MonoLightMode />}
+              label="Change theme"
+              onPress={toggleTheme}
+            />
+          </SideBarFooter>
+        }
+      >
+        <Outlet />
       </SideBarLayout>
 
       <div id="modalportal"></div>
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
index ab2ab6f8b1..fa3cb9827a 100644
--- a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
+++ b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -20,11 +20,8 @@ import {
   useTheme,
 } from '@kadena/kode-ui';
 import {
-  SideBarAppContext,
-  SideBarContext,
   SideBarItem,
   SideBarItemsInline,
-  SideBarNavigation,
   SideBarTree,
   SideBarTreeItem,
   SideBar as SideBarUI,
@@ -48,8 +45,8 @@ export const SideBar: FC = () => {
     lockProfile();
   };
   return (
-    <SideBarUI>
-      <SideBarAppContext>
+    <SideBarUI
+      appContext={
         <SideBarItem
           visual={<MonoNetworkCheck />}
           label="Select network"
@@ -61,99 +58,102 @@ export const SideBar: FC = () => {
             isCompact={!isExpanded}
           />
         </SideBarItem>
-      </SideBarAppContext>
-      <SideBarNavigation>
-        <SideBarItem
-          visual={<MonoDataThresholding />}
-          label="Dashboard"
-          onPress={() => navigate('/')}
-        />
-
-        <SideBarTree visual={<MonoWallet />} label="My Wallets">
-          <SideBarTreeItem
-            label="Keys"
-            onPress={() => navigate('/key-management/keys')}
-          />
-        </SideBarTree>
-        <SideBarTree visual={<MonoTableRows />} label="Transactions">
-          <SideBarTreeItem
-            label="History"
-            onPress={() => navigate('/transactions')}
-          />
-        </SideBarTree>
-        <SideBarTree visual={<MonoDashboardCustomize />} label="Utilities">
-          <SideBarTreeItem
-            label="Sig Builder"
-            onPress={() => navigate('/sig-builder')}
-          />
-          <SideBarTreeItem
-            label="Dev Console"
-            onPress={() => navigate('/terminal')}
-          />
-          <SideBarTreeItem
-            label="Backup"
-            onPress={() => navigate('/backup-recovery-phrase/write-down')}
+      }
+      navigation={
+        <>
+          <SideBarItem
+            visual={<MonoDataThresholding />}
+            label="Dashboard"
+            onPress={() => navigate('/')}
           />
-        </SideBarTree>
 
-        <SideBarItem
-          visual={<MonoSwapHoriz />}
-          label="Transfer"
-          onPress={() => {
-            navigate('/transfer');
-          }}
-        />
+          <SideBarTree visual={<MonoWallet />} label="My Wallets">
+            <SideBarTreeItem
+              label="Keys"
+              onPress={() => navigate('/key-management/keys')}
+            />
+          </SideBarTree>
+          <SideBarTree visual={<MonoTableRows />} label="Transactions">
+            <SideBarTreeItem
+              label="History"
+              onPress={() => navigate('/transactions')}
+            />
+          </SideBarTree>
+          <SideBarTree visual={<MonoDashboardCustomize />} label="Utilities">
+            <SideBarTreeItem
+              label="Sig Builder"
+              onPress={() => navigate('/sig-builder')}
+            />
+            <SideBarTreeItem
+              label="Dev Console"
+              onPress={() => navigate('/terminal')}
+            />
+            <SideBarTreeItem
+              label="Backup"
+              onPress={() => navigate('/backup-recovery-phrase/write-down')}
+            />
+          </SideBarTree>
 
-        <SideBarItem
-          visual={<MonoContacts />}
-          label="Contacts"
-          onPress={() => navigate('/contacts')}
-        />
-      </SideBarNavigation>
+          <SideBarItem
+            visual={<MonoSwapHoriz />}
+            label="Transfer"
+            onPress={() => {
+              navigate('/transfer');
+            }}
+          />
 
-      <SideBarContext>
-        <SideBarItemsInline>
           <SideBarItem
             visual={<MonoContacts />}
-            label="Profile"
-            onPress={() => {}}
-          >
-            <ContextMenu
-              trigger={
-                <Button
-                  isCompact={!isExpanded}
-                  variant="outlined"
-                  endVisual={<MonoContacts />}
-                >
-                  {isExpanded ? 'Profile' : undefined}
-                </Button>
-              }
+            label="Contacts"
+            onPress={() => navigate('/contacts')}
+          />
+        </>
+      }
+      context={
+        <>
+          <SideBarItemsInline>
+            <SideBarItem
+              visual={<MonoContacts />}
+              label="Profile"
+              onPress={() => {}}
             >
-              <ContextMenuItem
-                onClick={() => navigate('/profile')}
-                label="Profile"
-              />
-              <ContextMenuItem
-                endVisual={<MonoLogout />}
-                label="Logout"
-                onClick={handleLogout}
+              <ContextMenu
+                trigger={
+                  <Button
+                    isCompact={!isExpanded}
+                    variant="outlined"
+                    endVisual={<MonoContacts />}
+                  >
+                    {isExpanded ? 'Profile' : undefined}
+                  </Button>
+                }
+              >
+                <ContextMenuItem
+                  onClick={() => navigate('/profile')}
+                  label="Profile"
+                />
+                <ContextMenuItem
+                  endVisual={<MonoLogout />}
+                  label="Logout"
+                  onClick={handleLogout}
+                />
+              </ContextMenu>
+            </SideBarItem>
+            <SideBarItem
+              visual={<MonoContrast />}
+              onPress={toggleTheme}
+              label="Change theme"
+            >
+              <Button
+                variant={isExpanded ? 'transparent' : 'outlined'}
+                onPress={() => toggleTheme()}
+                startVisual={<MonoContrast />}
+                isCompact={!isExpanded}
               />
-            </ContextMenu>
-          </SideBarItem>
-          <SideBarItem
-            visual={<MonoContrast />}
-            onPress={toggleTheme}
-            label="Change theme"
-          >
-            <Button
-              variant={isExpanded ? 'transparent' : 'outlined'}
-              onPress={() => toggleTheme()}
-              startVisual={<MonoContrast />}
-              isCompact={!isExpanded}
-            />
-          </SideBarItem>
-        </SideBarItemsInline>
-      </SideBarContext>
-    </SideBarUI>
+            </SideBarItem>
+          </SideBarItemsInline>
+        </>
+      }
+    ></SideBarUI>
   );
 };
diff --git a/packages/apps/dev-wallet/src/App/app.tsx b/packages/apps/dev-wallet/src/App/app.tsx
index 6e0590cbbc..d26cc7b49a 100644
--- a/packages/apps/dev-wallet/src/App/app.tsx
+++ b/packages/apps/dev-wallet/src/App/app.tsx
@@ -1,6 +1,7 @@
 import { DatabaseProvider } from '@/modules/db/db.provider';
 import { WalletProvider } from '@/modules/wallet/wallet.provider';
 import { MediaContextProvider } from '@kadena/kode-ui';
+import { SideBarProvider } from '@kadena/kode-ui/patterns';
 import { useEffect } from 'react';
 import { PromptProvider } from '../Components/PromptProvider/Prompt';
 import { Routes } from './routes';
@@ -18,8 +19,10 @@ function Providers({ children }: { children: React.ReactNode }) {
         <PromptProvider>
           <DatabaseProvider>
             <WalletProvider>
-              {/* TODO: fixed the issue with prompt and remove this one in favor of the one above */}
-              <PromptProvider>{children}</PromptProvider>
+              <SideBarProvider>
+                {/* TODO: fixed the issue with prompt and remove this one in favor of the one above */}
+                <PromptProvider>{children}</PromptProvider>
+              </SideBarProvider>
             </WalletProvider>
           </DatabaseProvider>
         </PromptProvider>
diff --git a/packages/apps/dev-wallet/src/App/layout-mini.css.ts b/packages/apps/dev-wallet/src/App/layout-mini.css.ts
index 0595aa4b9b..7834111697 100644
--- a/packages/apps/dev-wallet/src/App/layout-mini.css.ts
+++ b/packages/apps/dev-wallet/src/App/layout-mini.css.ts
@@ -7,20 +7,6 @@ export const headerStyle = style({
   minHeight: minHeaderHeight,
 });
 
-export const mainStyle = style([
-  atoms({
-    width: '100%',
-    color: 'text.base.default',
-    display: 'flex',
-    alignItems: 'center',
-  }),
-  {
-    minHeight: `calc(100vh - ${minHeaderHeight})`,
-    background: 'transparent', // fallback in case radial-gradient is not working
-    backgroundRepeat: 'no-repeat',
-  },
-]);
-
 export const containerStyle = style([
   atoms({
     padding: 'sm',
diff --git a/packages/apps/dev-wallet/src/App/layout-mini.tsx b/packages/apps/dev-wallet/src/App/layout-mini.tsx
index e2f39a3254..ca2304507e 100644
--- a/packages/apps/dev-wallet/src/App/layout-mini.tsx
+++ b/packages/apps/dev-wallet/src/App/layout-mini.tsx
@@ -1,18 +1,16 @@
-import { MainHeader } from '@/Components/MainHeader/MainHeader';
-
+import { SideBarLayout } from '@kadena/kode-ui/patterns';
 import { FC } from 'react';
 import { Outlet } from 'react-router-dom';
-import { containerStyle, mainStyle } from './layout-mini.css';
+import { containerStyle } from './layout-mini.css';
 
 export const LayoutMini: FC = () => {
   return (
     <>
-      <MainHeader />
-      <main className={mainStyle}>
+      <SideBarLayout variant="full">
         <div className={containerStyle}>
           <Outlet />
         </div>
-      </main>
+      </SideBarLayout>
       <div id="modalportal"></div>
     </>
   );
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/InnerLayout.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/InnerLayout.tsx
deleted file mode 100644
index 3b9efc980d..0000000000
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/InnerLayout.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import classNames from 'classnames';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
-import React from 'react';
-import { Stack } from './../../components';
-import { SideBarHeader } from './components/SideBarHeader';
-import { useSideBar } from './components/SideBarProvider';
-import { layoutExpandedWrapperClass, layoutWrapperClass } from './styles.css';
-
-export interface ISideBarLayout extends PropsWithChildren {
-  topBanner?: ReactNode;
-}
-export const Innerlayout: FC<ISideBarLayout> = ({ children, topBanner }) => {
-  const { isExpanded } = useSideBar();
-
-  return (
-    <Stack
-      width="100%"
-      flexDirection="column"
-      position="relative"
-      style={{ minHeight: '100dvh' }}
-    >
-      {topBanner}
-      <Stack
-        className={classNames(layoutWrapperClass, {
-          [layoutExpandedWrapperClass]: isExpanded,
-        })}
-      >
-        <SideBarHeader />
-        {children}
-      </Stack>
-    </Stack>
-  );
-};
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
index ba66e0c998..2db24a6eae 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBar.tsx
@@ -1,6 +1,9 @@
 import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
+import { SideBarAppContext } from './components/SideBarAppContext';
+import { SideBarContext } from './components/SideBarContext';
+import { SideBarNavigation } from './components/SideBarNavigation';
 import { useSideBar } from './components/SideBarProvider';
 import {
   menuWrapperClass,
@@ -10,9 +13,18 @@ import {
 export interface ISideBarProps extends PropsWithChildren {
   activeUrl?: string;
   logo?: ReactElement;
+
+  appContext?: ReactElement;
+  navigation?: ReactElement;
+  context?: ReactElement;
 }
 
-export const SideBar: FC<ISideBarProps> = ({ children }) => {
+export const SideBar: FC<ISideBarProps> = ({
+  children,
+  appContext,
+  navigation,
+  context,
+}) => {
   const { isExpanded } = useSideBar();
 
   return (
@@ -21,6 +33,10 @@ export const SideBar: FC<ISideBarProps> = ({ children }) => {
         [menuWrapperMobileExpandedClass]: isExpanded,
       })}
     >
+      {appContext && <SideBarAppContext>{appContext}</SideBarAppContext>}
+      {navigation && <SideBarNavigation>{navigation}</SideBarNavigation>}
+      {context && <SideBarContext>{context}</SideBarContext>}
+
       {children}
     </aside>
   );
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 339cad2097..989c09f2cc 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -15,10 +15,11 @@ import { SideBarAppContext } from './components/SideBarAppContext';
 import { SideBarContext } from './components/SideBarContext';
 import { SideBarFooter } from './components/SideBarFooter';
 import { SideBarFooterItem } from './components/SideBarFooterItem';
+import { SideBarHeader } from './components/SideBarHeader';
 import { SideBarItem } from './components/SideBarItem';
 import { SideBarItemsInline } from './components/SideBarItemsInline';
 import { SideBarNavigation } from './components/SideBarNavigation';
-import { useSideBar } from './components/SideBarProvider';
+import { SideBarProvider, useSideBar } from './components/SideBarProvider';
 import { SideBarTree } from './components/SideBarTree';
 import { SideBarTreeItem } from './components/SideBarTreeItem';
 import type { ISideBarProps } from './SideBar';
@@ -50,7 +51,7 @@ const meta: Meta<ISideBarProps> = {
 type IStory = StoryObj<ISideBarProps>;
 
 const InnerLayout = () => {
-  const { setAppContext, isExpanded } = useSideBar();
+  const { setAppContext, isExpanded, setBreadCrumbs } = useSideBar();
 
   useEffect(() => {
     setAppContext({
@@ -58,85 +59,99 @@ const InnerLayout = () => {
       label: 'New Transfer',
       onPress: () => {},
     });
+
+    setBreadCrumbs([
+      { visual: <MonoAccountTree />, label: 'He-man', url: '/accounts' },
+      { label: 'Skeletor', url: '/accounts' },
+    ]);
   }, []);
 
   return (
-    <>
-      <SideBar>
-        <SideBarAppContext>
-          <SideBarItem
+    <SideBarLayout
+      topBanner={<div>topbanner</div>}
+      breadcrumbs={<div>sdfsf</div>}
+      sidebar={
+        <SideBar
+          appContext={
+            <SideBarItem
+              visual={<MonoWifiTethering />}
+              label="Mainnet"
+              onPress={() => {}}
+            />
+          }
+          navigation={
+            <>
+              <SideBarTree visual={<MonoWallet />} label="My Wallet">
+                <SideBarTreeItem label="Accounts" onPress={() => {}} />
+                <SideBarTreeItem label="Assets" onPress={() => {}} />
+              </SideBarTree>
+              <SideBarItem
+                visual={<MonoControlPointDuplicate />}
+                label="Dashboard"
+                onPress={() => {}}
+              />
+            </>
+          }
+          context={
+            <>
+              <SideBarItem
+                visual={<MonoControlPointDuplicate />}
+                label="New Transfer"
+                onPress={() => {}}
+              />
+
+              <SideBarItemsInline>
+                <SideBarItem
+                  visual={<MonoAccountTree />}
+                  label="Profile"
+                  onPress={() => {}}
+                />
+
+                <SideBarItem
+                  visual={<MonoLightMode />}
+                  label="Change theme"
+                  onPress={() => {}}
+                >
+                  <Button
+                    aria-label="Change theme"
+                    variant={isExpanded ? 'transparent' : 'outlined'}
+                    isCompact={!isExpanded}
+                    startVisual={<MonoLightMode />}
+                    onPress={() => {}}
+                  />
+                </SideBarItem>
+              </SideBarItemsInline>
+            </>
+          }
+        />
+      }
+      footer={
+        <SideBarFooter>
+          <SideBarFooterItem
+            visual={<MonoWindow />}
+            onPress={() => {}}
+            label="option 1"
+          />
+          <SideBarFooterItem
             visual={<MonoWifiTethering />}
-            label="Mainnet"
             onPress={() => {}}
+            label="option 2"
           />
-        </SideBarAppContext>
-        <SideBarNavigation>
-          <SideBarTree visual={<MonoWallet />} label="My Wallet">
-            <SideBarTreeItem label="Accounts" onPress={() => {}} />
-            <SideBarTreeItem label="Assets" onPress={() => {}} />
-          </SideBarTree>
-          <SideBarItem
-            visual={<MonoControlPointDuplicate />}
-            label="Dashboard"
+          <SideBarFooterItem
+            visual={<MonoWorkspaces />}
             onPress={() => {}}
+            label="option 3"
           />
-        </SideBarNavigation>
-        <SideBarContext>
-          <SideBarItem
-            visual={<MonoControlPointDuplicate />}
-            label="New Transfer"
+          <SideBarFooterItem
+            visual={<MonoLightMode />}
             onPress={() => {}}
+            label="option 4"
           />
-
-          <SideBarItemsInline>
-            <SideBarItem
-              visual={<MonoAccountTree />}
-              label="Profile"
-              onPress={() => {}}
-            />
-
-            <SideBarItem
-              visual={<MonoLightMode />}
-              label="Change theme"
-              onPress={() => {}}
-            >
-              <Button
-                aria-label="Change theme"
-                variant={isExpanded ? 'transparent' : 'outlined'}
-                isCompact={!isExpanded}
-                startVisual={<MonoLightMode />}
-                onPress={() => {}}
-              />
-            </SideBarItem>
-          </SideBarItemsInline>
-        </SideBarContext>
-      </SideBar>
-
-      <main style={{ gridArea: 'sidebarlayout-main' }}>content</main>
-
-      <SideBarFooter>
-        <SideBarFooterItem
-          visual={<MonoWindow />}
-          onPress={() => {}}
-          label="option 1"
-        />
-        <SideBarFooterItem
-          visual={<MonoWifiTethering />}
-          onPress={() => {}}
-          label="option 2"
-        />
-        <SideBarFooterItem
-          visual={<MonoWorkspaces />}
-          onPress={() => {}}
-          label="option 3"
-        />
-        <SideBarFooterItem
-          visual={<MonoLightMode />}
-          onPress={() => {}}
-          label="option 4"
-        />
-      </SideBarFooter>
-    </>
+        </SideBarFooter>
+      }
+    >
+      content
+    </SideBarLayout>
   );
 };
 
@@ -146,9 +161,26 @@ export const Primary: IStory = {
   args: {},
   render: () => {
     return (
-      <SideBarLayout>
+      <SideBarProvider>
         <InnerLayout />
-      </SideBarLayout>
+      </SideBarProvider>
+    );
+  },
+};
+
+const InnerLayoutFull = () => {
+  return <SideBarLayout variant="full">content</SideBarLayout>;
+};
+
+export const Full: IStory = {
+  name: 'Full centered layout',
+
+  args: {},
+  render: () => {
+    return (
+      <SideBarProvider>
+        <InnerLayoutFull />
+      </SideBarProvider>
     );
   },
 };
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
index df0ec30b83..c63eab8bbb 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
@@ -1,18 +1,52 @@
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import classNames from 'classnames';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
-import { MediaContextProvider } from './../../components';
-import { Innerlayout } from './InnerLayout';
-import { SideBarProvider } from './components/SideBarProvider';
+import { MediaContextProvider, Stack } from './../../components';
+
+import { SideBarHeader } from './components/SideBarHeader';
+import { useSideBar } from './components/SideBarProvider';
+import {
+  layoutExpandedWrapperClass,
+  layoutWrapperClass,
+  mainClass,
+} from './styles.css';
 
 export interface ISideBarLayout extends PropsWithChildren {
-  topBanner?: ReactNode;
+  topBanner?: ReactElement;
+  breadcrumbs?: ReactElement;
+  sidebar?: ReactElement;
+  footer?: ReactElement;
+  variant?: 'default' | 'full';
 }
-export const SideBarLayout: FC<ISideBarLayout> = ({ children, topBanner }) => {
+export const SideBarLayout: FC<ISideBarLayout> = ({
+  children,
+  topBanner,
+  breadcrumbs,
+  sidebar,
+  footer,
+  variant = 'default',
+}) => {
+  const { isExpanded } = useSideBar();
   return (
     <MediaContextProvider>
-      <SideBarProvider>
-        <Innerlayout topBanner={topBanner}>{children}</Innerlayout>
-      </SideBarProvider>
+      <Stack
+        width="100%"
+        flexDirection="column"
+        position="relative"
+        style={{ minHeight: '100dvh' }}
+      >
+        {topBanner}
+        <Stack
+          className={classNames(layoutWrapperClass({ variant }), {
+            [layoutExpandedWrapperClass]: isExpanded,
+          })}
+        >
+          <SideBarHeader breadcrumbs={breadcrumbs} hasSidebar={!!sidebar} />
+          {sidebar}
+          <main className={mainClass({ variant })}>{children}</main>
+          {footer}
+        </Stack>
+      </Stack>
     </MediaContextProvider>
   );
 };
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAppContext.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAppContext.tsx
index c9bd8d4f9a..101358b0a9 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAppContext.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAppContext.tsx
@@ -7,8 +7,8 @@ import { useSideBar } from './SideBarProvider';
 export interface ISideBarAppContext extends PropsWithChildren {}
 
 export const SideBarAppContext: FC<ISideBarAppContext> = ({ children }) => {
-  const { isExpanded } = useSideBar();
-  const { appContext } = useSideBar();
+  const { isExpanded, appContext } = useSideBar();
+
   return (
     <header>
       <ul
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
index 3eee57ec60..42198b2ce6 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
@@ -1,6 +1,6 @@
 import { MonoMenu, MonoMenuOpen } from '@kadena/kode-icons/system';
 import classNames from 'classnames';
-import type { FC, ReactElement } from 'react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
 import type { PressEvent } from 'react-aria';
 import {
@@ -16,11 +16,17 @@ import { KLogo } from './Logo/KLogo';
 import { KadenaLogo } from './Logo/KadenaLogo';
 import { useSideBar } from './SideBarProvider';
 
-interface IProps {
+interface IProps extends PropsWithChildren {
   logo?: ReactElement;
+  breadcrumbs?: ReactElement;
+  hasSidebar?: boolean;
 }
 
-export const SideBarHeader: FC<IProps> = ({ logo }) => {
+export const SideBarHeader: FC<IProps> = ({
+  logo,
+  breadcrumbs,
+  hasSidebar = true,
+}) => {
   const { isExpanded, handleToggleExpand } = useSideBar();
   const handleExpand = (e: PressEvent) => {
     if (handleToggleExpand) {
@@ -28,13 +34,14 @@ export const SideBarHeader: FC<IProps> = ({ logo }) => {
     }
   };
 
-  const ShowLogo = !isExpanded ? (
-    <KLogo height={40} />
-  ) : logo ? (
-    logo
-  ) : (
-    <KadenaLogo height={40} />
-  );
+  const ShowLogo =
+    !isExpanded && hasSidebar ? (
+      <KLogo height={40} />
+    ) : logo ? (
+      logo
+    ) : (
+      <KadenaLogo height={40} />
+    );
 
   return (
     <header className={headerWrapperClass}>
@@ -48,19 +55,21 @@ export const SideBarHeader: FC<IProps> = ({ logo }) => {
         <Stack style={{ gridArea: 'header-logo' }}>
           <>
             <Media lessThan="md">
-              <KLogo height={40} />
+              {hasSidebar ? <KLogo height={40} /> : <KadenaLogo height={40} />}
             </Media>
             <Media greaterThanOrEqual="md">{ShowLogo}</Media>
           </>
         </Stack>
-        <Stack className={classNames(menuMenuIconClass)}>
-          <Button
-            variant="transparent"
-            onPress={handleExpand}
-            startVisual={isExpanded ? <MonoMenuOpen /> : <MonoMenu />}
-          />
-        </Stack>
-        <Stack style={{ gridArea: 'header-crumbs' }}>breadcrumbs</Stack>
+        {hasSidebar && (
+          <Stack className={classNames(menuMenuIconClass)}>
+            <Button
+              variant="transparent"
+              onPress={handleExpand}
+              startVisual={isExpanded ? <MonoMenuOpen /> : <MonoMenu />}
+            />
+          </Stack>
+        )}
+        <Stack style={{ gridArea: 'header-crumbs' }}>{breadcrumbs}</Stack>
       </Stack>
     </header>
   );
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx
index 1d228fb48e..2e384a8367 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx
@@ -7,12 +7,20 @@ export interface IAppContextProps {
   label: string;
   onPress: () => void;
 }
+
+export interface ISideBarBreadCrumb {
+  label: string;
+  url: string;
+  visual?: React.ReactElement;
+}
 export interface ISideBarContext {
   isExpanded: boolean;
   handleToggleExpand: (e: PressEvent) => void;
   handleSetExpanded: (value: boolean) => void;
   appContext?: IAppContextProps;
   setAppContext: (context: IAppContextProps) => void;
+  breadCrumbs: ISideBarBreadCrumb[];
+  setBreadCrumbs: (value: ISideBarBreadCrumb[]) => void;
 }
 export const SideBarContext = createContext<ISideBarContext>({
   isExpanded: true,
@@ -20,6 +28,8 @@ export const SideBarContext = createContext<ISideBarContext>({
   handleSetExpanded: () => {},
   appContext: undefined,
   setAppContext: () => {},
+  setBreadCrumbs: () => {},
+  breadCrumbs: [],
 });
 export const useSideBar = (): ISideBarContext => useContext(SideBarContext);
 
@@ -30,6 +40,7 @@ export const SideBarProvider: FC<ISideBarProvider> = ({ children }) => {
   const [appContext, setAppContextState] = useState<
     IAppContextProps | undefined
   >();
+  const [breadCrumbs, setBreadCrumbsState] = useState<ISideBarBreadCrumb[]>([]);
 
   const handleToggleExpand = useCallback((e: PressEvent) => {
     setIsExpanded((v) => !v);
@@ -41,6 +52,11 @@ export const SideBarProvider: FC<ISideBarProvider> = ({ children }) => {
   const setAppContext = useCallback((context: IAppContextProps) => {
     setAppContextState(context);
   }, []);
+
+  const setBreadCrumbs = (value: ISideBarBreadCrumb[]) => {
+    setBreadCrumbsState(value);
+  };
+
   return (
     <SideBarContext.Provider
       value={{
@@ -49,6 +65,8 @@ export const SideBarProvider: FC<ISideBarProvider> = ({ children }) => {
         handleSetExpanded,
         appContext,
         setAppContext,
+        breadCrumbs,
+        setBreadCrumbs,
       }}
     >
       {children}
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts
index 00f02694b2..71b52f7eb0 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts
@@ -1,12 +1,9 @@
-export { SideBarAppContext } from './components/SideBarAppContext';
-export { SideBarContext } from './components/SideBarContext';
 export { SideBarFooter } from './components/SideBarFooter';
 export { SideBarFooterItem } from './components/SideBarFooterItem';
 export { SideBarItem } from './components/SideBarItem';
 export type { ISideBarItemProps } from './components/SideBarItem';
 export { SideBarItemsInline } from './components/SideBarItemsInline';
-export { SideBarNavigation } from './components/SideBarNavigation';
-export { useSideBar } from './components/SideBarProvider';
+export { SideBarProvider, useSideBar } from './components/SideBarProvider';
 export { SideBarTree } from './components/SideBarTree';
 export { SideBarTreeItem } from './components/SideBarTreeItem';
 export { SideBar } from './SideBar';
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
index ead19fac34..ad920656d4 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -6,6 +6,7 @@ import {
   style,
   token,
 } from './../../styles';
+import { minHeaderHeight } from './styles.css';
 
 export const menuWrapperClass = recipe({
   base: [
@@ -35,7 +36,7 @@ export const menuWrapperClass = recipe({
       },
       md: {
         display: 'flex',
-        width: '40px',
+        width: '45px',
         padding: token('spacing.md'),
         paddingBlockStart: '0',
         paddingInline: token('spacing.xs'),
@@ -161,14 +162,14 @@ export const headerWrapperClass = style([
     display: 'flex',
     position: 'absolute',
     width: '100%',
-    height: '60px',
+    height: minHeaderHeight,
     gridArea: 'sidebarlayout-header',
   },
 
   responsiveStyle({
     xs: {
       gridTemplateColumns: 'auto',
-      gridTemplateRows: '60px auto 60px',
+      gridTemplateRows: `${minHeaderHeight} auto 60px`,
       gridTemplateAreas: `
     "sidebarlayout-header"
     "sidebarlayout-main"
@@ -176,7 +177,7 @@ export const headerWrapperClass = style([
   `,
     },
     md: {
-      gridTemplateColumns: '50px auto 50px',
+      gridTemplateColumns: `50px auto 50px`,
       gridTemplateRows: 'auto',
       gridTemplateAreas: `
     "header-logo header-toggle header-crumbs"
@@ -191,7 +192,7 @@ export const headerClass = style([
 
   responsiveStyle({
     xs: {
-      gridTemplateColumns: '50px auto 50px',
+      gridTemplateColumns: `50px auto 50px`,
       gridTemplateAreas: `
     "header-logo header-crumbs header-toggle"
   `,
@@ -218,13 +219,11 @@ export const footerWrapperClass = style([
     justifyContent: 'space-around',
     paddingInline: 'md',
     paddingBlock: 'sm',
-    borderStyle: 'solid',
-    borderColor: 'base.subtle',
   }),
   {
     gridArea: 'sidebarlayout-footer',
-    borderWidth: 0,
-    borderBlockStartWidth: token('border.hairline'),
+
+    borderBlockStart: token('border.hairline'),
   },
   responsiveStyle({
     xs: {
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
index b81a6d3432..c4fc8a1e56 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
@@ -1,31 +1,50 @@
-import { atoms, responsiveStyle, style } from './../../styles';
+import { atoms, recipe, responsiveStyle, style } from './../../styles';
 
-export const layoutWrapperClass = style([
-  atoms({ width: '100%', display: 'grid', flex: 1 }),
-  {
-    minHeight: '100%',
-  },
+export const minHeaderHeight = '60px';
 
-  responsiveStyle({
-    xs: {
-      gridTemplateColumns: 'auto',
-      gridTemplateRows: '60px auto 60px',
-      gridTemplateAreas: `
-      "sidebarlayout-header"
-      "sidebarlayout-main"
-      "sidebarlayout-footer"
-    `,
+export const layoutWrapperClass = recipe({
+  base: [
+    atoms({ width: '100%', display: 'grid', flex: 1 }),
+    {
+      minHeight: '100%',
     },
-    md: {
-      gridTemplateColumns: '40px auto',
-      gridTemplateRows: '60px auto',
-      gridTemplateAreas: `
-      "sidebarlayout-header sidebarlayout-header"
-      "sidebarlayout-sidebar sidebarlayout-main"
-    `,
+  ],
+  variants: {
+    variant: {
+      full: [
+        style({
+          gridTemplateColumns: 'auto',
+          gridTemplateRows: `${minHeaderHeight} auto`,
+          gridTemplateAreas: `
+            "sidebarlayout-header"
+            "sidebarlayout-main"
+          `,
+        }),
+      ],
+      default: [
+        responsiveStyle({
+          xs: {
+            gridTemplateColumns: 'auto',
+            gridTemplateRows: `${minHeaderHeight} auto 60px`,
+            gridTemplateAreas: `
+            "sidebarlayout-header"
+            "sidebarlayout-main"
+            "sidebarlayout-footer"
+          `,
+          },
+          md: {
+            gridTemplateColumns: '45px auto',
+            gridTemplateRows: `${minHeaderHeight} auto`,
+            gridTemplateAreas: `
+            "sidebarlayout-header sidebarlayout-header"
+            "sidebarlayout-sidebar sidebarlayout-main"
+          `,
+          },
+        }),
+      ],
     },
-  }),
-]);
+  },
+});
 
 export const layoutExpandedWrapperClass = style([
   responsiveStyle({
@@ -34,3 +53,27 @@ export const layoutExpandedWrapperClass = style([
     },
   }),
 ]);
+
+export const mainClass = recipe({
+  base: {
+    gridArea: 'sidebarlayout-main',
+  },
+  variants: {
+    variant: {
+      default: [],
+      full: [
+        atoms({
+          width: '100%',
+          color: 'text.base.default',
+          display: 'flex',
+          alignItems: 'center',
+        }),
+        {
+          minHeight: `calc(100vh - ${minHeaderHeight})`,
+          background: 'transparent', // fallback in case radial-gradient is not working
+          backgroundRepeat: 'no-repeat',
+        },
+      ],
+    },
+  },
+});
diff --git a/packages/libs/kode-ui/src/patterns/index.ts b/packages/libs/kode-ui/src/patterns/index.ts
index 95f1b7138e..2f3197648b 100644
--- a/packages/libs/kode-ui/src/patterns/index.ts
+++ b/packages/libs/kode-ui/src/patterns/index.ts
@@ -19,14 +19,12 @@ export { usePagination } from './CompactTable/usePagination';
 
 export {
   SideBar,
-  SideBarAppContext,
-  SideBarContext,
   SideBarFooter,
   SideBarFooterItem,
   SideBarItem,
   SideBarItemsInline,
   SideBarLayout,
-  SideBarNavigation,
+  SideBarProvider,
   SideBarTree,
   SideBarTreeItem,
   useSideBar,