Antd has been upgraded to version 4.6.4

* Antd has been upgraded to version 4.6.4
* The problem of deactivation of the sider menu item that occurred when the page was refreshed has been fixed.
* The footer on the login screen has been made sticky.

Author: huseyingoztok

reactjs/package-lock.json

@@ -3,10 +3,11 @@
   "version": "4.7.1",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.2.2",
     "@aspnet/signalr": "^1.1.4",
     "@craco/craco": "^5.6.2",
     "abp-web-resources": "^5.1.1",
-    "antd": "^4.2.4",
+    "antd": "^4.6.4",
     "axios": "^0.19.0",
     "classnames": "^2.2.6",
     "craco-antd": "^1.14.1",

reactjs/package.json

@@ -1,8 +0,0 @@
-.footer {
-    position: sticky;
-    left: 0;
-    margin-top: 16px;
-    bottom: 64px;
-    width: 100%;
-    text-align: center;
- }

reactjs/src/components/Footer/index.less

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Col } from 'antd';
+import { Layout } from 'antd';
 import './index.less';
-
 const Footer = () => {
+  
   return (
-      <Col className={"footer"}>
+    <Layout.Footer className={'footer'} style={{ textAlign: 'center' }}>
       Asp.Net Boilerplate - React © 2018 <a href="https://github.com/ryoldash/module-zero-core-template">Github Page</a>
-      </Col>
+    </Layout.Footer>
   );
 };
 export default Footer;

reactjs/src/components/Footer/index.tsx

@@ -2,7 +2,8 @@ import './index.less';
 
 import * as React from 'react';
 
-import { Avatar, Badge, Col, Dropdown, Icon, Menu, Row } from 'antd';
+import { Avatar, Badge, Col, Dropdown, Menu, Row } from 'antd';
+import { MenuUnfoldOutlined, MenuFoldOutlined, LogoutOutlined } from '@ant-design/icons';
 
 import { L } from '../../lib/abpUtility';
 import LanguageSelect from '../LanguageSelect';
@@ -19,7 +20,7 @@ const userDropdownMenu = (
   <Menu>
     <Menu.Item key="2">
       <Link to="/logout">
-        <Icon type="logout" />
+        <LogoutOutlined />
         <span> {L('Logout')}</span>
       </Link>
     </Menu.Item>
@@ -31,13 +32,17 @@ export class Header extends React.Component<IHeaderProps> {
     return (
       <Row className={'header-container'}>
         <Col style={{ textAlign: 'left' }} span={12}>
-          <Icon className="trigger" type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'} onClick={this.props.toggle} />
+          {this.props.collapsed ? (
+            <MenuUnfoldOutlined className="trigger" onClick={this.props.toggle} />
+          ) : (
+            <MenuFoldOutlined className="trigger" onClick={this.props.toggle} />
+          )}
         </Col>
         <Col style={{ padding: '0px 15px 0px 15px', textAlign: 'right' }} span={12}>
           <LanguageSelect /> {'   '}
           <Dropdown overlay={userDropdownMenu} trigger={['click']}>
             <Badge style={{}} count={3}>
-              <Avatar style={{height:24, width:24}} shape="circle" alt={'profile'} src={profilePicture} />
+              <Avatar style={{ height: 24, width: 24 }} shape="circle" alt={'profile'} src={profilePicture} />
             </Badge>
           </Dropdown>
         </Col>

reactjs/src/components/Header/index.tsx

@@ -3,7 +3,8 @@ import 'famfamfam-flags/dist/sprite/famfamfam-flags.css';
 
 import * as React from 'react';
 
-import { Dropdown, Icon, Menu } from 'antd';
+import { Dropdown, Menu } from 'antd';
+import { GlobalOutlined } from '@ant-design/icons';
 
 import { L } from '../../lib/abpUtility';
 import Stores from '../../stores/storeIdentifier';
@@ -55,7 +56,7 @@ class LanguageSelect extends React.Component<ILanguageSelectProps> {
 
     return (
       <Dropdown overlay={langMenu} placement="bottomRight">
-        <Icon type="global" className={classNames('dropDown', 'className')} title={L('Languages')} />
+        <GlobalOutlined className={classNames('dropDown', 'className')} title={L('Languages')} />
       </Dropdown>
     );
   }

reactjs/src/components/LanguageSelect/index.tsx

@@ -57,15 +57,13 @@ class AppLayout extends React.Component<any> {
                     exact
                     key={index}
                     path={route.path}
-                    render={props => <ProtectedRoute component={route.component} permission={route.permission} />}
+                    render={(props) => <ProtectedRoute component={route.component} permission={route.permission} />}
                   />
                 ))}
               {pathname !== '/' && <NotFoundRoute />}
             </Switch>
           </Content>
-          <Layout.Footer style={{ textAlign: 'center' }}>
-            <Footer />
-          </Layout.Footer>
+          <Footer />
         </Layout>
       </Layout>
     );

reactjs/src/components/Layout/AppLayout.tsx

