style sidemenu

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

Hide file tree

Showing 12 changed files with 298 additions and 274 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,14 @@
 import {
+  MonoApps,
+  MonoBackupTable,
   MonoContacts,
   MonoContrast,
-  MonoDashboardCustomize,
+  MonoKey,
   MonoLogout,
   MonoNetworkCheck,
+  MonoSignature,
+  MonoSwapHoriz,
   MonoTableRows,
-  MonoWallet,
-  MonoWindow,
 } from '@kadena/kode-icons/system';
 
 import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector';
@@ -57,45 +59,53 @@ export const SideBar: FC = () => {
       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={

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/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>
   );
 };
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTree.tsx
@@ -1,15 +1,12 @@
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { listItemClass } from '../sidebar.css';
-import type { PressEvent } from './../../../components/Button';
-import { Link } from './../../../components/Link';
-import { Media } from './../../../components/Media';
+import { Stack } from './../../../components';
 import { breakpoints } from './../../../styles';
 import { useLayout } from './LayoutProvider';
 import type { ISideBarItemProps } from './SideBarItem';
+import { SideBarItem } from './SideBarItem';
 import { sidebartreeListClass } from './sidebartree.css';
-import { SideBarTreeWrapper } from './SideBarTreeWrapper';
 
 const LOCALSTORAGEKEY = 'sidemenu';
 
@@ -28,8 +25,6 @@ export const SideBarTree: FC<ISideBarTreeProps> = ({
   visual,
   label,
   children,
-  href,
-  component,
 }) => {
   const { isExpanded, handleSetExpanded } = useLayout();
 
@@ -48,65 +43,32 @@ export const SideBarTree: FC<ISideBarTreeProps> = ({
       setIsMounted(true);
       return;
     }
-    if (!isExpanded) setTreeIsExpanded(false);
+    if (!isExpanded) {
+      setTreeIsExpanded(false);
+    } else {
+      setTreeIsExpanded(getLocalStorageToggle(label));
+    }
   }, [isExpanded]);
 
-  const toggleTree = (e: PressEvent) => {
+  const toggleTree = () => {
     if (!isExpanded) handleSetExpanded(true);
 
     const innerExpanded = !treeisExpaned;
     setLocalStorageToggle(label, innerExpanded);
     setTreeIsExpanded(innerExpanded);
   };
 
-  const Component = href ? Link : SideBarTreeWrapper;
-
   return (
-    <li className={listItemClass}>
-      <>
-        <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
-          <Component
-            href={href}
-            component={component}
-            variant="transparent"
-            aria-label={label}
-            onPress={toggleTree}
-            isCompact
-            startVisual={visual}
-          >
-            {label}
-          </Component>
-        </Media>
-        <Media greaterThanOrEqual="md" style={{ flex: 1, display: 'flex' }}>
-          {!isExpanded ? (
-            <Component
-              href={href}
-              component={component}
-              variant="transparent"
-              aria-label={label}
-              onPress={toggleTree}
-              isCompact
-              startVisual={visual}
-            />
-          ) : (
-            <Component
-              href={href}
-              component={component}
-              aria-label={label}
-              onPress={toggleTree}
-              startVisual={visual}
-              isCompact
-              variant="transparent"
-            >
-              {label}
-            </Component>
-          )}
-        </Media>
-
-        {children && isExpanded && treeisExpaned && (
-          <ul className={sidebartreeListClass}>{children}</ul>
-        )}
-      </>
-    </li>
+    <Stack onClick={toggleTree}>
+      <SideBarItem
+        visual={visual}
+        label={label}
+        tree={
+          !!(children && isExpanded && treeisExpaned) && (
+            <ul className={sidebartreeListClass}>{children}</ul>
+          )
+        }
+      ></SideBarItem>
+    </Stack>
   );
 };
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx
@@ -42,6 +42,7 @@ export const SideBarTreeItem: FC<ISideBarTreeItemProps> = ({
   const { handleSetExpanded, isActiveUrl } = useLayout();
   const isMediumDevice = useMedia(breakpoints.md, true);
   const handlePress: MouseEventHandler<HTMLLIElement> = (e) => {
+    console.log(22222, isMediumDevice);
     if (!isMediumDevice) {
       handleSetExpanded(false);
     }