fix: sidebar position fixed

SolidZORO · Jun 23, 2020 · 5d39d2a · 5d39d2a
1 parent 64e7724
commit 5d39d2a
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 21 deletions.
diff --git a/packages/leaa-dashboard/src/components/SubmitBar/SubmitBar.tsx b/packages/leaa-dashboard/src/components/SubmitBar/SubmitBar.tsx
@@ -15,14 +15,14 @@ interface IProps {
 export const SubmitBar = (props: IProps) => (
   <div
     className={cx(
-      style['wrapper'],
+      style['submit-bar-wrapper'],
       props.className,
       {
-        [style['wrapper--full']]: props.full,
+        [style['submit-bar-wrapper--full']]: props.full,
       },
-      'g-wrapper--full',
+      'g-submit-bar-wrapper--full',
     )}
   >
-    <div className={style['container']}>{props.children}</div>
+    <div className={style['submit-bar-container']}>{props.children}</div>
   </div>
 );
diff --git a/packages/leaa-dashboard/src/components/SubmitBar/style.module.less b/packages/leaa-dashboard/src/components/SubmitBar/style.module.less
@@ -1,11 +1,11 @@
 @import '~@leaa/dashboard/src/styles/variables.less';
 
-.wrapper {
+.submit-bar-wrapper {
   position: relative;
   display: block;
 }
 
-.container {
+.submit-bar-container {
   padding-top: 5px;
   margin-bottom: 50px;
 
@@ -20,15 +20,15 @@
   }
 }
 
-.wrapper--full {
+.submit-bar-wrapper--full {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   transition: all 0.3s;
   z-index: 99;
 
-  .container {
+  .submit-bar-container {
     padding: 18px;
     text-align: center;
     background: #fffd;
@@ -39,20 +39,20 @@
 
 :global {
   .g-full-layout-wrapper--mb {
-    .g-wrapper--full {
+    .g-submit-bar-wrapper--full {
       margin-left: 0;
     }
   }
 
   .g-full-layout-wrapper--pc {
-    .g-wrapper--full {
-      margin-left: 200px;
+    .g-submit-bar-wrapper--full {
+      margin-left: @layout-sidebar-width--pc;
     }
   }
 
   .siderbar-collapsed {
     :local {
-      .wrapper--full {
+      .submit-bar-wrapper--full {
         margin-left: 0;
         transition: all 0.3s;
       }

diff --git a/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/LayoutSidebar.tsx b/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/LayoutSidebar.tsx
@@ -67,11 +67,10 @@ export const LayoutSidebar = (props: IProps) => {
       defaultCollapsed={collapsed}
       collapsible
       collapsedWidth={0}
-      className={style['full-layout-sidebar']}
-      id="full-layout-sidebar"
-      breakpoint="md"
       onCollapse={(isCollapsed, type) => onCollapse(isCollapsed, type)}
       trigger={null}
+      className={style['full-layout-sidebar']}
+      // breakpoint="md"
     >
       {!isMobile && (
         <div className={style['logo-wrapper']}>
@@ -125,8 +124,6 @@ export const LayoutSidebar = (props: IProps) => {
 
   const onCallbackSidebarTarget = () => (isMobile ? setDrawer(true) : onCollapse(collapsed, 'clickTrigger'));
 
-  console.log(isMobile);
-
   return (
     <div className={cx(style['full-layout-sidebar-wrapper'], 'g-full-layout-sidebar-wrapper')}>
       <div className={cx(style['target-button-wrapper'], 'target-button-wrapper')}>

diff --git a/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/style.module.less b/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/style.module.less
@@ -5,13 +5,18 @@
 }
 
 .full-layout-sidebar-wrapper {
-  //display: none;
-  transition: all 0.3s;
+  transition: all 0.2s;
   position: relative;
+  //height: 100vh;
 }
 
 .full-layout-sidebar {
-  position: relative;
+  transition: all 0.2s;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  overflow-y: auto;
 }
 
 .logo-wrapper {
@@ -153,7 +158,7 @@
       }
 
       .ant-layout-sider {
-        background: transparent;
+        //background: transparent;
       }
 
       .ant-menu-item-selected {

diff --git a/packages/leaa-dashboard/src/layouts/MasterLayout/style.module.less b/packages/leaa-dashboard/src/layouts/MasterLayout/style.module.less
@@ -2,6 +2,10 @@
 
 .full-layout-wrapper {
   position: relative;
+
+  @media (min-width: @screen-md) {
+    margin-left: @layout-sidebar-width--pc;
+  }
 }
 
 .full-layout-inner {

diff --git a/packages/leaa-dashboard/src/styles/variables.less b/packages/leaa-dashboard/src/styles/variables.less
@@ -6,6 +6,7 @@
 //@page-layout-bg-color: #f6f8fa;
 @page-layout-bg-color: #f0f4fa;
 @container-ext-width: 280px;
+@layout-sidebar-width--pc: 200px;
 
 //
 // ANTD