start the aside component

packages/libs/kode-ui/.storybook/global.css.ts

@@ -9,7 +9,3 @@ globalStyle('pre.prismjs > div, pre.prismjs > div span, code', {
 globalStyle('code', {
   fontWeight: vars.fontWeights.$semiBold,
 });
-
-globalStyle('body', {
-  padding: '0!important',
-});

packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx

@@ -11,7 +11,12 @@ import {
   MonoWindow,
   MonoWorkspaces,
 } from '@kadena/kode-icons/system';
-import { Breadcrumbs, BreadcrumbsItem, Button } from './../../components';
+import {
+  Breadcrumbs,
+  BreadcrumbsItem,
+  Button,
+  Stack,
+} from './../../components';
 import { KadenaLogo } from './components/Logo/KadenaLogo';
 import { KLogo } from './components/Logo/KLogo';
 import { SideBarFooter } from './components/SideBarFooter';
@@ -76,7 +81,7 @@ const InnerLayout = () => {
         </a>
       }
       activeUrl="https://kadena.io"
-      topBanner={<div style={{ paddingBlock: '10px' }}>topbanner</div>}
+      // topBanner={<div style={{ paddingBlock: '10px' }}>topbanner</div>}
       breadcrumbs={
         <Breadcrumbs icon={<MonoAccountTree />}>
           <BreadcrumbsItem href="/accounts">He-man</BreadcrumbsItem>
@@ -174,7 +179,11 @@ const InnerLayout = () => {
         </SideBarFooter>
       }
     >
-      content
+      <Stack
+        style={{ maxWidth: '800px', background: 'yellow', height: '400px' }}
+      >
+        content
+      </Stack>
     </SideBarLayout>
   );
 };
@@ -202,7 +211,7 @@ const InnerLayoutFull = () => {
       }
       variant="full"
     >
-      content
+      <Stack style={{ maxWidth: '800px', background: 'yellow' }}>content</Stack>
     </SideBarLayout>
   );
 };

packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx

@@ -3,6 +3,7 @@ import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React, { useEffect } from 'react';
 import { MediaContextProvider, Stack } from './../../components';
 
+import { SideBarAside } from './components/SideBarAside';
 import { SideBarHeader } from './components/SideBarHeader';
 import { useSideBar } from './components/SideBarProvider';
 import {
@@ -76,6 +77,7 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
           />
           {sidebar}
           <main className={mainClass({ variant })}>{children}</main>
+          <SideBarAside />
           {footer}
         </Stack>
       </Stack>

packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts

@@ -0,0 +1,79 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { responsiveStyle, token } from './../../styles';
+
+export const asideWrapperClass = recipe({
+  base: [
+    {
+      gridArea: 'sidebarlayout-aside',
+      gridRow: '1/5',
+      //   gridArea: 'sidebarlayout-aside',
+      //   background: 'purple',
+      //   display: 'flex',
+      //   position: 'absolute',
+      //   width: '300px',
+      //   top: 0,
+      //   bottom: 0,
+      //   right: 0,
+      //   zIndex: token('zIndex.overlay'),
+      //   willChange: 'transform, opacity',
+      //   transition: 'transform .4s ease, opacity 1s ease',
+      //   transform: 'translateX(0%)',
+    },
+    responsiveStyle({
+      xs: {
+        flex: 1,
+        maxWidth: '300px',
+        width: '100dvw',
+        display: 'flex',
+        willChange: 'transform',
+        transition: 'transform .4s ease',
+        transform: 'translateX(100%)',
+        position: 'absolute',
+
+        top: 0,
+        bottom: 0,
+        right: 0,
+        zIndex: token('zIndex.overlay'),
+        backgroundColor: token('color.background.layer.default'),
+        padding: token('spacing.lg'),
+      },
+      xl: {
+        position: 'initial',
+        transform: 'translateX(0%)',
+      },
+    }),
+  ],
+});
+
+export const menuBackdropClass = recipe({
+  base: [
+    responsiveStyle({
+      xs: {
+        display: 'flex',
+        position: 'absolute',
+        inset: 0,
+        background: token('color.neutral.n90@alpha20'),
+        zIndex: token('zIndex.overlay'),
+        backdropFilter: 'blur(8px)',
+        opacity: 0,
+        willChange: 'transform, opacity',
+        transition: 'transform .4s ease, opacity 1s ease',
+        transform: 'translateX(100%)',
+      },
+      lg: {
+        display: 'none!important',
+      },
+    }),
+  ],
+  variants: {
+    expanded: {
+      true: [
+        {
+          opacity: 1,
+          transform: 'translateX(0%)',
+        },
+      ],
+      false: [],
+    },
+  },
+});

packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx

@@ -0,0 +1,25 @@
+import type { FC } from 'react';
+import React from 'react';
+import { asideWrapperClass, menuBackdropClass } from '../aside.css';
+import type { PressEvent } from './../../../components';
+import { Stack } from './../../../components';
+import { useSideBar } from './SideBarProvider';
+
+export const SideBarAside: FC = () => {
+  const { handleToggleExpand } = useSideBar();
+
+  const handleExpand = (e: PressEvent) => {
+    if (handleToggleExpand) {
+      handleToggleExpand(e);
+    }
+  };
+  return (
+    <>
+      <Stack
+        className={menuBackdropClass({ expanded: false })}
+        onClick={handleExpand}
+      />
+      <aside className={asideWrapperClass()}>aside info</aside>
+    </>
+  );
+};

packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts

@@ -223,9 +223,7 @@ export const headerClass = style([
 
 export const headerExpandedClass = style([
   responsiveStyle({
-    md: {
-      gridTemplateColumns: '50px 50px auto',
-    },
+    md: { paddingInlineStart: '50px' },
   }),
 ]);
 

packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts

@@ -34,6 +34,14 @@ export const layoutWrapperClass = recipe({
             "sidebarlayout-sidebar sidebarlayout-main"
           `,
           },
+          xl: {
+            gridTemplateColumns: '45px 800px 1fr',
+            gridTemplateRows: `${minHeaderHeight} 1fr`,
+            gridTemplateAreas: `
+            "sidebarlayout-sidebar  sidebarlayout-header sidebarlayout-header"
+            "sidebarlayout-sidebar sidebarlayout-main  sidebarlayout-header"
+          `,
+          },
         }),
       ],
     },
@@ -94,6 +102,9 @@ export const layoutExpandedWrapperClass = style([
     md: {
       gridTemplateColumns: '200px auto',
     },
+    xl: {
+      gridTemplateColumns: '200px 800px 1fr',
+    },
   }),
 ]);