fix the expanding

kadena-community · Nov 27, 2024 · d2273b8 · d2273b8
1 parent cfffd17
commit d2273b8
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 38 deletions.
diff --git 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={<AssetSwitch />}
+      appContext={
+        <SideBarItem visual={<MonoNetworkCheck />} label="Select Asset">
+          <AssetSwitch showLabel={isExpanded} />
+        </SideBarItem>
+      }
       context={
         <>
           <SideBarItemsInline>
-            <ContextMenu
-              trigger={<Button variant="outlined">{account?.alias}</Button>}
+            <SideBarItem
+              label=""
+              visual={<MonoAccountBox />}
+              onPress={handleLogout}
             >
-              <ContextMenuItem
-                endVisual={<MonoLogout />}
-                label="Logout"
-                onClick={handleLogout}
-              />
-            </ContextMenu>
+              <ContextMenu
+                trigger={
+                  <Button variant="outlined">
+                    {isExpanded ? account?.alias : <MonoAccountBox />}
+                  </Button>
+                }
+              >
+                <ContextMenuItem
+                  endVisual={<MonoLogout />}
+                  label="Logout"
+                  onClick={handleLogout}
+                />
+              </ContextMenu>
+            </SideBarItem>
             <SideBarItem
               visual={theme === 'dark' ? <MonoDarkMode /> : <MonoLightMode />}
               onPress={toggleTheme}

diff --git 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 = ({
       >
         <Stack width="100%" flexDirection="column" gap="sm">
           <AssetInfo />
-
           {children}
         </Stack>
       </SideBarLayout>

diff --git 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 = () => {
       <ContextMenu
         trigger={
           <Button isCompact variant="outlined">
-            {asset ? asset.name : 'Select an asset'}
+            {showLabel ? (
+              asset ? (
+                asset.name
+              ) : (
+                'Select an asset'
+              )
+            ) : (
+              <MonoWorkspaces />
+            )}
           </Button>
         }
       >

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -258,6 +258,7 @@ export const listNotExpandedClass = style([
 export const headerWrapperClass = recipe({
   base: [
     {
+      maxWidth: '2140px',
       position: 'fixed',
       backgroundColor: token('color.background.base.default'),
       width: '100%',
@@ -270,26 +271,22 @@ export const headerWrapperClass = recipe({
   ],
   variants: {
     sideBarExpanded: {
-      true: {
-        ...responsiveStyle({
-          xs: {
-            paddingInlineStart: token('spacing.md'),
-          },
-          md: {
-            paddingInlineStart: sideBarWidth,
-          },
-        }),
-      },
-      false: {
-        ...responsiveStyle({
-          xs: {
-            paddingInlineStart: token('spacing.md'),
-          },
-          md: {
-            paddingInlineStart: sideBarMinWidth,
-          },
-        }),
-      },
+      true: responsiveStyle({
+        xs: {
+          paddingInlineStart: token('spacing.md'),
+        },
+        md: {
+          paddingInlineStart: sideBarWidth,
+        },
+      }),
+      false: responsiveStyle({
+        xs: {
+          paddingInlineStart: token('spacing.md'),
+        },
+        md: {
+          paddingInlineStart: sideBarMinWidth,
+        },
+      }),
     },
   },
 });
@@ -310,8 +307,8 @@ export const headerClass = style([
       gridTemplateColumns: '1fr 100px',
       gridTemplateRows: '1fr',
       gridTemplateAreas: `
-    "header-crumbs header-rightside"
-  `,
+        "header-crumbs header-rightside"
+      `,
     },
   }),
 ]);

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
@@ -4,6 +4,7 @@ export const minHeaderHeight = '60px';
 export const sideBarWidth = '232px';
 export const sideBarMinWidth = '45px';
 export const rightAsBarMinWidth = '370px';
+export const mainFullWidth = '96rem';
 
 export const layoutWrapperClass = recipe({
   base: [
@@ -50,7 +51,7 @@ export const layoutWrapperClass = recipe({
             gridTemplateColumns: `${sideBarMinWidth} auto`,
           },
           xxl: {
-            gridTemplateColumns: `${sideBarMinWidth} 1fr`,
+            gridTemplateColumns: `${sideBarMinWidth} minmax(auto calc(${mainFullWidth} + ${sideBarWidth} - ${sideBarMinWidth} + ${rightAsBarMinWidth}))`,
           },
         }),
       ],
@@ -66,7 +67,7 @@ export const layoutWrapperClass = recipe({
             gridTemplateColumns: `${sideBarWidth} auto`,
           },
           xxl: {
-            gridTemplateColumns: `${sideBarWidth} minmax(auto, calc(96rem + 377px))`,
+            gridTemplateColumns: `${sideBarWidth} minmax(auto, calc(${mainFullWidth} + ${rightAsBarMinWidth}))`,
           },
         }),
       ],
@@ -79,6 +80,9 @@ export const layoutWrapperClass = recipe({
       },
       style: [
         responsiveStyle({
+          md: {
+            gridTemplateColumns: `${sideBarMinWidth} auto`,
+          },
           xxl: {
             gridTemplateColumns: `${sideBarMinWidth} auto calc(${rightAsBarMinWidth} + 20px)`,
           },
@@ -97,7 +101,7 @@ export const layoutWrapperClass = recipe({
             gridTemplateColumns: `${sideBarWidth} auto`,
           },
           xxl: {
-            gridTemplateColumns: `${sideBarWidth} minmax(auto, calc(96rem + 377px)) calc(${rightAsBarMinWidth} + 20px)`,
+            gridTemplateColumns: `${sideBarWidth} minmax(auto, calc(${mainFullWidth} + ${sideBarWidth})) calc(${rightAsBarMinWidth} + 20px)`,
           },
         }),
       ],
@@ -117,6 +121,7 @@ export const layoutWrapperClass = recipe({
 
 export const bodyWrapperClass = style({
   minHeight: '100dvh',
+
   backgroundColor: token('color.background.base.default'),
   overflowX: 'hidden',
 });