start new layout devwallet

packages/apps/dev-wallet/src/App/app.tsx

@@ -3,7 +3,6 @@ import { WalletProvider } from '@/modules/wallet/wallet.provider';
 import { MediaContextProvider } from '@kadena/kode-ui';
 import { useEffect } from 'react';
 import { PromptProvider } from '../Components/PromptProvider/Prompt';
-import { BetaHeader } from './BetaHeader';
 import { Routes } from './routes';
 import { SessionProvider } from './session';
 
@@ -31,7 +30,6 @@ function Providers({ children }: { children: React.ReactNode }) {
 
 export const App = () => (
   <Providers>
-    <BetaHeader />
     <Routes />
   </Providers>
 );

packages/apps/dev-wallet/src/App/layout.tsx

@@ -2,14 +2,121 @@ import { backgroundStyle, mainColumnStyle } from '@/App/layout.css.ts';
 import { MainHeader } from '@/Components/MainHeader/MainHeader';
 import { Sidebar } from '@/Components/Sidebar/Sidebar.tsx';
 import { pageClass } from '@/pages/home/style.css.ts';
+import {
+  MonoContacts,
+  MonoContrast,
+  MonoDataThresholding,
+  MonoKey,
+  MonoNetworkCheck,
+  MonoSignature,
+  MonoSwapHoriz,
+  MonoTableRows,
+  MonoTerminal,
+  MonoTextSnippet,
+} from '@kadena/kode-icons/system';
 
-import { Box, Stack } from '@kadena/kode-ui';
+import { Box, Button, Link, Stack, Themes, useTheme } from '@kadena/kode-ui';
+import {
+  SideBar,
+  SideBarContext,
+  SideBarItem,
+  SideBarItemsInline,
+  SideBarLayout,
+  SideBarNavigation,
+} from '@kadena/kode-ui/patterns';
 import { FC } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, Link as RouterLink } from 'react-router-dom';
