change ThreeStrandedButton.jsx

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { Nav, NavItem, NavLink } from 'reactstrap';
 
 const ThreeStrandedButton = (props) => {
   const { t } = props;
@@ -12,32 +13,55 @@ const ThreeStrandedButton = (props) => {
   }
 
   return (
-    <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
-      <button
-        type="button"
-        className="btn btn-outline-primary view-button"
-        onClick={() => { threeStrandedButtonClickedHandler('view') }}
-      >
-        <i className="icon-control-play icon-fw" />
-        { t('view') }
-      </button>
-      <button
-        type="button"
-        className="btn btn-outline-primary edit-button"
-        onClick={() => { threeStrandedButtonClickedHandler('edit') }}
-      >
-        <i className="icon-note icon-fw" />
-        { t('Edit') }
-      </button>
-      <button
+    <Nav>
+      <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
+        <NavItem>
+          <NavLink
+            href="#view"
+            type="button"
+            className="btn btn-outline-primary view-button"
+            onClick={() => { threeStrandedButtonClickedHandler('view') }}
+          >
+            <i className="icon-control-play icon-fw" />
+            { t('view') }
+          </NavLink>
+        </NavItem>
+
+        <NavItem>
+          <NavLink
+            href="#edit"
+            type="button"
+            className="btn btn-outline-primary edit-button"
+            onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+          >
+            <i className="icon-note icon-fw" />
+            { t('Edit') }
+          </NavLink>
+        </NavItem>
+
+        <NavItem>
+          <NavLink
+            href="#hackmd"
+            type="button"
+            className="btn btn-outline-primary hackmd-button"
+            onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
+          >
+            <i className="icon-note icon-fw" />
+            { t('Edit') }
+          </NavLink>
+        </NavItem>
+        {/* <button
         type="button"
         className="btn btn-outline-primary hackmd-button"
         onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
       >
         <i className="fa fa-fw fa-file-text-o" />
         { t('hackmd.hack_md') }
-      </button>
-    </div>
+      </button> */}
+      </div>
+    </Nav>
+
+
   );
 
 };

src/client/js/components/Page/DisplaySwitcher.jsx

@@ -25,7 +25,6 @@ const DisplaySwitcher = (props) => {
             <Editor />
             <EditorNavbarBottom />
           </>
-          )
         </TabPane>
         <TabPane tabId="hackmd">
           <PageEditorByHackmd />