fix(layout-v6): correct EdgeSidebarContent height for temporary

siriwatknp · Aug 13, 2024 · cdd2343 · cdd2343
1 parent e413748
commit cdd2343
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/blocks/layout-core-v6/EdgeSidebar.tsx b/blocks/layout-core-v6/EdgeSidebar.tsx
@@ -28,12 +28,16 @@ function applyTemporaryStyles(params: Omit<TemporaryConfig, "variant">) {
       {
         "--EdgeSidebar-temporaryWidth": width,
       },
-    ...(fullHeight && {
-      zIndex: 5,
-      [`& .${layoutClasses.EdgeSidebarContent}`]: {
-        top: 0,
-      },
-    }),
+    ...(fullHeight
+      ? {
+          zIndex: 5,
+          [`& .${layoutClasses.EdgeSidebarContent}`]: {
+            top: 0,
+          },
+        }
+      : {
+          "--SidebarContent-offset": "var(--Header-height)",
+        }),
   };
 }
 

diff --git a/blocks/layout-core-v6/EdgeSidebarContent.tsx b/blocks/layout-core-v6/EdgeSidebarContent.tsx
@@ -18,7 +18,7 @@ const StyledEdgeSidebarContent = styled("div")(({ theme }) => ({
   zIndex: 2,
   width:
     "var(--_temporary, var(--EdgeSidebar-temporaryWidth)) var(--_permanent, calc(var(--SidebarContent-width) - var(--EdgeSidebar-sidelineWidth, 0px)))",
-  height: "var(--_temporary, 100%)",
+  height: "var(--_temporary, calc(100% - var(--SidebarContent-offset, 0px)))",
   overflowY: "var(--_temporary, auto)" as any,
   transition: `var(--_temporary, opacity 0.3s, transform 0.3s)
                var(--_permanent, opacity 0.4s, width 0.3s var(--SidebarContent-transitionDelay, 0s), transform 0.3s var(--SidebarContent-transitionDelay, 0s), box-shadow 0.3s var(--SidebarContent-transitionDelay, 0s))`,

diff --git a/blocks/layout-core-v6/EdgeSidebarRight.tsx b/blocks/layout-core-v6/EdgeSidebarRight.tsx
@@ -30,12 +30,16 @@ export function applyTemporaryRightStyles(
       {
         "--EdgeSidebar-temporaryWidth": width,
       },
-    ...(fullHeight && {
-      zIndex: 5,
-      [`& .${layoutClasses.EdgeSidebarContent}`]: {
-        top: 0,
-      },
-    }),
+    ...(fullHeight
+      ? {
+          zIndex: 5,
+          [`& .${layoutClasses.EdgeSidebarContent}`]: {
+            top: 0,
+          },
+        }
+      : {
+          "--SidebarContent-offset": "var(--Header-height)",
+        }),
   };
 }