12.0 change app structure (#6335)

* 01 change app structure

* 02 change setting page

* 03 optimize header style

* 04 change app mobile side panel logo

frontend/src/components/side-panel.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import MediaQuery from 'react-responsive';
 import Logo from './logo';
 import MainSideNav from './main-side-nav';
 import { SIDE_PANEL_FOLDED_WIDTH } from '../constants';
@@ -11,7 +12,6 @@ const propTypes = {
   onCloseSidePanel: PropTypes.func,
   tabItemClick: PropTypes.func,
   children: PropTypes.object,
-  showLogoOnlyInMobile: PropTypes.bool,
   isSidePanelFolded: PropTypes.bool,
   toggleFoldSideNav: PropTypes.func
 };
@@ -19,16 +19,15 @@ const propTypes = {
 class SidePanel extends React.Component {
 
   render() {
-    const { children, isSidePanelFolded, showLogoOnlyInMobile = false } = this.props;
+    const { children, isSidePanelFolded } = this.props;
     const style = isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : {};
     return (
       <div className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })} style={style}>
-        <div className={'side-panel-north'}>
-          <Logo
-            onCloseSidePanel={this.props.onCloseSidePanel}
-            showLogoOnlyInMobile={showLogoOnlyInMobile}
-          />
-        </div>
+        <MediaQuery query="(max-width: 767.8px)">
+          <div className='side-panel-north'>
+            <Logo onCloseSidePanel={this.props.onCloseSidePanel} />
+          </div>
+        </MediaQuery>
         <div className="side-panel-center">
           {children ? children : (
             <MainSideNav