add About dialog (#6972)

* add About dialog

* lint fix

frontend/src/components/main-side-nav-folded.js

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import ModalPortal from './modal-portal';
 import { Link } from '@gatsbyjs/reach-router';
 import { gettext, siteRoot, canInvitePeople, enableTC, sideNavFooterCustomHtml,
   isDocs, isPro, isDBSqlite3, customNavItems, mediaUrl, curNoteMsg } from '../utils/constants';
 import { SIDE_PANEL_FOLDED_WIDTH, SUB_NAV_ITEM_HEIGHT } from '../constants';
 import Tip from './side-nav-icon-tip';
 import FilesSubNav from '../components/files-sub-nav';
+import AboutDialog from './dialog/about-dialog';
 import { seafileAPI } from '../utils/seafile-api';
 import { Utils } from '../utils/utils';
 import Group from '../models/group';
@@ -28,7 +30,8 @@ class MainSideNavFolded extends React.Component {
     super(props);
     this.state = {
       groupItems: [],
-      isFilesSubNavShown: false
+      isFilesSubNavShown: false,
+      isAboutDialogShow: false,
     };
   }
 
@@ -92,58 +95,64 @@ class MainSideNavFolded extends React.Component {
     return this.props.currentTab === tab ? 'active' : '';
   };
 
+  toggleAboutDialog = (e) => {
+    e.preventDefault();
+    this.setState({ isAboutDialogShow: !this.state.isAboutDialogShow });
+  };
+
   render() {
     let showActivity = isDocs || isPro || !isDBSqlite3;
     const { groupItems, isFilesSubNavShown } = this.state;
     return (
-      <div className='side-nav-folded-container h-100 position-relative'>
-        {/* FOLDED SIDE NAV FILES */}
-        <div className="side-nav side-nav-folded position-relative" style={{ zIndex: FOLDED_SIDE_NAV_FILES }}>
-          <div className='side-nav-con p-0'>
-            <div className="nav nav-pills nav-container">
-              <ul
-                id="files-sub-nav"
-                className="sub-nav position-fixed rounded border shadow p-4 o-auto"
-                style={{
-                  'left': isFilesSubNavShown ? SIDE_PANEL_FOLDED_WIDTH + 4 : '-240px',
-                  'maxHeight': SUB_NAV_ITEM_HEIGHT * 10 + 16 * 2,
-                  'opacity': isFilesSubNavShown ? 1 : 0,
-                }}
-                ref={ref => this.filesSubNav = ref}
-                onMouseLeave={this.closeSubNav}
-              >
-                <FilesSubNav
-                  groupItems={groupItems}
-                  tabItemClick={this.tabItemClick}
-                  currentTab={this.props.currentTab}
-                />
-              </ul>
+      <Fragment>
+        <div className='side-nav-folded-container h-100 position-relative'>
+          {/* FOLDED SIDE NAV FILES */}
+          <div className="side-nav side-nav-folded position-relative" style={{ zIndex: FOLDED_SIDE_NAV_FILES }}>
+            <div className='side-nav-con p-0'>
+              <div className="nav nav-pills nav-container">
+                <ul
+                  id="files-sub-nav"
+                  className="sub-nav position-fixed rounded border shadow p-4 o-auto"
+                  style={{
+                    'left': isFilesSubNavShown ? SIDE_PANEL_FOLDED_WIDTH + 4 : '-240px',
+                    'maxHeight': SUB_NAV_ITEM_HEIGHT * 10 + 16 * 2,
+                    'opacity': isFilesSubNavShown ? 1 : 0,
+                  }}
+                  ref={ref => this.filesSubNav = ref}
+                  onMouseLeave={this.closeSubNav}
+                >
+                  <FilesSubNav
+                    groupItems={groupItems}
+                    tabItemClick={this.tabItemClick}
+                    currentTab={this.props.currentTab}
+                  />
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
-        {/* FOLDED SIDE NAVS */}
-        <div className="side-nav side-nav-folded h-100 position-relative" style={{ zIndex: FOLDED_SIDE_NAV }}>
-          <div className='side-nav-con d-flex flex-column'>
-            <ul className="nav nav-pills flex-column nav-container">
-              <li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
-                <Link
-                  to={ siteRoot + 'libraries/' }
-                  className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
-                  onClick={(e) => this.tabItemClick(e, 'libraries')}
-                  onMouseEnter={this.openSubNav}
-                >
-                  <span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span>
-                </Link>
-              </li>
+          {/* FOLDED SIDE NAVS */}
+          <div className="side-nav side-nav-folded h-100 position-relative" style={{ zIndex: FOLDED_SIDE_NAV }}>
+            <div className='side-nav-con d-flex flex-column'>
+              <ul className="nav nav-pills flex-column nav-container">
+                <li className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
+                  <Link
+                    to={ siteRoot + 'libraries/' }
+                    className={`nav-link ellipsis ${this.getActiveClass('libraries')}`}
+                    onClick={(e) => this.tabItemClick(e, 'libraries')}
+                    onMouseEnter={this.openSubNav}
+                  >
+                    <span className="sf3-font-files sf3-font mr-0" aria-hidden="true"></span>
+                  </Link>
+                </li>
 
-              <li className={`nav-item ${this.getActiveClass('starred')}`} onMouseEnter={this.closeSubNav}>
-                <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
-                  <span className="sf3-font-starred sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-starred"></span>
-                  <Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
-                </Link>
-              </li>
+                <li className={`nav-item ${this.getActiveClass('starred')}`} onMouseEnter={this.closeSubNav}>
+                  <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} onClick={(e) => this.tabItemClick(e, 'starred')}>
+                    <span className="sf3-font-starred sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-starred"></span>
+                    <Tip target="main-side-nav-folded-starred" text={gettext('Favorites')} />
+                  </Link>
+                </li>
 
-              {showActivity &&
+                {showActivity &&
                 <>
                   <li className={`nav-item ${this.getActiveClass('dashboard')}`} onMouseEnter={this.closeSubNav}>
                     <Link
@@ -156,20 +165,20 @@ class MainSideNavFolded extends React.Component {
                     </Link>
                   </li>
                 </>
-              }
+                }
 
-              <li className={`nav-item ${this.getActiveClass('published')}`} onMouseEnter={this.closeSubNav}>
-                <Link
-                  className={`nav-link ellipsis ${this.getActiveClass('published')}`}
-                  to={siteRoot + 'published/'}
-                  onClick={(e) => this.tabItemClick(e, 'published')}
-                >
-                  <span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span>
-                  <Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
-                </Link>
-              </li>
+                <li className={`nav-item ${this.getActiveClass('published')}`} onMouseEnter={this.closeSubNav}>
+                  <Link
+                    className={`nav-link ellipsis ${this.getActiveClass('published')}`}
+                    to={siteRoot + 'published/'}
+                    onClick={(e) => this.tabItemClick(e, 'published')}
+                  >
+                    <span className="sf3-font-wiki sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-wikis"></span>
+                    <Tip target="main-side-nav-folded-wikis" text={gettext('Wikis')} />
+                  </Link>
+                </li>
 
-              {canInvitePeople &&
+                {canInvitePeople &&
                 <li className={`nav-item ${this.getActiveClass('invitations')}`} onMouseEnter={this.closeSubNav}>
                   <Link
                     className={`nav-link ellipsis ${this.getActiveClass('invitations')}`}
@@ -180,9 +189,9 @@ class MainSideNavFolded extends React.Component {
                     <Tip target="main-side-nav-folded-invitations" text={gettext('Invite Guest')} />
                   </Link>
                 </li>
-              }
+                }
 
-              {customNavItems &&
+                {customNavItems &&
                 customNavItems.map((item, idx) => {
                   return (
                     <li key={idx} className='nav-item'>
@@ -192,20 +201,20 @@ class MainSideNavFolded extends React.Component {
                     </li>
                   );
                 })
-              }
-            </ul>
+                }
+              </ul>
 
-            {sideNavFooterCustomHtml ?
-              <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
-              :
-              <ul className="nav nav-pills flex-column nav-container">
-                <li className='nav-item'>
-                  <a className='nav-link' href={siteRoot + 'help/'} title={gettext('Help')}>
-                    <span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span>
-                    <Tip target="main-side-nav-folded-help" text={gettext('Help')} />
-                  </a>
-                </li>
-                {enableTC &&
+              {sideNavFooterCustomHtml ?
+                <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
+                :
+                <ul className="nav nav-pills flex-column nav-container">
+                  <li className='nav-item'>
+                    <a className='nav-link' href={siteRoot + 'help/'} title={gettext('Help')}>
+                      <span className="sf3-font-help sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-help"></span>
+                      <Tip target="main-side-nav-folded-help" text={gettext('Help')} />
+                    </a>
+                  </li>
+                  {enableTC &&
                   <>
                     <li className='nav-item'>
                       <a href={`${siteRoot}terms/`} className="nav-link">
@@ -214,24 +223,36 @@ class MainSideNavFolded extends React.Component {
                       </a>
                     </li>
                   </>
-                }
-                <li className='nav-item'>
-                  <a href={siteRoot + 'download_client_program/'} className="nav-link">
-                    <span className="sf3-font-devices sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-clients"></span>
-                    <Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
-                  </a>
-                </li>
-              </ul>
-            }
-            <div
-              className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center"
-              onClick={this.props.toggleFoldSideNav}
-            >
-              <img src={`${mediaUrl}img/open-sidebar.svg`} width="20" alt="" title={gettext('Unfold the sidebar')} />
+                  }
+                  <li className='nav-item'>
+                    <a href={siteRoot + 'download_client_program/'} className="nav-link">
+                      <span className="sf3-font-devices sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-clients"></span>
+                      <Tip target="main-side-nav-folded-clients" text={gettext('Clients')} />
+                    </a>
+                  </li>
+                  <li className='nav-item'>
+                    <a href="#" className="nav-link" onClick={this.toggleAboutDialog}>
+                      <span className="sf3-font-about sf3-font mr-0" aria-hidden="true" id="main-side-nav-folded-about"></span>
+                      <Tip target="main-side-nav-folded-about" text={gettext('About')} />
+                    </a>
+                  </li>
+                </ul>
+              }
+              <div
+                className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center"
+                onClick={this.props.toggleFoldSideNav}
+              >
+                <img src={`${mediaUrl}img/open-sidebar.svg`} width="20" alt="" title={gettext('Unfold the sidebar')} />
+              </div>
             </div>
           </div>
         </div>
-      </div>
+        {this.state.isAboutDialogShow && (
+          <ModalPortal>
+            <AboutDialog onCloseAboutDialog={this.toggleAboutDialog} />
+          </ModalPortal>
+        )}
+      </Fragment>
     );
   }
 }

frontend/src/components/main-side-nav.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import ModalPortal from './modal-portal';
 import { Link } from '@gatsbyjs/reach-router';
 import {
   gettext, siteRoot, canAddGroup, canAddRepo, canShareRepo,
@@ -12,6 +13,7 @@ import { Utils } from '../utils/utils';
 import Group from '../models/group';
 import toaster from './toast';
 import CreateGroupDialog from '../components/dialog/create-group-dialog';
+import AboutDialog from './dialog/about-dialog';
 import FilesSubNav from '../components/files-sub-nav';
 import { SUB_NAV_ITEM_HEIGHT } from '../constants';
 
@@ -27,6 +29,7 @@ class MainSideNav extends React.Component {
 
     this.state = {
       filesNavUnfolded: false,
+      isAboutDialogShow: false,
       sharedExtended: false,
       groupItems: [],
       isCreateGroupDialogOpen: false,
@@ -200,105 +203,121 @@ class MainSideNav extends React.Component {
     });
   };
 
+  toggleAboutDialog = (e) => {
+    e.preventDefault();
+    this.setState({ isAboutDialogShow: !this.state.isAboutDialogShow });
+  };
+
   render() {
     let showActivity = isDocs || isPro || !isDBSqlite3;
     const { filesNavUnfolded, groupItems } = this.state;
     return (
-      <div className="side-nav">
-        <div className={'side-nav-con d-flex flex-column'}>
-          <h2 className="mb-2 px-2 font-weight-normal heading">{gettext('Workspace')}</h2>
-          <ul className="nav nav-pills flex-column nav-container">
-            <li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
-              <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
-                <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Files')}</span>
-                <span className={`toggle-icon sf3-font sf3-font-down ${filesNavUnfolded ? '' : 'rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
-              </Link>
-              <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{ height: filesNavUnfolded ? this.filesNavHeight : 0, opacity: filesNavUnfolded ? 1 : 0 }}>
-                <FilesSubNav
-                  groupItems={groupItems}
-                  tabItemClick={this.tabItemClick}
-                  currentTab={this.props.currentTab}
-                />
-                {this.renderAddGroup()}
-              </ul>
-            </li>
+      <Fragment>
+        <div className="side-nav">
+          <div className={'side-nav-con d-flex flex-column'}>
+            <h2 className="mb-2 px-2 font-weight-normal heading">{gettext('Workspace')}</h2>
+            <ul className="nav nav-pills flex-column nav-container">
+              <li id="files" className={`nav-item flex-column ${this.getActiveClass('libraries')}`}>
+                <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
+                  <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Files')}</span>
+                  <span className={`toggle-icon sf3-font sf3-font-down ${filesNavUnfolded ? '' : 'rotate-90'}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
+                </Link>
+                <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{ height: filesNavUnfolded ? this.filesNavHeight : 0, opacity: filesNavUnfolded ? 1 : 0 }}>
+                  <FilesSubNav
+                    groupItems={groupItems}
+                    tabItemClick={this.tabItemClick}
+                    currentTab={this.props.currentTab}
+                  />
+                  {this.renderAddGroup()}
+                </ul>
+              </li>
 
-            <li className={`nav-item ${this.getActiveClass('starred')}`}>
-              <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
-                <span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Favorites')}</span>
-              </Link>
-            </li>
-            {showActivity &&
+              <li className={`nav-item ${this.getActiveClass('starred')}`}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
+                  <span className="sf3-font-starred sf3-font" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Favorites')}</span>
+                </Link>
+              </li>
+              {showActivity &&
               <li className={`nav-item ${this.getActiveClass('dashboard')}`}>
                 <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
                   <span className="sf3-font-activities sf3-font" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Activities')}</span>
                 </Link>
               </li>
-            }
-            <li className={`nav-item ${this.getActiveClass('published')}`}>
-              <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Wikis')} onClick={(e) => this.tabItemClick(e, 'published')}>
-                <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Wikis')}</span>
-              </Link>
-            </li>
-            {canInvitePeople &&
-            <li className={`nav-item ${this.getActiveClass('invitations')}`}>
-              <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite Guest')} onClick={(e) => this.tabItemClick(e, 'invitations')}>
-                <span className="sf3-font-invite-visitors sf3-font" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Invite Guest')}</span>
-              </Link>
-            </li>
-            }
-            <li id="share-admin-nav" className='nav-item flex-column'>
-              <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
-                <span className="sf3-font-wrench sf3-font" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Share Admin')}</span>
-                <span className={`toggle-icon sf3-font sf3-font-down ${this.state.sharedExtended ? '' : 'rotate-90'}`} aria-hidden="true"></span>
-              </a>
-              {this.renderSharedAdmin()}
-            </li>
-            {customNavItems && this.renderCustomNavItems()}
-          </ul>
-
-          <h2 className="mb-2 pt-1 px-2 font-weight-normal heading">{gettext('Help and resources')}</h2>
-          {sideNavFooterCustomHtml ? (
-            <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
-          ) : (
-            <ul className="nav nav-pills flex-column nav-container">
-              <li className='nav-item'>
-                <a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
-                  <span className="sf3-font-help sf3-font" aria-hidden="true"></span>
-                  <span className="nav-text">{gettext('Help')}</span>
-                </a>
+              }
+              <li className={`nav-item ${this.getActiveClass('published')}`}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Wikis')} onClick={(e) => this.tabItemClick(e, 'published')}>
+                  <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Wikis')}</span>
+                </Link>
               </li>
-              {enableTC &&
+              {canInvitePeople &&
+              <li className={`nav-item ${this.getActiveClass('invitations')}`}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite Guest')} onClick={(e) => this.tabItemClick(e, 'invitations')}>
+                  <span className="sf3-font-invite-visitors sf3-font" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Invite Guest')}</span>
+                </Link>
+              </li>
+              }
+              <li id="share-admin-nav" className='nav-item flex-column'>
+                <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
+                  <span className="sf3-font-wrench sf3-font" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Share Admin')}</span>
+                  <span className={`toggle-icon sf3-font sf3-font-down ${this.state.sharedExtended ? '' : 'rotate-90'}`} aria-hidden="true"></span>
+                </a>
+                {this.renderSharedAdmin()}
+              </li>
+              {customNavItems && this.renderCustomNavItems()}
+            </ul>
+
+            <h2 className="mb-2 pt-1 px-2 font-weight-normal heading">{gettext('Help and resources')}</h2>
+            {sideNavFooterCustomHtml ? (
+              <div className='side-nav-footer' dangerouslySetInnerHTML={{ __html: sideNavFooterCustomHtml }}></div>
+            ) : (
+              <ul className="nav nav-pills flex-column nav-container">
+                <li className='nav-item'>
+                  <a className={'nav-link'} href={siteRoot + 'help/'} title={gettext('Help')}>
+                    <span className="sf3-font-help sf3-font" aria-hidden="true"></span>
+                    <span className="nav-text">{gettext('Help')}</span>
+                  </a>
+                </li>
+                {enableTC &&
                 <li className='nav-item'>
                   <a href={`${siteRoot}terms/`} className="nav-link">
                     <span className="sf3-font-terms sf3-font" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Terms')}</span>
                   </a>
                 </li>
-              }
-              <li className='nav-item'>
-                <a href={siteRoot + 'download_client_program/'} className="nav-link">
-                  <span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
-                  <span className="nav-text">{gettext('Clients')}</span>
-                </a>
-              </li>
-            </ul>
-          )
-          }
-
-          <div className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center" onClick={this.props.toggleFoldSideNav}>
-            <img className="mr-2" src={`${mediaUrl}img/close-sidebar.svg`} width="20" alt="" />
-            <span>{gettext('Fold the sidebar')}</span>
+                }
+                <li className='nav-item'>
+                  <a href={siteRoot + 'download_client_program/'} className="nav-link">
+                    <span className="sf3-font-devices sf3-font" aria-hidden="true"></span>
+                    <span className="nav-text">{gettext('Clients')}</span>
+                  </a>
+                </li>
+                <li className='nav-item'>
+                  <a href="#" className="nav-link" onClick={this.toggleAboutDialog}>
+                    <span className="sf3-font-about sf3-font" aria-hidden="true"></span>
+                    <span className="nav-text">{gettext('About')}</span>
+                  </a>
+                </li>
+              </ul>
+            )
+            }
+            <div className="side-nav-bottom-toolbar d-none d-md-flex mt-auto px-2 rounded flex-shrink-0 align-items-center" onClick={this.props.toggleFoldSideNav}>
+              <img className="mr-2" src={`${mediaUrl}img/close-sidebar.svg`} width="20" alt="" />
+              <span>{gettext('Fold the sidebar')}</span>
+            </div>
           </div>
-
         </div>
-      </div>
+        {this.state.isAboutDialogShow && (
+          <ModalPortal>
+            <AboutDialog onCloseAboutDialog={this.toggleAboutDialog} />
+          </ModalPortal>
+        )}
+      </Fragment>
     );
   }
 }