fix(devwallet): style sidemenu (#2643)

kadena-community · Nov 7, 2024 · f50a643 · f50a643
1 parent ebebe4d
commit f50a643
Show file tree

Hide file tree

Showing 13 changed files with 335 additions and 286 deletions.
diff --git a/.changeset/quick-beans-join.md b/.changeset/quick-beans-join.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -1,12 +1,16 @@
 import {
+  MonoApps,
+  MonoBackupTable,
   MonoContacts,
   MonoContrast,
-  MonoDashboardCustomize,
+  MonoDarkMode,
+  MonoKey,
+  MonoLightMode,
   MonoLogout,
   MonoNetworkCheck,
+  MonoSignature,
+  MonoSwapHoriz,
   MonoTableRows,
-  MonoWallet,
-  MonoWindow,
 } from '@kadena/kode-icons/system';
 
 import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
@@ -21,8 +25,6 @@ import {
 import {
   SideBarItem,
   SideBarItemsInline,
-  SideBarTree,
-  SideBarTreeItem,
   SideBar as SideBarUI,
   useLayout,
 } from '@kadena/kode-ui/patterns';
@@ -50,52 +52,60 @@ export const SideBar: FC = () => {
           <NetworkSelector
             showLabel={isExpanded}
             variant="outlined"
-            isCompact={!isExpanded}
+            isCompact
           />
         </SideBarItem>
       }
       navigation={
         <>
           <SideBarItem
-            visual={<MonoWindow />}
+            visual={<MonoApps />}
             label="Dashboard"
             component={Link}
             href="/"
           />
 
-          <SideBarTree visual={<MonoWallet />} label="My Wallets">
-            <SideBarTreeItem
-              label="Keys"
-              component={Link}
-              href="/key-management/keys"
-            />
-          </SideBarTree>
-          <SideBarTree visual={<MonoTableRows />} label="Transactions">
-            <SideBarTreeItem
-              label="History"
-              component={Link}
-              href="/transactions"
-            />
-          </SideBarTree>
-          <SideBarTree visual={<MonoDashboardCustomize />} label="Utilities">
-            <SideBarTreeItem
-              label="Sig Builder"
-              component={Link}
-              href="/sig-builder"
-            />
-            <SideBarTreeItem
-              label="Backup"
-              component={Link}
-              href="/backup-recovery-phrase/write-down"
-            />
-          </SideBarTree>
+          <SideBarItem
+            visual={<MonoSwapHoriz />}
+            label="Transfer"
+            component={Link}
+            href="/transfer"
+          />
+
+          <SideBarItem
+            visual={<MonoSignature />}
+            label="Sig Builder"
+            component={Link}
+            href="/sig-builder"
+          />
+
+          <SideBarItem
+            visual={<MonoTableRows />}
+            label="Transactions"
+            component={Link}
+            href="/transactions"
+          />
+
+          <SideBarItem
+            label="Key Management"
+            component={Link}
+            href="/key-management/keys"
+            visual={<MonoKey />}
+          />
 
           <SideBarItem
             visual={<MonoContacts />}
             label="Contacts"
             component={Link}
             href="/contacts"
           />
+
+          <SideBarItem
+            visual={<MonoBackupTable />}
+            label="Backup"
+            component={Link}
+            href="/backup-recovery-phrase/write-down"
+          />
         </>
       }
       context={
@@ -105,8 +115,8 @@ export const SideBar: FC = () => {
               <ContextMenu
                 trigger={
                   <Button
-                    isCompact={!isExpanded}
-                    variant="outlined"
+                    isCompact
+                    variant={isExpanded ? 'outlined' : 'transparent'}
                     endVisual={<MonoContacts />}
                   >
                     {isExpanded ? 'Profile' : undefined}
@@ -130,9 +140,11 @@ export const SideBar: FC = () => {
               label="Change theme"
             >
               <Button
-                variant={isExpanded ? 'transparent' : 'outlined'}
+                variant="transparent"
                 onPress={() => toggleTheme()}
-                startVisual={<MonoContrast />}
+                startVisual={
+                  theme === 'dark' ? <MonoDarkMode /> : <MonoLightMode />
+                }
                 isCompact={!isExpanded}
               />
             </SideBarItem>

diff --git a/packages/apps/dev-wallet/src/pages/home/home-page.tsx b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
@@ -42,10 +42,10 @@ export function HomePage() {
       <SideBarBreadcrumbs icon={<MonoDashboard />}>
         <SideBarBreadcrumbsItem href="/">Dashboard</SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
-      <Box gap={'lg'}>
+      <Box gap={'lg'} width="100%">
         <Text>Welcome back</Text>
-        <Heading as="h1">{profile?.name} </Heading>
-        <Stack gap={'lg'} flexDirection={'column'}>
+        <Heading as="h4">{profile?.name} </Heading>
+        <Stack gap={'lg'} flexDirection={'column'} width="100%">
           <AssetsCard />
           <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
             <Heading variant="h4">Wallet Activities</Heading>

diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -2,7 +2,7 @@ import type { FC, FunctionComponentElement } from 'react';
 import React from 'react';
 import type { AriaBreadcrumbsProps } from 'react-aria';
 import { useBreadcrumbs } from 'react-aria';
-import { Box } from '..';
+import { Box, Text } from '..';
 import { containerClass, navClass } from './Breadcrumbs.css';
 import type { IBreadcrumbItemProps } from './BreadcrumbsItem';
 
@@ -22,7 +22,11 @@ export const Breadcrumbs: FC<IBreadcrumbsProps> = ({
 
   return (
     <nav className={navClass} {...navProps}>
-      {icon && <Box marginInline="sm">{icon}</Box>}
+      {icon && (
+        <Box marginInline="sm">
+          <Text>{icon}</Text>
+        </Box>
+      )}
       <ol className={containerClass}>
         {React.Children.map(breadcrumbProps.children, (child, i) =>
           React.cloneElement(child as any, { isCurrent: i === childCount - 1 }),

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -103,15 +103,13 @@ const InnerLayout = () => {
                 <KLogo height={40} />
               </a>
             }
-            appContext={
-              <SideBarItem
-                visual={<MonoWifiTethering />}
-                label="Mainnet"
-                href="javascript:void()"
-              />
-            }
             navigation={
               <>
+                <SideBarItem
+                  visual={<MonoWifiTethering />}
+                  label="Mainnet"
+                  href="javascript:void()"
+                />
                 <SideBarTree visual={<MonoWallet />} label="My Wallet">
                   <SideBarTreeItem label="Accounts" href="https://kadena.io" />
                   <SideBarTreeItem

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx
@@ -1,10 +1,9 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
-import { listItemClass } from '../sidebar.css';
-import { Link } from './../../../components';
+import { listItemClass, sidebartreeItemClass } from '../sidebar.css';
+import { Anchor } from '../utils';
 import type { PressEvent } from './../../../components/Button';
-import { Button } from './../../../components/Button';
 import { Media } from './../../../components/Media';
 import { breakpoints } from './../../../styles';
 import { useLayout } from './LayoutProvider';
@@ -16,6 +15,7 @@ export interface ISideBarItemProps extends PropsWithChildren {
   isAppContext?: boolean;
   href?: string;
   component?: any;
+  tree?: ReactElement | boolean;
 }
 export const SideBarItem: FC<ISideBarItemProps> = ({
   visual,
@@ -24,6 +24,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
   children,
   href,
   component,
+  tree,
 }) => {
   const { isExpanded, handleSetExpanded, isActiveUrl } = useLayout();
   const isMediumDevice = useMedia(breakpoints.md, true);
@@ -42,86 +43,39 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
     handlePress(e as unknown as PressEvent);
   };
 
-  const renderChildren = () => {
+  const render = (isExpanded: boolean) => {
+    const LinkWrapper = component ? component : Anchor;
     return (
-      <>
-        <Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
-          {children}
-        </Media>
-        <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
-          {children}
-        </Media>
-      </>
-    );
-  };
-
-  const renderMobile = () => {
-    const Component = href ? Link : Button;
-    return (
-      <Component
+      <LinkWrapper
         onPress={handleLinkClick}
-        href={href}
-        variant={isActiveUrl(href) ? 'primary' : 'outlined'}
         aria-label={label}
         data-isactive={isActiveUrl(href)}
-        component={component}
-        startVisual={visual}
-      >
-        {label}
-      </Component>
-    );
-  };
-
-  const renderDeskTopNotExpanded = () => {
-    const Component = href ? Link : Button;
-    return (
-      <Component
-        onPress={handleLinkClick}
-        variant={isActiveUrl(href) ? 'primary' : 'outlined'}
-        aria-label={label}
-        data-isactive={isActiveUrl(href)}
-        component={component}
-        startVisual={visual}
-        href={href}
-      />
-    );
-  };
-
-  const renderDeskTopExpanded = () => {
-    const Component = href ? Link : Button;
-    return (
-      <Component
-        onPress={handleLinkClick}
-        aria-label={label}
-        data-isactive={isActiveUrl(href)}
-        startVisual={visual}
-        component={component}
-        variant={isActiveUrl(href) ? 'primary' : 'outlined'}
+        className={sidebartreeItemClass({
+          isActive: isActiveUrl(href),
+          isExpanded,
+        })}
         href={href}
+        to={href}
+        title={label}
       >
-        {label}
-      </Component>
+        {visual && <span>{visual}</span>}
+        {isExpanded && label}
+      </LinkWrapper>
     );
   };
 
+  if (children) return children;
+
   return (
     <li className={listItemClass}>
-      <>
-        {children ? (
-          renderChildren()
-        ) : (
-          <>
-            <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
-              {renderMobile()}
-            </Media>
-            <Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
-              {!isExpanded
-                ? renderDeskTopNotExpanded()
-                : renderDeskTopExpanded()}
-            </Media>
-          </>
-        )}
-      </>
+      <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
+        {render(true)}
+      </Media>
+      <Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
+        {render(isExpanded)}
+      </Media>
+
+      {tree}
     </li>
   );
 };