update title when jump from view to folder (#6886)

* update title when jump from view to folder

* reset title when leave view page

* remove warnings

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
Co-authored-by: Michael An <2331806369@qq.com>

frontend/src/app.js

@@ -3,7 +3,7 @@ import ReactDom from 'react-dom';
 import { Router, navigate } from '@gatsbyjs/reach-router';
 import MediaQuery from 'react-responsive';
 import { Modal } from 'reactstrap';
-import { siteRoot } from './utils/constants';
+import { siteRoot, siteTitle, mediaUrl, faviconPath } from './utils/constants';
 import { Utils, isMobile } from './utils/utils';
 import SystemNotification from './components/system-notification';
 import EventBus from './components/common/event-bus';
@@ -105,6 +105,12 @@ class App extends Component {
     this.setState({ currentTab: currentTab });
   }
 
+  resetTitle = () => {
+    const favicon = document.getElementById('favicon');
+    favicon.href = `${mediaUrl}${faviconPath}`;
+    document.title = siteTitle;
+  };
+
   onCloseSidePanel = () => {
     this.setState({
       isSidePanelClosed: !this.state.isSidePanelClosed
@@ -162,6 +168,7 @@ class App extends Component {
     if (!Utils.isDesktop() && !this.state.isSidePanelClosed) {
       this.setState({ isSidePanelClosed: true });
     }
+    this.resetTitle();
   };
 
   generatorPrefix = (tabName, groupID) => {
@@ -337,6 +344,7 @@ class App extends Component {
                 isSidePanelFolded={isSidePanelFolded}
                 onTabNavClick={this.tabItemClick}
                 eventBus={this.eventBus}
+                resetTitle={this.resetTitle}
               />
             </Router>
           </div>

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -452,6 +452,7 @@ class LibContentView extends React.Component {
 
   showDir = (path) => {
     let repoID = this.props.repoID;
+    this.props.resetTitle();
 
     if (!this.state.isSessionExpired) {
       // update state
@@ -2439,7 +2440,7 @@ class LibContentView extends React.Component {
             />
           )}
           <MediaQuery query="(max-width: 767.8px)">
-            <Modal zIndex="1030" isOpen={!Utils.isDesktop() && this.state.isTreePanelShown} toggle={this.toggleTreePanel} contentClassName="d-none"></Modal>
+            <Modal zIndex="1030" isOpen={!isDesktop && this.state.isTreePanelShown} toggle={this.toggleTreePanel} contentClassName="d-none"></Modal>
           </MediaQuery>
         </CollaboratorsProvider>
       </MetadataProvider>