rename CustomNavigation and make switchable mode

src/client/js/components/CustomNavigation/CustomNavigation.jsx → src/client/js/components/CustomNavigation/CustomNavAndContents.jsx

@@ -1,38 +1,52 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import CustomNav from './CustomNav';
+import CustomNav, { CustomNavTab, CustomNavDropdown } from './CustomNav';
 import CustomTabContent from './CustomTabContent';
 
-const CustomNavigation = (props) => {
+
+const CustomNavAndContents = (props) => {
   const {
-    navTabMapping, defaultTabIndex, tabContentClasses, breakpointToHideInactiveTabsDown,
+    navTabMapping, defaultTabIndex, navigationMode, tabContentClasses, breakpointToHideInactiveTabsDown,
   } = props;
   const [activeTab, setActiveTab] = useState(Object.keys(props.navTabMapping)[defaultTabIndex || 0]);
 
-  return (
-    <React.Fragment>
+  let SelectedNav;
+  switch (navigationMode) {
+    case 'tab':
+      SelectedNav = CustomNavTab;
+      break;
+    case 'dropdown':
+      SelectedNav = CustomNavDropdown;
+      break;
+    case 'both':
+      SelectedNav = CustomNav;
+      break;
+  }
 
-      <CustomNav
+  return (
+    <>
+      <SelectedNav
         activeTab={activeTab}
         navTabMapping={navTabMapping}
         onNavSelected={setActiveTab}
         breakpointToHideInactiveTabsDown={breakpointToHideInactiveTabsDown}
       />
       <CustomTabContent activeTab={activeTab} navTabMapping={navTabMapping} additionalClassNames={tabContentClasses} />
-
-    </React.Fragment>
+    </>
   );
 };
 
-CustomNavigation.propTypes = {
+CustomNavAndContents.propTypes = {
   navTabMapping: PropTypes.object.isRequired,
   defaultTabIndex: PropTypes.number,
+  navigationMode: PropTypes.oneOf(['both', 'tab', 'dropdown']),
   tabContentClasses: PropTypes.arrayOf(PropTypes.string),
   breakpointToHideInactiveTabsDown: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
 };
-CustomNavigation.defaultProps = {
+CustomNavAndContents.defaultProps = {
+  navigationMode: 'tab',
   tabContentClasses: ['p-4'],
 };
 
-export default CustomNavigation;
+export default CustomNavAndContents;