From cf17f106834b58c06bcb1ffeffaacd6f9ace5e8d Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Thu, 31 Oct 2024 16:09:05 +0100
Subject: [PATCH] clean up

---
 .../SideBarLayout/SideBarLayout.stories.tsx        | 14 +++++++-------
 .../src/patterns/SideBarLayout/aside.css.ts        | 12 +++++++-----
 .../SideBarLayout/components/SideBarAside.tsx      |  1 -
 .../src/patterns/SideBarLayout/sidebar.css.ts      |  7 ++++++-
 4 files changed, 20 insertions(+), 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
index 3f349dbf6e..ba145c22e4 100644
--- 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
index c32953614c..2688146488 100644
--- 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
index 0e8c8da9cd..56ecec215c 100644
--- 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
index 844e2891b8..a733e8dbbe 100644
--- 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({}), {}],
     },