add breakpoint to hide dropdown

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

@@ -33,11 +33,13 @@ type CustomNavDropdownProps = {
   navTabMapping: ICustomNavTabMappings,
   activeTab: string,
   onNavSelected?: (selectedTabKey: string) => void,
+  breakpointToHideDropDown?: Breakpoint,
 };
 
 export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element => {
   const {
     activeTab, navTabMapping, onNavSelected,
+    breakpointToHideDropDown,
   } = props;
 
   const { Icon, i18n } = navTabMapping[activeTab];
@@ -48,10 +50,17 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
     }
   }, [onNavSelected]);
 
+  // Set classes to hide dropdown
+  const dropdownVisibilityClassnames: string[] = [];
+  if (breakpointToHideDropDown != null) {
+    const breakpointOneLevelLarger = getBreakpointOneLevelLarger(breakpointToHideDropDown);
+    dropdownVisibilityClassnames.push(`d-${breakpointOneLevelLarger}-none`);
+  }
+
   return (
     <div className="btn-group">
       <button
-        className="btn btn-outline-primary btn-lg dropdown-toggle text-end"
+        className={`btn btn-outline-primary btn-lg dropdown-toggle text-end ${dropdownVisibilityClassnames.join(' ')}`}
         type="button"
         data-bs-toggle="dropdown"
         aria-haspopup="true"
@@ -160,10 +169,13 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
 
   // determine inactive classes to hide NavItem
   const inactiveClassnames: string[] = [];
+  const slideHrVisibilityClassnames: 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`);
+    // slideHrVisibilityClassnames.push('d-none');
+    // slideHrVisibilityClassnames.push(`d-${breakpointOneLevelLarger}-block`);
   }
 
   return (
@@ -191,7 +203,10 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
         </Nav>
         {navRightElement}
       </div>
-      <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
+      <hr
+        className={`my-0 grw-nav-slide-hr border-none ${slideHrVisibilityClassnames.join(' ')}`}
+        style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%`, display: 'inline-block' }}
+      />
       { !hideBorderBottom && <hr className="my-0 border-top-0 border-bottom" /> }
     </div>
   );

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

@@ -11,7 +11,7 @@ import {
 import { useIsSharedUser } from '~/stores-universal/context';
 import { useDescendantsPageListModal } from '~/stores/modal';
 
-import CustomNav, { CustomNavTab } from './CustomNavigation/CustomNav';
+import { CustomNavDropdown, CustomNavTab } from './CustomNavigation/CustomNav';
 import CustomTabContent from './CustomNavigation/CustomTabContent';
 import type { DescendantsPageListProps } from './DescendantsPageList';
 import ExpandOrContractButton from './ExpandOrContractButton';
@@ -94,16 +94,21 @@ 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}>
-        <CustomNav
+        <CustomNavTab
           activeTab={activeTab}
           navTabMapping={navTabMapping}
           breakpointToHideInactiveTabsDown="md"
-          breakpointToSwitchDropdownDown="md"
           onNavSelected={v => setActiveTab(v)}
           hideBorderBottom
         />
       </ModalHeader>
       <ModalBody>
+        <CustomNavDropdown
+          activeTab={activeTab}
+          navTabMapping={navTabMapping}
+          breakpointToHideDropDown="md"
+          onNavSelected={v => setActiveTab(v)}
+        />
         <CustomTabContent activeTab={activeTab} navTabMapping={navTabMapping} />
       </ModalBody>
     </Modal>