feat: Add mobile settings submenu

mozilla · Nov 21, 2024 · 04507b2 · 04507b2
1 parent b833165
commit 04507b2
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 31 deletions.
diff --git a/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/View.tsx b/src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/View.tsx
@@ -13,7 +13,10 @@ import { OpenInNew } from "../../../../../../components/server/Icons";
 import { EmailListing } from "./EmailListing";
 import { EmailAddressAdder } from "./EmailAddressAdder";
 import { AlertAddressForm } from "./AlertAddressForm";
-import { CONST_MAX_NUM_ADDRESSES } from "../../../../../../../constants";
+import {
+  CONST_MAX_NUM_ADDRESSES,
+  CONST_SETTINGS_TAB_SLUGS,
+} from "../../../../../../../constants";
 import { TelemetryLink } from "../../../../../../components/client/TelemetryLink";
 import { hasPremium } from "../../../../../../functions/universal/user";
 import { sanitizeEmailRow } from "../../../../../../functions/server/sanitize";
@@ -25,7 +28,7 @@ import { ExperimentData } from "../../../../../../../telemetry/generated/nimbus/
 import { SubscriberEmailPreferencesOutput } from "../../../../../../../db/tables/subscriber_email_preferences";
 import { SettingsContent } from "./SettingsContent";
 
