tab を dropdown list 化

apps/app/src/client/components/Admin/Notification/NotificationSetting.jsx

@@ -14,7 +14,7 @@ import { toastError } from '~/client/util/toastr';
 import { toArrayIfNot } from '~/utils/array-utils';
 import loggerFactory from '~/utils/logger';
 
-import { CustomNavTab } from '../../CustomNavigation/CustomNav';
+import CustomNav from '../../CustomNavigation/CustomNav';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 
@@ -155,7 +155,13 @@ function NotificationSetting(props) {
 
       <h2 className="admin-setting-header mt-5">{t('notification_settings.notification_settings')}</h2>
 
-      <CustomNavTab activeTab={activeTab} navTabMapping={navTabMapping} onNavSelected={switchActiveTab} hideBorderBottom />
+      <CustomNav
+        activeTab={activeTab}
+        navTabMapping={navTabMapping}
+        onNavSelected={switchActiveTab}
+        hideBorderBottom
+        breakpointToSwitchDropdownDown="md"
+      />
 
       <TabContent activeTab={activeTab} className="p-5">
         <TabPane tabId="user_trigger_notification">

apps/app/src/client/components/CustomNavigation/CustomNav.module.scss

@@ -14,5 +14,8 @@
     border-bottom: 3px solid;
     transition: 0.3s ease-in-out;
   }
+}
 
+.dropdown-menu :global {
+  width: 100%;
 }

apps/app/src/client/components/CustomNavigation/CustomNav.tsx

@@ -61,7 +61,7 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
           { Icon != null && <Icon /> } {i18n}
         </span>
       </button>
-      <div className="dropdown-menu dropdown-menu-right">
+      <div className={`dropdown-menu dropdown-menu-right ${styles['dropdown-menu']}`}>
         {Object.entries(navTabMapping).map(([key, value]) => {
 
           const isActive = activeTab === key;
@@ -162,8 +162,8 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
   const inactiveClassnames: string[] = [];
   if (breakpointToHideInactiveTabsDown != null) {
     const breakpointOneLevelLarger = getBreakpointOneLevelLarger(breakpointToHideInactiveTabsDown);
-    inactiveClassnames.push('d-none');
-    inactiveClassnames.push(`d-${breakpointOneLevelLarger}-block`);
+    // inactiveClassnames.push('d-none');
+    // inactiveClassnames.push(`d-${breakpointOneLevelLarger}-block`);
   }
 
   return (

apps/app/src/client/components/DescendantsPageListModal.tsx

@@ -11,7 +11,7 @@ import {
 import { useIsSharedUser } from '~/stores-universal/context';
 import { useDescendantsPageListModal } from '~/stores/modal';
 
-import { CustomNavTab } from './CustomNavigation/CustomNav';
+import CustomNav, { CustomNavTab } from './CustomNavigation/CustomNav';
 import CustomTabContent from './CustomNavigation/CustomTabContent';
 import type { DescendantsPageListProps } from './DescendantsPageList';
 import ExpandOrContractButton from './ExpandOrContractButton';
@@ -94,10 +94,11 @@ export const DescendantsPageListModal = (): JSX.Element => {
       className={`grw-descendants-page-list-modal ${styles['grw-descendants-page-list-modal']} ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
       <ModalHeader className="p-0" toggle={close} close={buttons}>
-        <CustomNavTab
+        <CustomNav
           activeTab={activeTab}
           navTabMapping={navTabMapping}
           breakpointToHideInactiveTabsDown="md"
+          breakpointToSwitchDropdownDown="md"
           onNavSelected={v => setActiveTab(v)}
           hideBorderBottom
         />