wide style layout

kadena-community · Nov 7, 2024 · 67cc112 · 67cc112
1 parent e56bff9
commit 67cc112
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 72 deletions.
diff --git a/.changeset/lazy-gorillas-raise.md b/.changeset/lazy-gorillas-raise.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx b/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx
@@ -5,6 +5,7 @@ import { MonoKey } from '@kadena/kode-icons/system';
 import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
 import { useLayout } from '@kadena/kode-ui/patterns';
 import { CreateKeySetForm } from './CreateKeySetForm';
+import { ellipsisClass } from './style.css';
 
 export function KeySets() {
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();

diff --git a/packages/apps/dev-wallet/src/pages/keys/Components/style.css.ts b/packages/apps/dev-wallet/src/pages/keys/Components/style.css.ts
@@ -10,3 +10,9 @@ export const keyColumnClass = style({
   flex: 1,
   paddingInlineStart: tokens.kda.foundation.spacing.xxxl,
 });
+
+export const ellipsisClass = style({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
diff --git a/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx b/packages/apps/dev-wallet/src/pages/keys/keys-page.tsx
@@ -17,7 +17,7 @@ export function KeysPage() {
           Manage Your Keys
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
-      <Stack flexDirection={'column'} gap={'lg'}>
+      <Stack flexDirection={'column'} gap={'lg'} width="100%">
         <Heading>Manage Your Keys</Heading>
         <Tabs defaultSelectedKey={tab}>
           <TabItem

diff --git a/packages/libs/kode-ui/src/components/Typography/Text/Text.tsx b/packages/libs/kode-ui/src/components/Typography/Text/Text.tsx
@@ -16,6 +16,7 @@ export interface ITextProps {
   transform?: keyof typeof transformVariants;
   variant?: 'body' | 'code' | 'ui';
   ariaLabel?: HTMLAttributes<HTMLSpanElement>['aria-label'];
+  style?: HTMLAttributes<HTMLSpanElement>['style'];
   id?: HTMLAttributes<HTMLSpanElement>['id'];
 }
 
@@ -42,6 +43,7 @@ export const Text = ({
   ariaLabel,
   bold,
   id,
+  style,
 }: ITextProps) => {
   let isInheritedSize = false;
 
@@ -62,7 +64,7 @@ export const Text = ({
   const Element = as ? as : variant === 'code' ? 'code' : 'span';
 
   return (
-    <Element className={classList} aria-label={ariaLabel} id={id}>
+    <Element className={classList} aria-label={ariaLabel} id={id} style={style}>
       {children}
     </Element>
   );

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
@@ -54,26 +54,26 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
             [layoutExpandedWrapperClass]: isExpanded,
           })}
         >
-          <SideBarHeader
-            hasSidebar={!!sidebar}
-            logo={logo}
-            minifiedLogo={minifiedLogo}
-          />
+          <SideBarHeader logo={logo} minifiedLogo={minifiedLogo} />
           {sidebar}
           <main className={mainClass({ variant })}>
-            {topBanner && (
-              <Stack
-                style={{
-                  gridArea: 'sidebarlayout-topbanner',
-                  overflowY: 'hidden',
-                }}
-              >
-                {topBanner}
-              </Stack>
-            )}
-            {children}
+            <Stack width="100%" flexDirection="column" marginInlineEnd="sm">
+              {topBanner && (
+                <Stack
+                  style={{
+                    gridArea: 'sidebarlayout-topbanner',
+                    overflowY: 'hidden',
+                  }}
+                >
+                  {topBanner}
+                </Stack>
+              )}
+
+              <Stack flex={1}>{children}</Stack>
+            </Stack>
+            <SideBarAside location={location} />
           </main>
-          <SideBarAside location={location} />
+
           {footer}
         </Stack>
       </Stack>

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
@@ -6,12 +6,12 @@ import {
   style,
   token,
 } from './../../styles';
+import { minHeaderHeight } from './styles.css';
 
 export const asideWrapperClass = recipe({
   base: [
     {
       position: 'fixed',
-      gridArea: 'sidebarlayout-aside',
       paddingBlockEnd: token('spacing.md'),
       backgroundColor: token('color.background.base.default'),
       gridRow: '2/5',
@@ -22,7 +22,6 @@ export const asideWrapperClass = recipe({
         width: '100dvw',
         display: 'flex',
         flexDirection: 'column',
-        height: '100%',
         willChange: 'transform',
         transition: 'transform .4s ease',
         transform: 'translateX(100%)',
@@ -35,9 +34,13 @@ export const asideWrapperClass = recipe({
       sm: {
         maxWidth: '370px',
       },
-      xl: {
+      xxl: {
+        position: 'relative',
+        width: '370px',
+        minWidth: '370px',
         transform: 'translateX(0%)',
         marginInlineEnd: token('spacing.md'),
+        zIndex: 0,
       },
     }),
   ],
@@ -53,6 +56,11 @@ export const asideWrapperClass = recipe({
           opacity: 0,
           pointerEvents: 'none',
         },
+        responsiveStyle({
+          xxl: {
+            display: 'none',
+          },
+        }),
       ],
     },
   },
@@ -73,7 +81,7 @@ export const menuBackdropClass = recipe({
         transition: 'transform .4s ease, opacity 1s ease',
         transform: 'translateX(100%)',
       },
-      xl: {
+      xxl: {
         display: 'none!important',
       },
     }),
@@ -113,13 +121,13 @@ export const asideContentClass = style([
   }),
   {
     overflowY: 'scroll',
-    height: '100dvh',
+    height: `calc(100dvh - ${minHeaderHeight})`,
   },
   responsiveStyle({
     xs: {
       backgroundColor: token('color.background.layer.default'),
     },
-    xl: {
+    xxl: {
       border: token('border.hairline'),
       borderRadius: token('spacing.sm'),
       backgroundColor: token('color.background.layer.default'),

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
@@ -17,7 +17,6 @@ import { KLogo } from './Logo/KLogo';
 
 interface IProps extends PropsWithChildren {
   minifiedLogo?: ReactElement;
-  hasSidebar?: boolean;
 }
 
 export const SideBarHeader: FC<IProps> = ({ minifiedLogo }) => {
@@ -39,7 +38,7 @@ export const SideBarHeader: FC<IProps> = ({ minifiedLogo }) => {
   }, [ref.current]);
 
   return (
-    <header className={headerWrapperClass}>
+    <header className={headerWrapperClass({ sideBarExpanded: isExpanded })}>
       <Stack
         className={classNames(headerClass, {
           [headerExpandedClass]: !isExpanded,

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -6,7 +6,7 @@ import {
   style,
   token,
 } from './../../styles';
-import { minHeaderHeight, sideBarWidth } from './styles.css';
+import { minHeaderHeight, sideBarMinWidth, sideBarWidth } from './styles.css';
 
 export const menuBackdropClass = recipe({
   base: [
@@ -201,15 +201,30 @@ globalStyle(`${listItemClass} button`, {
 });
 globalStyle(`${listItemClass} a`, { justifyContent: 'flex-start', flex: 1 });
 
-export const headerWrapperClass = style([
-  {
-    display: 'flex',
-    justifyContent: 'flex-start',
-    width: '100%',
-    height: minHeaderHeight,
-    gridArea: 'sidebarlayout-header',
+export const headerWrapperClass = recipe({
+  base: [
+    {
+      position: 'fixed',
+      backgroundColor: token('color.background.base.default'),
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      height: minHeaderHeight,
+      gridArea: 'sidebarlayout-header',
+      zIndex: 1,
+    },
+  ],
+  variants: {
+    sideBarExpanded: {
+      true: {
+        paddingInlineStart: sideBarWidth,
+      },
+      false: {
+        paddingInlineStart: sideBarMinWidth,
+      },
+    },
   },
-]);
+});
 export const headerClass = style([
   atoms({
     display: 'grid',

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
@@ -2,6 +2,7 @@ import { atoms, recipe, responsiveStyle, style, token } from './../../styles';
 
 export const minHeaderHeight = '60px';
 export const sideBarWidth = '232px';
+export const sideBarMinWidth = '45px';
 
 export const layoutWrapperClass = recipe({
   base: [
@@ -27,50 +28,21 @@ export const layoutWrapperClass = recipe({
           `,
           },
           md: {
-            gridTemplateColumns: '45px auto',
+            gridTemplateColumns: `${sideBarMinWidth} auto`,
             gridTemplateRows: `${minHeaderHeight} 1fr`,
             gridTemplateAreas: `
             "sidebarlayout-sidebar sidebarlayout-header"
             "sidebarlayout-sidebar sidebarlayout-main"
           `,
           },
-          xl: {
-            gridTemplateColumns: '45px 800px 1fr',
+          xxl: {
+            gridTemplateColumns: `${sideBarMinWidth} 1fr`,
             gridTemplateRows: `${minHeaderHeight} 1fr`,
             gridTemplateAreas: `
-            "sidebarlayout-sidebar sidebarlayout-header sidebarlayout-header"
-            "sidebarlayout-sidebar sidebarlayout-main  sidebarlayout-aside"
-          `,
-          },
-        }),
-      ],
-    },
-    {
-      variants: {
-        variant: 'default',
-      },
-      style: [
-        responsiveStyle({
-          xs: {
-            gridTemplateColumns: 'auto',
-            gridTemplateRows: `${minHeaderHeight} 1fr 60px`,
-            gridTemplateAreas: `
-            "sidebarlayout-header"
-            "sidebarlayout-main"
-            "sidebarlayout-footer"
-          `,
-          },
-          md: {
-            gridTemplateColumns: '45px auto',
-            gridTemplateRows: `${minHeaderHeight} 1fr`,
-            gridTemplateAreas: `
-            "sidebarlayout-sidebar sidebarlayout-header sidebarlayout-header"
-            "sidebarlayout-sidebar sidebarlayout-main sidebarlayout-aside"
+            "sidebarlayout-sidebar sidebarlayout-header"
+            "sidebarlayout-sidebar sidebarlayout-main"
           `,
           },
-          xl: {
-            position: 'relative',
-          },
         }),
       ],
     },
@@ -97,8 +69,8 @@ export const layoutExpandedWrapperClass = style([
     md: {
       gridTemplateColumns: `${sideBarWidth} auto`,
     },
-    xl: {
-      gridTemplateColumns: `${sideBarWidth} 800px 1fr`,
+    xxl: {
+      gridTemplateColumns: `${sideBarWidth} minmax(auto, calc(96rem + 377px))`,
     },
   }),
 ]);
@@ -112,6 +84,8 @@ export const bodyWrapperClass = style({
 export const mainClass = recipe({
   base: {
     gridArea: 'sidebarlayout-main',
+    display: 'flex',
+    flex: 1,
   },
   variants: {
     variant: {