+import { BetaHeader } from './BetaHeader';
 
 export const Layout: FC = () => {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = (): void => {
+    const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
+    setTheme(newTheme);
+  };
   return (
     <>
+      <SideBarLayout topBanner={<BetaHeader />}>
+        <SideBar>
+          <SideBarNavigation>
+            <SideBarItem visual={<MonoDataThresholding />}>
+              <RouterLink to="/">
+                <Link startVisual={<MonoDataThresholding />} variant="outlined">
+                  Dashboard
+                </Link>
+              </RouterLink>
+            </SideBarItem>
+
+            <SideBarItem visual={<MonoSignature />}>
+              <RouterLink to="/sig-builder">
+                <Link startVisual={<MonoSignature />}>Sig Builder</Link>
+              </RouterLink>
+            </SideBarItem>
+
+            <SideBarItem visual={<MonoSwapHoriz />}>
+              <RouterLink to="/transfer">
+                <Link startVisual={<MonoSwapHoriz />}>Transfer</Link>
+              </RouterLink>
+            </SideBarItem>
+            <SideBarItem visual={<MonoTableRows />}>
+              <RouterLink to="/transactions">
+                <Link startVisual={<MonoTableRows />}>Transactions</Link>
+              </RouterLink>
+            </SideBarItem>
+            <SideBarItem visual={<MonoContacts />}>
+              <RouterLink to="/contacts">
+                <Link startVisual={<MonoContacts />}>Contacts</Link>
+              </RouterLink>
+            </SideBarItem>
+
+            <SideBarItem visual={<MonoNetworkCheck />}>
+              <RouterLink to="/networks">
+                <Link startVisual={<MonoNetworkCheck />}>Networks</Link>
+              </RouterLink>
+            </SideBarItem>
+            <SideBarItem visual={<MonoTextSnippet />}>
+              <RouterLink to="/backup-recovery-phrase/write-down">
+                <Link startVisual={<MonoTextSnippet />}>Backup</Link>
+              </RouterLink>
+            </SideBarItem>
+            <SideBarItem visual={<MonoKey />}>
+              <RouterLink to="/key-management/keys">
+                <Link startVisual={<MonoKey />}>Keys</Link>
+              </RouterLink>
+            </SideBarItem>
+            <SideBarItem visual={<MonoTerminal />}>
+              <RouterLink to="/terminal">
+                <Link startVisual={<MonoTerminal />}>Dev Console</Link>
+              </RouterLink>
+            </SideBarItem>
+          </SideBarNavigation>
+
+          <SideBarContext>
+            <SideBarItemsInline>
+              <SideBarItem visual={<MonoTerminal />}>
+                <Button
+                  onPress={() => toggleTheme()}
+                  endVisual={<MonoContacts />}
+                >
+                  Profile
+                </Button>
+              </SideBarItem>
+              <SideBarItem visual={<MonoTerminal />}>
+                <Button
+                  onPress={() => toggleTheme()}
+                  startVisual={<MonoContrast />}
+                />
+              </SideBarItem>
+            </SideBarItemsInline>
+          </SideBarContext>
+        </SideBar>
+        <main
+          style={{ gridArea: 'sidebarlayout-main', backgroundColor: 'green' }}
+        >
+          <Outlet />
+        </main>
+      </SideBarLayout>
       <MainHeader />
       <main>
         <Stack

packages/libs/kode-ui/src/patterns/SideBarLayout/InnerLayout.tsx

@@ -1,23 +1,33 @@
 import classNames from 'classnames';
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren, ReactElement } 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 {}
-export const Innerlayout: FC<ISideBarLayout> = ({ children }) => {
+export interface ISideBarLayout extends PropsWithChildren {
+  topBanner?: ReactElement;
+}
+export const Innerlayout: FC<ISideBarLayout> = ({ children, topBanner }) => {
   const { isExpanded } = useSideBar();
 
   return (
     <Stack
-      className={classNames(layoutWrapperClass, {
-        [layoutExpandedWrapperClass]: isExpanded,
-      })}
+      width="100%"
+      flexDirection="column"
+      position="relative"
+      style={{ minHeight: '100dvh' }}
     >
-      <SideBarHeader />
-      {children}
+      {topBanner}
+      <Stack
+        className={classNames(layoutWrapperClass, {
+          [layoutExpandedWrapperClass]: isExpanded,
+        })}
+      >
+        <SideBarHeader />
+        {children}
+      </Stack>
     </Stack>
   );
 };

packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx

@@ -7,7 +7,7 @@ import {
   MonoLightMode,
   MonoWifiTethering,
 } from '@kadena/kode-icons/system';
-import { Button, MediaContextProvider } from './../../components';
+import { Button } from './../../components';
 import { SideBarAppContext } from './components/SideBarAppContext';
 import { SideBarContext } from './components/SideBarContext';
 import { SideBarFooter } from './components/SideBarFooter';
@@ -48,62 +48,83 @@ export const Primary: IStory = {
   args: {},
   render: () => {
     return (
-      <MediaContextProvider>
-        <SideBarLayout>
-          <SideBar>
-            <SideBarAppContext>
-              <SideBarItem visual={<MonoWifiTethering />}>
-                <Button variant="outlined" startVisual={<MonoWifiTethering />}>
-                  Mainnet
+      <SideBarLayout
+        topBanner={
+          <div>
+            sdsf
+            <p />
+            test
+          </div>
+        }
+      >
+        <SideBar>
+          <SideBarAppContext>
+            <SideBarItem visual={<MonoWifiTethering />}>
+              <Button variant="outlined" startVisual={<MonoWifiTethering />}>
+                Mainnet
+              </Button>
+            </SideBarItem>
+            <SideBarItem visual={<MonoControlPointDuplicate />}>
+              <Button
+                variant="outlined"
+                startVisual={<MonoControlPointDuplicate />}
+              >
+                New Transfer
+              </Button>
+            </SideBarItem>
+          </SideBarAppContext>
+          <SideBarNavigation>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+            <SideBarItem>Dashboard</SideBarItem>
+          </SideBarNavigation>
+          <SideBarContext>
+            <SideBarItem visual={<MonoControlPointDuplicate />}>
+              <Button
+                variant="outlined"
+                startVisual={<MonoControlPointDuplicate />}
+              >
+                New Transfer
+              </Button>
+            </SideBarItem>
+
+            <SideBarItemsInline>
+              <SideBarItem visual={<MonoAccountTree />}>
+                <Button variant="outlined" startVisual={<MonoAccountTree />}>
+                  Profile
                 </Button>
               </SideBarItem>
-              <SideBarItem visual={<MonoControlPointDuplicate />}>
-                <Button
-                  variant="outlined"
-                  startVisual={<MonoControlPointDuplicate />}
-                >
-                  New Transfer
-                </Button>
+              <SideBarItem visual={<MonoLightMode />}>
+                <Button variant="transparent" startVisual={<MonoLightMode />} />
               </SideBarItem>
-            </SideBarAppContext>
-            <SideBarNavigation>
-              <SideBarItem>Dashboard</SideBarItem>
-            </SideBarNavigation>
-            <SideBarContext>
-              <SideBarItem visual={<MonoControlPointDuplicate />}>
-                <Button
-                  variant="outlined"
-                  startVisual={<MonoControlPointDuplicate />}
-                >
-                  New Transfer
-                </Button>
-              </SideBarItem>
-
-              <SideBarItemsInline>
-                <SideBarItem visual={<MonoAccountTree />}>
-                  <Button variant="outlined" startVisual={<MonoAccountTree />}>
-                    ProfileX
-                  </Button>
-                </SideBarItem>
-                <SideBarItem visual={<MonoLightMode />}>
-                  <Button
-                    variant="transparent"
-                    startVisual={<MonoLightMode />}
-                  />
-                </SideBarItem>
-              </SideBarItemsInline>
-            </SideBarContext>
-          </SideBar>
+            </SideBarItemsInline>
+          </SideBarContext>
+        </SideBar>
 
-          <main
-            style={{ gridArea: 'sidebarlayout-main', backgroundColor: 'green' }}
-          >
-            content
-          </main>
+        <main
+          style={{ gridArea: 'sidebarlayout-main', backgroundColor: 'green' }}
+        >
+          content
+        </main>
 
-          <SideBarFooter>sdf</SideBarFooter>
-        </SideBarLayout>
-      </MediaContextProvider>
+        <SideBarFooter>sdf</SideBarFooter>
+      </SideBarLayout>
     );
   },
 };

packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx

@@ -1,13 +1,18 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
+import { MediaContextProvider } from './../../components';
 import { Innerlayout } from './InnerLayout';
 import { SideBarProvider } from './components/SideBarProvider';
 
-export interface ISideBarLayout extends PropsWithChildren {}
-export const SideBarLayout: FC<ISideBarLayout> = ({ children }) => {
+export interface ISideBarLayout extends PropsWithChildren {
+  topBanner?: ReactElement;
+}
+export const SideBarLayout: FC<ISideBarLayout> = ({ children, topBanner }) => {
   return (
-    <SideBarProvider>
-      <Innerlayout>{children}</Innerlayout>
-    </SideBarProvider>
+    <MediaContextProvider>
+      <SideBarProvider>
+        <Innerlayout topBanner={topBanner}>{children}</Innerlayout>
+      </SideBarProvider>
+    </MediaContextProvider>
   );
 };

packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarFooter.tsx

@@ -7,10 +7,10 @@ interface IProps extends PropsWithChildren {}
 
 export const SideBarFooter: FC<IProps> = ({ children }) => {
   return (
-    <header className={footerWrapperClass}>
+    <footer className={footerWrapperClass}>
       <Stack width="100%" justifyContent="space-between" alignItems="center">
         {children}
       </Stack>
-    </header>
+    </footer>
   );
 };

packages/libs/kode-ui/src/patterns/SideBarLayout/index.ts

@@ -4,6 +4,7 @@ export { SideBarFooter } from './components/SideBarFooter';
 export { SideBarItem } from './components/SideBarItem';
 export type { ISideBarItem } from './components/SideBarItem';
 export { SideBarItemsInline } from './components/SideBarItemsInline';
+export { SideBarNavigation } from './components/SideBarNavigation';
 export { useSideBar } from './components/SideBarProvider';
 export { SideBar } from './SideBar';
 export type { ISideBar } from './SideBar';