@@ -20,18 +20,20 @@ class UserLayout extends React.Component<any> {
     return (
       <DocumentTitle title={utils.getPageTitle(pathname)}>
         <Col className="container">
-          <div className={'lang'}>
-            <LanguageSelect />
-          </div>
-          <Switch>
-            {userRouter
-              .filter((item: any) => !item.isLayout)
-              .map((item: any, index: number) => (
-                <Route key={index} path={item.path} component={item.component} exact={item.exact} />
-              ))}
+          <div style={{ height: 'calc(100vh - 55px)' }}>
+            <div className={'lang'}>
+              <LanguageSelect />
+            </div>
+            <Switch>
+              {userRouter
+                .filter((item: any) => !item.isLayout)
+                .map((item: any, index: number) => (
+                  <Route key={index} path={item.path} component={item.component} exact={item.exact} />
+                ))}
 
-            <Redirect from="/user" to="/user/login" />
-          </Switch>
+              <Redirect from="/user" to="/user/login" />
+            </Switch>
+          </div>
           <Footer />
         </Col>
       </DocumentTitle>

reactjs/src/components/Layout/UserLayout.tsx

@@ -1,4 +1,5 @@
 import LoadableComponent from './../Loadable/index';
+import { HomeOutlined, UserOutlined, TagsOutlined, AppstoreOutlined, InfoCircleOutlined } from '@ant-design/icons';
 
 export const userRouter: any = [
   {
@@ -25,7 +26,6 @@ export const appRouters: any = [
     name: 'home',
     permission: '',
     title: 'Home',
-    icon: 'home',
     component: LoadableComponent(() => import('../../components/Layout/AppLayout')),
     isLayout: true,
     showInMenu: false,
@@ -35,7 +35,7 @@ export const appRouters: any = [
     name: 'dashboard',
     permission: '',
     title: 'Dashboard',
-    icon: 'home',
+    icon: HomeOutlined,
     showInMenu: true,
     component: LoadableComponent(() => import('../../scenes/Dashboard')),
   },
@@ -44,7 +44,7 @@ export const appRouters: any = [
     permission: 'Pages.Users',
     title: 'Users',
     name: 'user',
-    icon: 'user',
+    icon: UserOutlined,
     showInMenu: true,
     component: LoadableComponent(() => import('../../scenes/Users')),
   },
@@ -53,7 +53,7 @@ export const appRouters: any = [
     permission: 'Pages.Roles',
     title: 'Roles',
     name: 'role',
-    icon: 'tags',
+    icon: TagsOutlined,
     showInMenu: true,
     component: LoadableComponent(() => import('../../scenes/Roles')),
   },
@@ -62,7 +62,7 @@ export const appRouters: any = [
     permission: 'Pages.Tenants',
     title: 'Tenants',
     name: 'tenant',
-    icon: 'appstore',
+    icon: AppstoreOutlined,
     showInMenu: true,
     component: LoadableComponent(() => import('../../scenes/Tenants')),
   },
@@ -71,7 +71,7 @@ export const appRouters: any = [
     permission: '',
     title: 'About',
     name: 'about',
-    icon: 'info-circle',
+    icon: InfoCircleOutlined,
     showInMenu: true,
     component: LoadableComponent(() => import('../../scenes/About')),
   },
@@ -80,7 +80,6 @@ export const appRouters: any = [
     permission: '',
     title: 'Logout',
     name: 'logout',
-    icon: 'info-circle',
     showInMenu: false,
     component: LoadableComponent(() => import('../../components/Logout')),
   },
@@ -89,7 +88,6 @@ export const appRouters: any = [
     permission: '',
     title: 'exception',
     name: 'exception',
-    icon: 'info-circle',
     showInMenu: false,
     component: LoadableComponent(() => import('../../scenes/Exception')),
   },

reactjs/src/components/Router/router.config.ts

@@ -2,11 +2,12 @@ import './index.less';
 
 import * as React from 'react';
 
-import { Avatar, Col, Icon, Layout, Menu } from 'antd';
+import { Avatar, Col, Layout, Menu } from 'antd';
 import { L, isGranted } from '../../lib/abpUtility';
 
 import AbpLogo from '../../images/abp-logo-long.png';
 import { appRouters } from '../../components/Router/router.config';
+import utils from '../../utils/utils';
 
 const { Sider } = Layout;
 
@@ -19,6 +20,7 @@ export interface ISiderMenuProps {
 
 const SiderMenu = (props: ISiderMenuProps) => {
   const { collapsed, history, onCollapse } = props;
+  const currentRoute = utils.getRoute(history.location.pathname);
   return (
     <Sider trigger={null} className={'sidebar'} width={256} collapsible collapsed={collapsed} onCollapse={onCollapse}>
       {collapsed ? (
@@ -31,15 +33,15 @@ const SiderMenu = (props: ISiderMenuProps) => {
         </Col>
       )}
 
-      <Menu theme="dark" mode="inline">
+      <Menu theme="dark" mode="inline" selectedKeys={[currentRoute ? currentRoute.path : '']}>
         {appRouters
           .filter((item: any) => !item.isLayout && item.showInMenu)
           .map((route: any, index: number) => {
             if (route.permission && !isGranted(route.permission)) return null;
 
             return (
               <Menu.Item key={route.path} onClick={() => history.push(route.path)}>
-                <Icon type={route.icon} />
+                <route.icon />
                 <span>{L(route.title)}</span>
               </Menu.Item>
             );