Improve styles

Author: k.golikov

src/layouts/appLayout/components/appHeader/AppHeader.scss

@@ -0,0 +1,11 @@
+.AppHeader__side-menu-drawer {
+    .ant-drawer-header {
+        &.ant-drawer-header-close-only {
+            padding-right: 4px;
+        }
+
+        .ant-drawer-header-title {
+            justify-content: flex-end;
+        }
+    }
+}

src/layouts/appLayout/components/appHeader/AppHeader.tsx

@@ -8,6 +8,8 @@ import { routes } from '../../../../constants/router/routes';
 import { Button, Col, Drawer, Space } from 'antd';
 import AppMenu from '../appMenu/AppMenu';
 import { MenuOutlined } from '@ant-design/icons';
+import './AppHeader.scss';
+import classNames from 'classnames';
 
 const drawerBodyStyle: CSSProperties = {
     padding: 1
@@ -18,6 +20,7 @@ const drawerHeaderStyle: CSSProperties = {
 };
 
 const drawerContentWrapperStyle: CSSProperties = {
+    width: '400px',
     maxWidth: '100vw'
 };
 
@@ -38,7 +41,7 @@ const AppHeader = () => {
                 placement="right"
                 visible={isDrawerVisible}
                 onClose={handleDrawerClose}
-                className={styles.sideMenuDrawer}
+                className={classNames(styles.sideMenuDrawer, 'AppHeader__side-menu-drawer')}
                 bodyStyle={drawerBodyStyle}
                 headerStyle={drawerHeaderStyle}
                 contentWrapperStyle={drawerContentWrapperStyle}

src/layouts/appLayout/components/appMenu/AppMenu.module.scss

@@ -1,4 +1,4 @@
 .menu {
-    height: 100%;
+    min-height: 100%;
     border-right: 0;
 }

src/layouts/appLayout/components/appMenu/AppMenu.scss

@@ -0,0 +1,9 @@
+//@import "../../../../styles/main";
+
+//.AppMenu {
+//    @include themeDark {
+//        .ant-menu-sub.ant-menu-inline {
+//            background: #1d1d1d;
+//        }
+//    }
+//}

src/layouts/appLayout/components/appMenu/AppMenu.tsx

@@ -6,6 +6,7 @@ import menuItems from '../../../../constants/router/menuItems';
 import { useLocation } from 'react-router-dom';
 import useAppSettings from '../../../../hooks/useAppSettings';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
+import classNames from 'classnames';
 
 interface Props {
     onItemSelect?: () => void;
@@ -22,7 +23,7 @@ const AppMenu: FunctionComponent<Props> = ({ onItemSelect }) => {
     return (
         <Menu
             mode="inline"
-            className={styles.menu}
+            className={classNames(styles.menu, 'AppMenu')}
             activeKey={pathname}
             selectedKeys={[pathname]}
             onSelect={onItemSelect}

src/layouts/appLayout/components/appSider/AppSider.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import Sider from 'antd/lib/layout/Sider';
 import AppMenu from '../appMenu/AppMenu';
 import styles from './AppSider.module.scss';
+import classNames from 'classnames';
 
 const AppSider = () => {
     return (
-        <Sider theme="light" className={styles.container} trigger={null}>
+        <Sider theme="light" className={classNames(styles.container, 'AppSider')} trigger={null}>
             <AppMenu />
         </Sider>
     );