refactor(experience): hide nav bar on backup code binding page (#4774)

packages/experience/src/Layout/SecondaryPageLayout/index.tsx

@@ -14,9 +14,10 @@ type Props = {
   title: TFuncKey;
   description?: TFuncKey | ReactElement | '';
   titleProps?: Record<string, unknown>;
-  onSkip?: () => void;
   descriptionProps?: Record<string, unknown>;
   notification?: TFuncKey;
+  onSkip?: () => void;
+  isNavBarHidden?: boolean;
   children: React.ReactNode;
 };
 
@@ -24,9 +25,10 @@ const SecondaryPageLayout = ({
   title,
   description,
   titleProps,
-  onSkip,
   descriptionProps,
   notification,
+  onSkip,
+  isNavBarHidden,
   children,
 }: Props) => {
   const { isMobile } = usePlatform();
@@ -34,7 +36,7 @@ const SecondaryPageLayout = ({
   return (
     <div className={styles.wrapper}>
       <PageMeta titleKey={title} />
-      <NavBar onSkip={onSkip} />
+      <NavBar isHidden={isNavBarHidden} onSkip={onSkip} />
       {isMobile && notification && (
         <InlineNotification message={notification} className={styles.notification} />
       )}

packages/experience/src/components/NavBar/index.module.scss

@@ -43,6 +43,10 @@
   .navButton > span {
     display: none;
   }
+
+  .navBar.hidden {
+    visibility: hidden;
+  }
 }
 
 :global(body.desktop) {
@@ -59,4 +63,8 @@
       text-decoration: underline;
     }
   }
+
+  .navBar.hidden {
+    display: none;
+  }
 }

packages/experience/src/components/NavBar/index.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -11,11 +12,12 @@ import * as styles from './index.module.scss';
 type Props = {
   title?: string;
   type?: 'back' | 'close';
+  isHidden?: boolean;
   onClose?: () => void;
   onSkip?: () => void;
 };
 
-const NavBar = ({ title, type = 'back', onClose, onSkip }: Props) => {
+const NavBar = ({ title, type = 'back', isHidden, onClose, onSkip }: Props) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
 
@@ -38,7 +40,7 @@ const NavBar = ({ title, type = 'back', onClose, onSkip }: Props) => {
   }, [isClosable, navigate, onClose]);
 
   return (
-    <div className={styles.navBar}>
+    <div className={classNames(styles.navBar, isHidden && styles.hidden)}>
       <div
         role="button"
         tabIndex={0}

packages/experience/src/pages/MfaBinding/BackupCodeBinding/index.tsx

@@ -31,6 +31,7 @@ const BackupCodeBinding = () => {
 
   return (
     <SecondaryPageLayout
+      isNavBarHidden
       title="mfa.save_backup_code"
       description="mfa.save_backup_code_description"
     >