-export type TabType = "edit-info" | "notifications" | "manage-account";
+export type TabType = (typeof CONST_SETTINGS_TAB_SLUGS)[number];
 
 export type Props = {
   l10n: ExtendedReactLocalization;

diff --git a/.../(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/[[...slug]]/page.tsx b/.../(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/[[...slug]]/page.tsx
@@ -26,12 +26,7 @@ import { getSubscriberById } from "../../../../../../../../db/tables/subscribers
 import { checkSession } from "../../../../../../../functions/server/checkSession";
 import { checkUserHasMonthlySubscription } from "../../../../../../../functions/server/user";
 import { getEmailPreferenceForPrimaryEmail } from "../../../../../../../../db/tables/subscriber_email_preferences";
-
-export const settingsTabSlugs = [
-  "edit-info",
-  "notifications",
-  "manage-account",
-];
+import { CONST_SETTINGS_TAB_SLUGS } from "../../../../../../../../constants";
 
 type Props = {
   params: {
@@ -50,12 +45,12 @@ export default async function SettingsPage({ params, searchParams }: Props) {
   }
 
   const { slug } = params;
-  const defaultTab = settingsTabSlugs[0];
-  const activeTab = slug?.[0] ?? defaultTab;
+  const defaultTab = CONST_SETTINGS_TAB_SLUGS[0];
+  const activeTab = (slug?.[0] ?? defaultTab) as TabType;
   // Only allow the tab slugs. Otherwise: Redirect to the default settings route.
   if (
     typeof slug !== "undefined" &&
-    (!settingsTabSlugs.includes(activeTab) || slug.length >= 2)
+    (!CONST_SETTINGS_TAB_SLUGS.includes(activeTab) || slug.length >= 2)
   ) {
     return redirect(`/user/settings/${defaultTab}`);
   }
@@ -133,7 +128,7 @@ export default async function SettingsPage({ params, searchParams }: Props) {
       experimentData={experimentData}
       lastScanDate={lastOneRepScan?.created_at}
       isMonthlySubscriber={isMonthlySubscriber}
-      activeTab={activeTab as TabType}
+      activeTab={activeTab}
     />
   );
 }
diff --git a/src/app/(proper_react)/(redesign)/MobileShell.module.scss b/src/app/(proper_react)/(redesign)/MobileShell.module.scss
@@ -134,6 +134,32 @@
             outline: none;
           }
         }
+
+        .subMenu {
+          padding-left: $layout-xs;
+
+          // The `a` and `a:visited` violate this rule, but are safe:
+          // stylelint-disable-next-line no-descending-specificity
+          a,
+          a:visited {
+            border-top: none;
+
+            &.isActive {
+              color: $color-purple-40;
+              text-decoration: underline;
+
+              &:hover {
+                color: $color-purple-70;
+              }
+            }
+
+            &:hover {
+              color: $color-grey-40;
+              background: none;
+              text-decoration: underline;
+            }
+          }
+        }
       }
 
       .premiumCta {

diff --git a/src/app/(proper_react)/(redesign)/MobileShell.tsx b/src/app/(proper_react)/(redesign)/MobileShell.tsx
@@ -17,6 +17,7 @@ import { useL10n } from "../../hooks/l10n";
 import { PageLink } from "./PageLink";
 import { useTelemetry } from "../../hooks/useTelemetry";
 import { usePathname } from "next/navigation";
+import { CONST_SETTINGS_TAB_SLUGS } from "../../../constants";
 
 export type Props = {
   countryCode: string;
@@ -134,15 +135,6 @@ export const MobileShell = (props: Props) => {
                   {l10n.getString("main-nav-link-dashboard-label")}
                 </PageLink>
               </li>
-              <li key="settings">
-                <PageLink
-                  href="/user/settings"
-                  activeClassName={styles.isActive}
-                  hasTelemetry={{ link_id: "navigation_settings" }}
-                >
-                  {l10n.getString("main-nav-link-settings-label")}
-                </PageLink>
-              </li>
               {props.countryCode === "us" && (
                 <li key="how-it-works">
                   <PageLink
@@ -165,6 +157,32 @@ export const MobileShell = (props: Props) => {
                   {l10n.getString("main-nav-link-faq-label")}
                 </PageLink>
               </li>
+              <li key="settings">
+                <PageLink
+                  href="/user/settings"
+                  activeClassName={styles.isActive}
+                  hasTelemetry={{ link_id: "navigation_settings" }}
+                >
+                  {l10n.getString("main-nav-link-settings-label")}
+                </PageLink>
+                <ul className={styles.subMenu}>
+                  {CONST_SETTINGS_TAB_SLUGS.map((submenuKey) => {
+                    return (
+                      <li key={submenuKey}>
+                        <PageLink
+                          href={`/user/settings/${submenuKey}`}
+                          activeClassName={styles.isActive}
+                          hasTelemetry={{
+                            link_id: `navigation_settings_${submenuKey}`,
+                          }}
+                        >
+                          {l10n.getString(`settings-tab-label-${submenuKey}`)}
+                        </PageLink>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </li>
             </ul>
             <div className={styles.premiumCta}>
               <UpsellBadge

diff --git a/src/app/(proper_react)/(redesign)/PageLink.tsx b/src/app/(proper_react)/(redesign)/PageLink.tsx
@@ -20,7 +20,9 @@ export const PageLink = (props: Props) => {
   const pathName = usePathname();
   // TODO: Add unit test when changing this code:
   /* c8 ignore next */
-  const activeClassSuffix = pathName === otherProps.href ? activeClassName : "";
+  const activeClassSuffix = pathName.startsWith(otherProps.href as string)
+    ? activeClassName
+    : "";
 
   const className = `${otherProps.className ?? ""} ${
     // TODO: Add unit test when changing this code:

diff --git a/src/app/(proper_react)/(redesign)/Shell.tsx b/src/app/(proper_react)/(redesign)/Shell.tsx
@@ -68,15 +68,6 @@ export const Shell = (props: Props) => {
                   {l10n.getString("main-nav-link-dashboard-label")}
                 </PageLink>
               </li>
-              <li key="settings">
-                <PageLink
-                  href="/user/settings"
-                  activeClassName={styles.isActive}
-                  hasTelemetry={{ link_id: "navigation_settings" }}
-                >
-                  {l10n.getString("main-nav-link-settings-label")}
-                </PageLink>
-              </li>
               {props.countryCode === "us" && (
                 <li key="how-it-works">
                   <PageLink
@@ -99,6 +90,15 @@ export const Shell = (props: Props) => {
                   {l10n.getString("main-nav-link-faq-label")}
                 </PageLink>
               </li>
+              <li key="settings">
+                <PageLink
+                  href="/user/settings"
+                  activeClassName={styles.isActive}
+                  hasTelemetry={{ link_id: "navigation_settings" }}
+                >
+                  {l10n.getString("main-nav-link-settings-label")}
+                </PageLink>
+              </li>
             </ul>
           </nav>
           <div className={styles.content}>

diff --git a/src/constants.ts b/src/constants.ts
@@ -38,3 +38,8 @@ export const CONST_MOZILLA_ACCOUNTS_SETTINGS_PROMO_SEARCH_PARAMS = {
   utm_campaign: "settings-promo",
   utm_content: "monitor-free",
 } as const;
+export const CONST_SETTINGS_TAB_SLUGS = [
+  "edit-info",
+  "notifications",
+  "manage-account",
+] as const;