cleanup sidemenu

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

@@ -0,0 +1,88 @@
+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 {
+  MonoLightMode,
+  MonoWifiTethering,
+  MonoWindow,
+  MonoWorkspaces,
+} from '@kadena/kode-icons/system';
+
+import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
+import { Box, Stack, Themes, useTheme } from '@kadena/kode-ui';
+import {
+  SideBarFooter,
+  SideBarFooterItem,
+  SideBarLayout,
+} from '@kadena/kode-ui/patterns';
+import { FC } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { BetaHeader } from './../BetaHeader';
+import { SideBar } from './SideBar';
+
+export const Layout: FC = () => {
+  const { theme, setTheme } = useTheme();
+
+  const navigate = useNavigate();
+
+  const toggleTheme = (): void => {
+    const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
+    setTheme(newTheme);
+  };
+  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>
+      <MainHeader />
+      <main>
+        <Stack
+          className={pageClass}
+          style={
+            {
+              // backgroundImage: `radial-gradient(circle farthest-side at 50% 170%, ${accentColor}, transparent 75%)`,
+            }
+          }
+        >
+          <Sidebar></Sidebar>
+          <Box padding="n10" className={mainColumnStyle}>
+            <div className={backgroundStyle}></div>
+            <Outlet />
+          </Box>
+        </Stack>
+      </main>
+      <div id="modalportal"></div>
+    </>
+  );
+};

packages/apps/dev-wallet/src/App/Layout/SideBar.tsx

@@ -0,0 +1,163 @@
+import {
+  MonoContacts,
+  MonoContrast,
+  MonoDataThresholding,
+  MonoKey,
+  MonoLogout,
+  MonoNetworkCheck,
+  MonoSignature,
+  MonoSwapHoriz,
+  MonoTableRows,
+  MonoTerminal,
+  MonoTextSnippet,
+} from '@kadena/kode-icons/system';
+
+import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
+import { useWallet } from '@/modules/wallet/wallet.hook';
+import {
+  Button,
+  ContextMenu,
+  ContextMenuItem,
+  Themes,
+  useTheme,
+} from '@kadena/kode-ui';
+import {
+  SideBarAppContext,
+  SideBarContext,
+  SideBarItem,
+  SideBarItemsInline,
+  SideBarNavigation,
+  SideBar as SideBarUI,
+  useSideBar,
+} from '@kadena/kode-ui/patterns';
+import { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const SideBar: FC = () => {
+  const { theme, setTheme } = useTheme();
+  const { appContext, isExpanded } = useSideBar();
+  const navigate = useNavigate();
+  const { lockProfile } = useWallet();
+
+  const toggleTheme = (): void => {
+    const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
+    setTheme(newTheme);
+  };
+
+  const handleLogout = () => {
+    lockProfile();
+  };
+  return (
+    <SideBarUI>
+      <SideBarAppContext>
+        <SideBarItem
+          visual={<MonoNetworkCheck />}
+          label="Select network"
+          onPress={() => {}}
+        >
+          <NetworkSelector
+            showLabel={isExpanded}
+            variant="outlined"
+            isCompact={!isExpanded}
+          />
+        </SideBarItem>
+        {appContext && <SideBarItem {...appContext} />}
+      </SideBarAppContext>
+      <SideBarNavigation>
+        <SideBarItem
+          visual={<MonoDataThresholding />}
+          label="Dashboard"
+          onPress={() => navigate('/')}
+        />
+
+        <SideBarItem
+          visual={<MonoSignature />}
+          label="Sig Builder"
+          onPress={() => navigate('/sig-builder')}
+        />
+
+        <SideBarItem
+          visual={<MonoSwapHoriz />}
+          label="Transfer"
+          onPress={() => {
+            navigate('/transfer');
+          }}
+        />
+
+        <SideBarItem
+          visual={<MonoTableRows />}
+          label="Transactions"
+          onPress={() => navigate('/transactions')}
+        />
+
+        <SideBarItem
+          visual={<MonoContacts />}
+          label="Contacts"
+          onPress={() => navigate('/contacts')}
+        />
+
+        <SideBarItem
+          visual={<MonoTextSnippet />}
+          label="Backup"
+          onPress={() => navigate('/backup-recovery-phrase/write-down')}
+        />
+
+        <SideBarItem
+          visual={<MonoKey />}
+          label="Keys"
+          onPress={() => navigate('/key-management/keys')}
+        />
+
+        <SideBarItem
+          visual={<MonoTerminal />}
+          label="Dev Console"
+          onPress={() => navigate('/terminal')}
+        />
+      </SideBarNavigation>
+
+      <SideBarContext>
+        <SideBarItemsInline>
+          <SideBarItem
+            visual={<MonoContacts />}
+            label="Profile"
+            onPress={() => {}}
+          >
+            <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}
+            />
+          </SideBarItem>
+        </SideBarItemsInline>
+      </SideBarContext>
+    </SideBarUI>
+  );
+};