fix: sidebar on mb has scroll y

SolidZORO · Jun 23, 2020 · f6ba5c5 · f6ba5c5
1 parent 87dcd8f
commit f6ba5c5
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 23 deletions.
diff --git a/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/LayoutSidebar.tsx b/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/LayoutSidebar.tsx
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import cx from 'classnames';
 import React, { useState } from 'react';
 import { Layout, Menu, Drawer } from 'antd';
@@ -22,6 +23,7 @@ interface IProps extends RouteComponentProps {
 }
 
 const LOGO_WHITE = `/assets/images/logo/${envConfig.LOGO_WHITE_FILENAME || 'default-logo-white.svg'}`;
+const LOGO_BLACK = `/assets/images/logo/${envConfig.LOGO_BLACK_FILENAME || 'default-logo-black.svg'}`;
 
 export const LayoutSidebar = (props: IProps) => {
   const isMobile = useMedia(IS_MOBILE_SCREEN);
@@ -36,21 +38,13 @@ export const LayoutSidebar = (props: IProps) => {
     if (isMobile) setDrawer(false);
   }, [props.history.location.key]);
 
-  const menuBaseDom = () => (
-    <Layout.Sider
-      collapsible
-      collapsedWidth={0}
-      trigger={null}
-      className={style['full-layout-sidebar']}
-      breakpoint="md"
-    >
-      {!isMobile && (
-        <div className={style['logo-wrapper']}>
-          <Link to="/">
-            <img src={LOGO_WHITE} alt="" className={style['logo-image']} />
-          </Link>
-        </div>
-      )}
+  const menuBaseDom = (
+    <Layout.Sider collapsible collapsedWidth={0} trigger={null} className={style['full-layout-sidebar']}>
+      <div className={style['logo-wrapper']}>
+        <Link to="/">
+          <img src={isMobile ? LOGO_BLACK : LOGO_WHITE} alt="" className={style['logo-image']} />
+        </Link>
+      </div>
 
       {masterRouteList && (
         <Menu
@@ -86,13 +80,13 @@ export const LayoutSidebar = (props: IProps) => {
         visible={drawer}
         getContainer={false}
       >
-        {menuBaseDom()}
+        {menuBaseDom}
       </Drawer>
     </>
   );
 
   // PC
-  const menuPcDom = <>{menuBaseDom()}</>;
+  const menuPcDom = <>{menuBaseDom}</>;
 
   const onCallbackSidebarTarget = () => (isMobile ? setDrawer(true) : undefined);
 
@@ -169,8 +163,10 @@ function makeFlatMenu(menu: IRouteItem): React.ReactNode {
 }
 
 // SubMenu
-function makeFlatMenus(menus: IRouteItem[]): React.ReactNode {
-  return menus.map((menu) => {
+function makeFlatMenus(menus?: IRouteItem[]): React.ReactNode {
+  if (_.isEmpty(menus)) return null;
+
+  return menus?.map((menu) => {
     if (menu.children && (checkPermission(menu.permission) || menu.permission === ALLOW_PERMISSION)) {
       return (
         <Menu.SubMenu

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
@@ -22,12 +22,25 @@
 .logo-wrapper {
   cursor: pointer;
   display: table;
-  margin: 0 auto;
-  padding: 25px 0 15px 0;
+  margin: 0;
+  margin-top: 10px;
+  padding: 15px 25px;
+
+  @media (min-width: @screen-md) {
+    margin: 0 auto;
+    padding: 25px 0 15px 0;
+  }
 
   .logo-image {
-    width: 40px;
-    height: 40px;
+    @w: 28px;
+    width: @w;
+    height: @w;
+
+    @media (min-width: @screen-md) {
+      @w: 40px;
+      width: @w;
+      height: @w;
+    }
   }
 }
 
@@ -92,12 +105,21 @@
 // mb menu
 .drawer-wrapper {
   :global {
+    .ant-drawer-content-wrapper {
+      width: @layout-sidebar-width--pc !important;
+    }
+
     .ant-drawer-close {
       opacity: 0.1;
       top: -12px;
       right: -12px;
       font-size: 12px;
     }
+
+    .ant-drawer-body {
+      overflow: hidden;
+      //padding: 0;
+    }
   }
 }
 
@@ -143,6 +165,10 @@
       .ant-menu-item-selected {
         background-color: @sidebar-color-mb !important;
       }
+
+      .ant-menu {
+        overflow: hidden !important;
+      }
     }
   }