clean up

kadena-community · Oct 31, 2024 · cf17f10 · cf17f10
1 parent 29a32a0
commit cf17f10
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -81,13 +81,13 @@ const InnerLayout = () => {
         </a>
       }
       activeUrl="https://kadena.io"
-      topBanner={
-        <div
-          style={{ paddingBlock: '10px', background: 'green', width: '100%' }}
-        >
-          topbanner
-        </div>
-      }
+      // topBanner={
+      //   <div
+      //     style={{ paddingBlock: '10px', background: 'green', width: '100%' }}
+      //   >
+      //     topbanner
+      //   </div>
+      // }
       breadcrumbs={
         <Breadcrumbs icon={<MonoAccountTree />}>
           <BreadcrumbsItem href="/accounts">He-man</BreadcrumbsItem>

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
@@ -5,13 +5,12 @@ export const asideWrapperClass = recipe({
   base: [
     {
       gridArea: 'sidebarlayout-aside',
-
+      paddingBlockEnd: token('spacing.md'),
       backgroundColor: token('color.background.base.default'),
     },
     responsiveStyle({
       xs: {
         flex: 1,
-
         width: '100dvw',
         display: 'flex',
         flexDirection: 'column',
@@ -30,8 +29,7 @@ export const asideWrapperClass = recipe({
         maxWidth: '370px',
       },
       xl: {
-        position: 'initial',
-        opacity: 1,
+        position: 'absolute',
         transform: 'translateX(0%)',
         marginInlineEnd: token('spacing.md'),
       },
@@ -47,7 +45,11 @@ export const asideWrapperClass = recipe({
         opacity: 1,
         transform: 'translateX(0%)',
       },
-      false: [responsiveStyle({})],
+      false: [
+        {
+          opacity: 0,
+        },
+      ],
     },
   },
 });

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
@@ -27,7 +27,6 @@ export const SideBarAside: FC<{ hasTopBanner?: boolean }> = ({
   useEffect(() => {
     const { hash } = window.location;
     handleSetAsideExpanded(!!hash);
-    handleSetAsideExpanded(true);
   }, []);
 
   return (

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts
@@ -20,7 +20,7 @@ export const menuBackdropClass = recipe({
         backdropFilter: 'blur(8px)',
         opacity: 0,
         willChange: 'transform, opacity',
-        transition: 'transform .4s ease, opacity 1s ease',
+        transition: 'transform .2s ease, opacity 1s ease',
         transform: 'translateX(-100%)',
       },
       md: {
@@ -35,6 +35,11 @@ export const menuBackdropClass = recipe({
           opacity: 1,
           transform: 'translateX(0%)',
         },
+        responsiveStyle({
+          md: {
+            opacity: 0,
+          },
+        }),
       ],
       false: [atoms({}), {}],
     },