Revert "Merge branch 'topical-main-menu' into next"

This reverts commit 680d71c, reversing changes made to 8cde508.
mdn · Sep 18, 2024 · 92ed562 · 92ed562
1 parent 3d5042d
commit 92ed562
Show file tree

Hide file tree

Showing 13 changed files with 465 additions and 331 deletions.
diff --git a/client/src/ui/atoms/signup-link/index.tsx b/client/src/ui/atoms/signup-link/index.tsx
@@ -10,7 +10,7 @@ export const SignUpLink = ({ toPlans = false, gleanContext = "" }) => {
   const loginUrl = useLoginUrl();
 
   const href = toPlans ? plansUrl : loginUrl;
-  const label = toPlans ? "Upgrade Now" : "Sign up";
+  const label = toPlans ? "Upgrade Now" : "Sign up for free";
   const rel = toPlans ? undefined : "nofollow";
 
   return (

diff --git a/client/src/ui/molecules/guides-menu/index.scss b/client/src/ui/molecules/guides-menu/index.scss
@@ -0,0 +1,23 @@
+@use "sass:color";
+@use "../../vars" as *;
+
+.guides {
+  .submenu .submenu-item-heading {
+    font-size: var(--type-smaller-font-size);
+    font-weight: initial;
+  }
+
+  .desktop-only {
+    display: none;
+  }
+
+  @media (min-width: $screen-lg) {
+    .desktop-only {
+      display: inherit;
+    }
+
+    .mobile-only {
+      display: none;
+    }
+  }
+}
diff --git a/client/src/ui/molecules/guides-menu/index.tsx b/client/src/ui/molecules/guides-menu/index.tsx
@@ -0,0 +1,66 @@
+import { useLocale } from "../../../hooks";
+import { Menu } from "../menu";
+
+import "./index.scss";
+
+export const GuidesMenu = ({ visibleSubMenuId, toggleMenu }) => {
+  const locale = useLocale();
+
+  const menu = {
+    id: "guides",
+    label: "Guides",
+    to: `/${locale}/docs/Learn`,
+    items: [
+      {
+        description: "Learn web development",
+        hasIcon: true,
+        extraClasses: "apis-link-container mobile-only",
+        iconClasses: "submenu-icon learn",
+        label: "Overview / MDN Learning Area",
+        url: `/${locale}/docs/Learn`,
+      },
+      {
+        description: "Learn web development",
+        extraClasses: "apis-link-container desktop-only",
+        hasIcon: true,
+        iconClasses: "submenu-icon learn",
+        label: "MDN Learning Area",
+        url: `/${locale}/docs/Learn`,
+      },
+      {
+        description: "Learn to structure web content with HTML",
+        extraClasses: "html-link-container",
+        hasIcon: true,
+        iconClasses: "submenu-icon html",
+        label: "HTML",
+        url: `/${locale}/docs/Learn/HTML`,
+      },
+      {
+        description: "Learn to style content using CSS",
+        extraClasses: "css-link-container",
+        hasIcon: true,
+        iconClasses: "submenu-icon css",
+        label: "CSS",
+        url: `/${locale}/docs/Learn/CSS`,
+      },
+      {
+        description: "Learn to run scripts in the browser",
+        extraClasses: "javascript-link-container",
+        hasIcon: true,
+        iconClasses: "submenu-icon javascript",
+        label: "JavaScript",
+        url: `/${locale}/docs/Learn/JavaScript`,
+      },
+      {
+        description: "Learn to make the web accessible to all",
+        hasIcon: true,
+        iconClasses: "submenu-icon",
+        label: "Accessibility",
+        url: `/${locale}/docs/Web/Accessibility`,
+      },
+    ],
+  };
+  const isOpen = visibleSubMenuId === menu.id;
+
+  return <Menu menu={menu} isOpen={isOpen} toggle={toggleMenu} />;
+};
diff --git a/client/src/ui/molecules/main-menu/index.scss b/client/src/ui/molecules/main-menu/index.scss
@@ -40,22 +40,8 @@ ul.main-menu {
     }
   }
 
-  .top-level-entry .long {
-    display: none;
-  }
-
   @media (min-width: ($screen-xl)) {
     gap: 1rem;
-
-    .top-level-entry {
-      .long {
-        display: unset;
-      }
-
-      .short {
-        display: none;
-      }
-    }
   }
 }
 
@@ -92,55 +78,3 @@ ul.main-menu {
     }
   }
 }
-
-@media screen and (min-width: $screen-lg) {
-  #more-button {
-    display: flex;
-
-    &::after {
-      display: none;
-    }
-  }
-}
-
-.submenu-icon {
-  &.html {
-    background-color: var(--html-accent-color);
-  }
-
-  &.css {
-    background-color: var(--css-accent-color);
-  }
-
-  &.javascript {
-    background-color: var(--js-accent-color);
-  }
-
-  &.http {
-    background-color: var(--http-accent-color);
-  }
-
-  &.apis {
-    background-color: var(--apis-accent-color);
-  }
-
-  &.learn {
-    background-color: var(--learn-accent-color);
-  }
-
-  &.plus {
-    background-color: var(--plus-accent-color);
-  }
-
-  &.curriculum {
-    background-color: var(--curriculum-color);
-  }
-
-  &.blog {
-    background-color: var(--apis-accent-color);
-  }
-
-  &.observatory {
-    background-color: var(--observatory-accent);
-  }
-}