implemented the confidential render for mobile

src/client/js/components/Navbar/GrowiNavbar.jsx

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
+import { Tooltip } from 'reactstrap';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '../../services/NavigationContainer';
 import AppContainer from '../../services/AppContainer';
 
+
 import GrowiLogo from '../Icons/GrowiLogo';
 
 import PersonalDropdown from './PersonalDropdown';
@@ -14,6 +16,20 @@ import GlobalSearch from './GlobalSearch';
 
 class GrowiNavbar extends React.Component {
 
+  constructor() {
+    super();
+    this.state = {
+      isTooltipOpen: false,
+    };
+    this.onClickTooltipHandler = this.onClickTooltipHandler.bind(this);
+  }
+
+  onClickTooltipHandler() {
+    this.setState({
+      isTooltipOpen: !this.state.isTooltipOpen,
+    });
+  }
+
   renderNavbarRight() {
     const { t, appContainer, navigationContainer } = this.props;
     const { currentUser } = appContainer;
@@ -45,10 +61,20 @@ class GrowiNavbar extends React.Component {
 
     return (
       <li className="nav-item confidential text-light">
-        <i className="icon-info d-md-none" data-toggle="tooltip" title={crowi.confidential} />
+        <i id="confidentialTooltip" className="icon-info d-md-none" data-toggle="tooltip" title={crowi.confidential} />
         <span className="d-none d-md-inline">
           {crowi.confidential}
         </span>
+        <Tooltip
+          placement="bottom"
+          trigger="click"
+          isOpen={this.state.isTooltipOpen}
+          toggle={this.onClickTooltipHandler}
+          target="confidentialTooltip"
+          className="d-md-none"
+        >
+          {crowi.confidential}
+        </Tooltip>
       </li>
     );
   }