add full layout

kadena-community · Oct 29, 2024 · d71d818 · d71d818
1 parent 98a51f8
commit d71d818
Show file tree

Hide file tree

Showing 16 changed files with 423 additions and 322 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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