chore: Fix mobile shell menu

mozilla · Dec 19, 2024 · 6c396f7 · 6c396f7
1 parent 248d198
commit 6c396f7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 30 deletions.
diff --git a/config/nimbus.yaml b/config/nimbus.yaml
@@ -115,8 +115,8 @@ features:
     defaults:
       - channel: local
         value: {
-          "enabled": false,
-          "variant": default,
+          "enabled": true,
+          "variant": redesign,
         }
       - channel: staging
         value: {

diff --git a/src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss b/src/app/(proper_react)/(redesign)/(public)/PublicShell.module.scss
@@ -44,8 +44,10 @@
     flex-shrink: 0;
   }
 
-  @media screen and (max-width: $screen-xl) {
-    display: none;
+  &.navDesktop {
+    @media screen and (max-width: $screen-xl) {
+      display: none;
+    }
   }
 }
 

diff --git a/src/app/(proper_react)/(redesign)/(public)/PublicShell.tsx b/src/app/(proper_react)/(redesign)/(public)/PublicShell.tsx
@@ -29,40 +29,50 @@ export type Props = {
   experimentData: ExperimentData;
 };
 
-const PublicMobileShell = (props: Props) => {
-  if (
-    !(
-      props.enabledFeatureFlags.includes("LandingPageRedesign") &&
-      props.experimentData["landing-page-redesign"].enabled &&
-      props.experimentData["landing-page-redesign"].variant === "redesign"
-    )
-  ) {
-    return props.children;
+const PublicMobileShell = (
+  props: Props & {
+    hasLandingPageRedesign: boolean;
+  },
+) => {
+  if (props.hasLandingPageRedesign) {
+    return (
+      <MobileShell
+        countryCode={props.countryCode}
+        enabledFeatureFlags={props.enabledFeatureFlags}
+        fxaSettingsUrl={process.env.FXA_SETTINGS_URL!}
+        monthlySubscriptionUrl={getPremiumSubscriptionUrl({ type: "monthly" })}
+        session={null}
+        subscriptionBillingAmount={getSubscriptionBillingAmount()}
+        yearlySubscriptionUrl={getPremiumSubscriptionUrl({ type: "yearly" })}
+      >
+        {props.children}
+      </MobileShell>
+    );
   }
 
-  return (
-    <MobileShell
-      {...props}
-      session={null}
-      monthlySubscriptionUrl={getPremiumSubscriptionUrl({ type: "monthly" })}
-      yearlySubscriptionUrl={getPremiumSubscriptionUrl({ type: "yearly" })}
-      subscriptionBillingAmount={getSubscriptionBillingAmount()}
-      fxaSettingsUrl={process.env.FXA_SETTINGS_URL!}
-    />
-  );
+  return props.children;
 };
 
 export const PublicShell = (props: Props) => {
+  const hasLandingPageRedesign =
+    props.enabledFeatureFlags.includes("LandingPageRedesign") &&
+    props.experimentData["landing-page-redesign"].enabled &&
+    props.experimentData["landing-page-redesign"].variant === "redesign";
   return (
-    <PublicMobileShell {...props}>
+    <PublicMobileShell
+      {...props}
+      hasLandingPageRedesign={hasLandingPageRedesign}
+    >
       <div className={styles.wrapper}>
         <ToastContainer
           toastClassName={styles.toastBody}
           position="top-center"
           theme="colored"
           autoClose={false}
         />
-        <nav className={styles.nav}>
+        <nav
+          className={`${styles.nav} ${hasLandingPageRedesign ? styles.navDesktop : ""}`}
+        >
           <h1>
             <Link href="/">
               <Image
@@ -72,10 +82,7 @@ export const PublicShell = (props: Props) => {
               />
             </Link>
           </h1>
-          {props.enabledFeatureFlags.includes("LandingPageRedesign") &&
-            props.experimentData["landing-page-redesign"].enabled &&
-            props.experimentData["landing-page-redesign"].variant ===
-              "redesign" && <TopNavBar styles={styles} />}
+          {hasLandingPageRedesign && <TopNavBar styles={styles} />}
           <SignInButton variant="secondary" />
         </nav>
         <div className={styles.content}>{props.children}</div>

diff --git a/src/app/(proper_react)/(redesign)/(public)/layout.tsx b/src/app/(proper_react)/(redesign)/(public)/layout.tsx
@@ -10,10 +10,14 @@ import { getCountryCode } from "../../../functions/server/getCountryCode";
 import { getLocale } from "../../../functions/universal/getLocale";
 import { getExperiments } from "../../../functions/server/getExperiments";
 import { getExperimentationId } from "../../../functions/server/getExperimentationId";
+import { getEnabledFeatureFlags } from "../../../../db/tables/featureFlags";
 
 export default async function Layout(props: { children: ReactNode }) {
   const headersList = headers();
   const countryCode = getCountryCode(headersList);
+  const enabledFeatureFlags = await getEnabledFeatureFlags({
+    isSignedOut: true,
+  });
   const experimentationId = getExperimentationId(null);
   const experimentData = await getExperiments({
     experimentationId,
@@ -26,7 +30,7 @@ export default async function Layout(props: { children: ReactNode }) {
     <PublicShell
       l10n={getL10n()}
       countryCode={countryCode}
-      enabledFeatureFlags={[]}
+      enabledFeatureFlags={enabledFeatureFlags}
       experimentData={experimentData}
     >
       {props.children}