feat(eo-page-view): add aside slot

easyops-cn · Sep 3, 2024 · b7f131b · b7f131b
1 parent f2f344a
commit b7f131b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 19 deletions.
diff --git a/bricks/containers/src/page-view/index.tsx b/bricks/containers/src/page-view/index.tsx
@@ -107,28 +107,33 @@ export function EoPageViewComponent({
 
   return (
     <>
-      <div className="header">
-        <slot name="header" />
-      </div>
-      <div className="main">
-        <div className="sidebar">
-          <slot name="sidebar" />
-        </div>
-        <div className="sub-sidebar">
-          <slot name="subSidebar" />
+      <div className="header-and-main">
+        <div className="header">
+          <slot name="header" />
         </div>
-        <div className="content">
-          <slot />
-          <div
-            className={classNames("footer", { pinned: footerPinned })}
-            ref={footerRef}
-          >
-            <WrappedNarrowView size={narrow}>
-              <slot name="footer" />
-            </WrappedNarrowView>
+        <div className="main">
+          <div className="sidebar">
+            <slot name="sidebar" />
+          </div>
+          <div className="sub-sidebar">
+            <slot name="subSidebar" />
+          </div>
+          <div className="content">
+            <slot />
+            <div
+              className={classNames("footer", { pinned: footerPinned })}
+              ref={footerRef}
+            >
+              <WrappedNarrowView size={narrow}>
+                <slot name="footer" />
+              </WrappedNarrowView>
+            </div>
           </div>
         </div>
       </div>
+      <div className="aside">
+        <slot name="aside" />
+      </div>
     </>
   );
 }
diff --git a/bricks/containers/src/page-view/styles.shadow.css b/bricks/containers/src/page-view/styles.shadow.css
@@ -2,14 +2,25 @@
   --local-footer-height: 62px;
 
   display: flex;
-  flex-direction: column;
   height: 100%;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+.header-and-main,
+.aside {
+  height: 100%;
+  min-width: 0;
+}
+
+.header-and-main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .header,
 .main {
   min-height: 0;