fix the rightsidebar

kadena-community · Nov 7, 2024 · 0d3c3cb · 0d3c3cb
1 parent 4f11e02
commit 0d3c3cb
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 8 deletions.
diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx
@@ -123,10 +123,6 @@ export const SideBar: FC = () => {
                   </Button>
                 }
               >
-                <ContextMenuItem
-                  onClick={() => navigate('/profile')}
-                  label="Profile"
-                />
                 <ContextMenuItem
                   endVisual={<MonoLogout />}
                   label="Logout"
@@ -140,12 +136,12 @@ export const SideBar: FC = () => {
               label="Change theme"
             >
               <Button
+                isCompact
                 variant="transparent"
                 onPress={() => toggleTheme()}
                 startVisual={
                   theme === 'dark' ? <MonoDarkMode /> : <MonoLightMode />
                 }
-                isCompact={!isExpanded}
               />
             </SideBarItem>
           </SideBarItemsInline>

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/aside.css.ts
@@ -8,13 +8,58 @@ import {
 } from './../../styles';
 import { minHeaderHeight } from './styles.css';
 
+export const asideWrapperTempClass = recipe({
+  base: [
+    {
+      position: 'relative',
+      paddingBlockEnd: token('spacing.md'),
+      backgroundColor: token('color.background.base.default'),
+    },
+    responsiveStyle({
+      xs: {
+        display: 'none',
+      },
+
+      xxl: {
+        display: 'flex',
+        width: '370px',
+        minWidth: '370px',
+        transform: 'translateX(0%)',
+        marginInlineEnd: token('spacing.md'),
+        zIndex: 0,
+      },
+    }),
+  ],
+  variants: {
+    expanded: {
+      true: {
+        opacity: 1,
+        transform: 'translateX(0%)',
+        pointerEvents: 'auto',
+      },
+      false: [
+        {
+          opacity: 0,
+          pointerEvents: 'none',
+        },
+        responsiveStyle({
+          xxl: {
+            display: 'none',
+          },
+        }),
+      ],
+    },
+  },
+});
+
 export const asideWrapperClass = recipe({
   base: [
     {
       position: 'fixed',
       paddingBlockEnd: token('spacing.md'),
       backgroundColor: token('color.background.base.default'),
       gridRow: '2/5',
+      zIndex: 1,
     },
     responsiveStyle({
       xs: {
@@ -35,12 +80,14 @@ export const asideWrapperClass = recipe({
         maxWidth: '370px',
       },
       xxl: {
-        position: 'relative',
+        position: 'fixed',
+        top: minHeaderHeight,
         width: '370px',
         minWidth: '370px',
         transform: 'translateX(0%)',
         marginInlineEnd: token('spacing.md'),
         zIndex: 0,
+        height: `calc(100dvh - ${minHeaderHeight})`,
       },
     }),
   ],

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarAside.tsx
@@ -7,6 +7,7 @@ import {
   asideHeaderCloseButtonWrapperClass,
   asideHeadingClass,
   asideWrapperClass,
+  asideWrapperTempClass,
   menuBackdropClass,
 } from '../aside.css';
 import type { ISideBarLayoutLocation } from '../types';
@@ -35,8 +36,8 @@ export const SideBarAside: FC<{
   }, [ref.current]);
 
   useEffect(() => {
-    setIsRightAsideExpanded(!!location?.hash);
-  }, [location?.hash]);
+    setIsRightAsideExpanded(false);
+  }, [location.url]);
 
   return (
     <>
@@ -47,6 +48,11 @@ export const SideBarAside: FC<{
         })}
         onClick={handleExpand}
       />
+      <Stack
+        className={asideWrapperTempClass({
+          expanded: isRightAsideExpanded,
+        })}
+      ></Stack>
       <aside
         className={asideWrapperClass({
           expanded: isRightAsideExpanded,