From f35e30c964ae4377e676b3f8d361fd43c17012c2 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 28 Nov 2024 09:06:21 +0100 Subject: [PATCH] chore(rwa): fix the sidebar layout (#2698) --- .changeset/four-jokes-check.md | 5 + .../apps/rwa-demo/src/app/(app)/SideBar.tsx | 36 +++- .../apps/rwa-demo/src/app/(app)/layout.tsx | 1 - .../src/components/AgentsList/AgentsList.tsx | 105 ++++++++---- .../components/AssetSwitch/AssetSwitch.tsx | 16 +- .../src/components/HomePage/OwnerRootPage.tsx | 27 +-- .../src/patterns/SectionCard/style.css.ts | 1 + .../patterns/SideBarLayout/SideBarLayout.tsx | 18 +- .../src/patterns/SideBarLayout/aside.css.ts | 15 +- .../src/patterns/SideBarLayout/sidebar.css.ts | 41 +++-- .../src/patterns/SideBarLayout/styles.css.ts | 157 ++++++++++-------- 11 files changed, 246 insertions(+), 176 deletions(-) create mode 100644 .changeset/four-jokes-check.md diff --git a/.changeset/four-jokes-check.md b/.changeset/four-jokes-check.md new file mode 100644 index 0000000000..f515a2043f --- /dev/null +++ b/.changeset/four-jokes-check.md @@ -0,0 +1,5 @@ +--- +'@kadena/kode-ui': patch +--- + +fix in the sidebar header layout diff --git a/packages/apps/rwa-demo/src/app/(app)/SideBar.tsx b/packages/apps/rwa-demo/src/app/(app)/SideBar.tsx index 70fdb0ecd2..422b3c46d0 100644 --- a/packages/apps/rwa-demo/src/app/(app)/SideBar.tsx +++ b/packages/apps/rwa-demo/src/app/(app)/SideBar.tsx @@ -1,10 +1,12 @@ import { AssetSwitch } from '@/components/AssetSwitch/AssetSwitch'; import { useAccount } from '@/hooks/account'; import { + MonoAccountBox, MonoApps, MonoDarkMode, MonoLightMode, MonoLogout, + MonoNetworkCheck, } from '@kadena/kode-icons'; import { Button, @@ -17,6 +19,7 @@ import { SideBarItem, SideBarItemsInline, SideBar as SideBarLayout, + useLayout, } from '@kadena/kode-ui/patterns'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; @@ -26,6 +29,7 @@ import { KLogo } from './KLogo'; export const SideBar: FC = () => { const { theme, setTheme } = useTheme(); + const { isExpanded } = useLayout(); const { logout, account, isMounted } = useAccount(); const router = useRouter(); @@ -65,19 +69,33 @@ export const SideBar: FC = () => { /> } - appContext={} + appContext={ + } label="Select Asset"> + + + } context={ <> - {account?.alias}} + } + onPress={handleLogout} > - } - label="Logout" - onClick={handleLogout} - /> - + + {isExpanded ? account?.alias : } + + } + > + } + label="Logout" + onClick={handleLogout} + /> + + : } onPress={toggleTheme} diff --git a/packages/apps/rwa-demo/src/app/(app)/layout.tsx b/packages/apps/rwa-demo/src/app/(app)/layout.tsx index 0b4c6fb377..4b44513c56 100644 --- a/packages/apps/rwa-demo/src/app/(app)/layout.tsx +++ b/packages/apps/rwa-demo/src/app/(app)/layout.tsx @@ -99,7 +99,6 @@ const RootLayout = ({ > - {children} diff --git a/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx b/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx index 6bc1b60d04..5fec342c79 100644 --- a/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx +++ b/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx @@ -1,24 +1,40 @@ import { useAccount } from '@/hooks/account'; +import { useAsset } from '@/hooks/asset'; import { useGetAgents } from '@/hooks/getAgents'; import { useTransactions } from '@/hooks/transactions'; import { removeAgent } from '@/services/removeAgent'; import { getClient } from '@/utils/client'; -import { MonoDelete } from '@kadena/kode-icons'; -import { Button, Heading } from '@kadena/kode-ui'; +import { MonoDelete, MonoSupportAgent } from '@kadena/kode-icons'; +import { Button } from '@kadena/kode-ui'; import { CompactTable, CompactTableFormatters, + SectionCard, + SectionCardBody, + SectionCardContentBlock, + SectionCardHeader, + useLayout, useNotifications, } from '@kadena/kode-ui/patterns'; import type { FC } from 'react'; +import { useState } from 'react'; +import { AddAgentForm } from '../AddAgentForm/AddAgentForm'; import { Confirmation } from '../Confirmation/Confirmation'; import { interpretErrorMessage } from '../TransactionsProvider/TransactionsProvider'; export const AgentsList: FC = () => { + const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout(); + const { paused } = useAsset(); const { data } = useGetAgents(); const { account, sign } = useAccount(); const { addTransaction } = useTransactions(); const { addNotification } = useNotifications(); + const [hasOpenAgentForm, setHasOpenAgentForm] = useState(false); + + const handleAddAgent = () => { + setIsRightAsideExpanded(true); + setHasOpenAgentForm(true); + }; const handleDelete = async (accountName: any) => { try { @@ -48,35 +64,62 @@ export const AgentsList: FC = () => { return ( <> - Agents - } />} - > - Are you sure you want to delete this agent? - - ), - }), - }, - ]} - data={data} - /> + {isRightAsideExpanded && hasOpenAgentForm && ( + { + setIsRightAsideExpanded(false); + setHasOpenAgentForm(false); + }} + /> + )} + + + All the agents for this contract} + actions={ + + } + /> + + } />} + > + Are you sure you want to delete this agent? + + ), + }), + }, + ]} + data={data} + /> + + + ); }; diff --git a/packages/apps/rwa-demo/src/components/AssetSwitch/AssetSwitch.tsx b/packages/apps/rwa-demo/src/components/AssetSwitch/AssetSwitch.tsx index 435825a581..c5bfde4446 100644 --- a/packages/apps/rwa-demo/src/components/AssetSwitch/AssetSwitch.tsx +++ b/packages/apps/rwa-demo/src/components/AssetSwitch/AssetSwitch.tsx @@ -1,5 +1,5 @@ import { useAsset } from '@/hooks/asset'; -import { MonoSettings } from '@kadena/kode-icons'; +import { MonoSettings, MonoWorkspaces } from '@kadena/kode-icons'; import { Button, ContextMenu, @@ -16,7 +16,9 @@ import type { FC } from 'react'; import { useState } from 'react'; import { AssetForm } from './AssetForm'; -export const AssetSwitch: FC = () => { +export const AssetSwitch: FC<{ showLabel?: boolean }> = ({ + showLabel = true, +}) => { const { assets, asset, setAsset } = useAsset(); const [openSide, setOpenSide] = useState(false); const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout(); @@ -43,7 +45,15 @@ export const AssetSwitch: FC = () => { - {asset ? asset.name : 'Select an asset'} + {showLabel ? ( + asset ? ( + asset.name + ) : ( + 'Select an asset' + ) + ) : ( + + )} } > diff --git a/packages/apps/rwa-demo/src/components/HomePage/OwnerRootPage.tsx b/packages/apps/rwa-demo/src/components/HomePage/OwnerRootPage.tsx index c9d7e0769b..a7541ef63f 100644 --- a/packages/apps/rwa-demo/src/components/HomePage/OwnerRootPage.tsx +++ b/packages/apps/rwa-demo/src/components/HomePage/OwnerRootPage.tsx @@ -1,5 +1,4 @@ 'use client'; -import { AddAgentForm } from '@/components/AddAgentForm/AddAgentForm'; import { AgentsList } from '@/components/AgentsList/AgentsList'; import { SetComplianceForm } from '@/components/SetComplianceForm/SetComplianceForm'; import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs'; @@ -12,19 +11,11 @@ import { useState } from 'react'; export const OwnerRootPage = () => { const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout(); const { paused } = useAsset(); - const [hasOpenAgentForm, setHasOpenAgentForm] = useState(false); const [hasOpenComplianceForm, setHasOpenComplianceForm] = useState(false); - const handleAddAgent = () => { - setIsRightAsideExpanded(true); - setHasOpenAgentForm(true); - setHasOpenComplianceForm(false); - }; - const handleComplianceForm = () => { setIsRightAsideExpanded(true); setHasOpenComplianceForm(true); - setHasOpenAgentForm(false); }; return ( @@ -35,28 +26,12 @@ export const OwnerRootPage = () => { { setIsRightAsideExpanded(false); - setHasOpenAgentForm(false); - }} - /> - )} - {isRightAsideExpanded && hasOpenAgentForm && ( - { - setIsRightAsideExpanded(false); - setHasOpenAgentForm(false); + setHasOpenComplianceForm(false); }} /> )} - -