feat: add a simplistic menu button

config/i18n/locales/english/links.json

@@ -13,5 +13,9 @@
     "support": "https://www.freecodecamp.org/news/support/",
     "honesty": "https://www.freecodecamp.org/news/academic-honesty-policy/",
     "coc": "https://www.freecodecamp.org/news/code-of-conduct/"
+  },
+  "nav": {
+    "forum": "https://forum.freecodecamp.org/",
+    "learn": "https://www.freecodecamp.org/learn"
   }
 }

config/i18n/locales/english/translations.json

@@ -2,7 +2,9 @@
   "buttons": {
     "forum": "Forum",
     "donate": "Donate",
-    "load-more-articles": "Load More Articles"
+    "load-more-articles": "Load More Articles",
+    "menu": "Menu",
+    "learn": "Curriculum"
   },
   "search": {
     "label": "Search",

cypress/e2e/english/landing/landing.cy.ts

@@ -10,7 +10,9 @@ const selectors = {
   avatar: "[data-test-label='avatar']",
   siteNavLogo: "[data-test-label='site-nav-logo']",
   postPublishedTime: "[data-test-label='post-published-time']",
-  banner: "[data-test-label='banner']"
+  banner: "[data-test-label='banner']",
+  dropDownMenu: "[data-test-label='header-menu']",
+  toggleDropDownMenuButton: "[data-test-label='header-menu-button']"
 };
 
 describe('Landing (Hashnode sourced)', () => {
@@ -93,6 +95,28 @@ describe('Landing (Hashnode sourced)', () => {
     });
   });
 
+  context('Toggle menu button', () => {
+    beforeEach(() => {
+      cy.visit('/');
+      loadAllPosts();
+    });
+
+    it('When the page is first loaded, the dropdown menu should not have the `display-menu` class', () => {
+      cy.get(selectors.dropDownMenu).should('not.have.class', 'display-menu');
+    });
+
+    it("When the toggle menu dropdown button is hit and the menu is not visible, it should get the 'display-menu' class", () => {
+      cy.get(selectors.toggleDropDownMenuButton).click();
+      cy.get(selectors.dropDownMenu).should('have.class', 'display-menu');
+    });
+
+    it("When the toggle menu dropdown button is hit twice and the menu is not visible, it should not have the 'display-menu' class", () => {
+      cy.get(selectors.toggleDropDownMenuButton).click();
+      cy.get(selectors.toggleDropDownMenuButton).click();
+      cy.get(selectors.dropDownMenu).should('not.have.class', 'display-menu');
+    });
+  });
+
   context('Feature image', () => {
     beforeEach(() => {
       cy.visit('/');

src/_includes/assets/css/screen.css

@@ -51,6 +51,18 @@ body {
   text-indent: -9999px;
 }
 
+.sr-only {
+  clip: rect(0, 0, 0, 0);
+  border-width: 0;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 /* 2. Layout - Page building blocks
 /* ---------------------------------------------------------- */
 
@@ -170,6 +182,93 @@ body {
 /* 5. Site Navigation
 /* ---------------------------------------------------------- */
 
+.exposed-button-nav {
+  color: var(--gray-00);
+  background-color: var(--theme-color);
+}
+
+.display-menu {
+  -ms-overflow-style: none;
+  display: block !important;
+  max-height: calc(
+    100vh - var(--header-height) - var(--header-sub-element-size)
+  );
+  overflow-y: auto;
+  scrollbar-width: none;
+  text-align: left;
+  top: calc(var(--header-height) + var(--header-sub-element-size));
+}
+
+@media (min-width: 980px) {
+  .display-menu {
+    max-height: calc(100vh - var(--header-height));
+    top: var(--header-height);
+  }
+}
+
+.universal-nav {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  align-items: center;
+  background-color: var(--theme-color);
+  color: var(--gray-00);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 18px;
+  height: var(--header-height);
+  justify-content: space-between;
+  padding: 0 5px;
+}
+
+.nav-link {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: var(--gray-90);
+  border: none;
+  color: var(--gray-00);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  min-height: var(--header-sub-element-size);
+  padding: 2px 15px 0;
+  white-space: normal;
+  width: 100%;
+}
+
+.nav-link-flex {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav-list {
+  -ms-flex-pack: end;
+  background-color: var(--theme-color);
+  display: none;
+  list-style: none;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  width: 100%;
+  z-index: var(--z-index-site-header);
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+}
+
+@media (min-width: 980px) {
+  .nav-list {
+    max-width: 15rem;
+  }
+}
+
 .site-nav {
   display: flex;
   justify-content: space-between;

src/_includes/assets/js/toggle-menu-button.js

@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document
+    .getElementById('toggle-button-nav')
+    .addEventListener('click', function () {
+      const dropDownMenu = document.getElementById('menu-dropdown');
+      dropDownMenu.classList.toggle('display-menu');
+    });
+});

src/_includes/layouts/default.njk

@@ -47,6 +47,7 @@
             {% include "assets/js/search-bar.js" %}
             {% include "assets/js/client-dayjs.js" %}
             {% include "assets/js/cookie-checker.js" %}
+            {% include "assets/js/toggle-menu-button.js" %}
         {% endset %}
         <script>{{ js | jsMin | safe }}</script>
 
@@ -61,7 +62,7 @@
         {% if secrets.eleventyEnv === 'prod' %}
             {% include "partials/gtm-head.njk" %}
         {% endif %}
-        
+
         {# Dynamically load MathJax script #}
         {% block mathjax %}
         {% endblock %}

src/_includes/partials/site-nav.njk

@@ -1,4 +1,4 @@
-<nav class="site-nav nav-padding">
+<nav class="site-nav nav-padding universal-nav">
     <div class="site-nav-left">
         {% include "partials/search-bar.njk" %}
     </div>
@@ -7,22 +7,37 @@
     </div>
     <div class="site-nav-right">
         <div class="nav-group">
-            <a
-                class="nav-forum"
-                id="nav-forum"
-                rel="noopener noreferrer"
-                href="{% t 'links:forum' %}"
-                target="_blank"
-                data-test-label="forum-button"
-            >{% t 'buttons.forum' %}</a>
+            <button aria-expanded="true" class="exposed-button-nav" id="toggle-button-nav" data-test-label="header-menu-button">
+              <span class="sr-only">{% t 'buttons.menu' %}</span></span>
+              <span class="menu-btn-text">{% t 'buttons.menu' %}</span>
+            </button>
+            <ul id="menu-dropdown" class="nav-list" aria-labelledby="toggle-button-nav" data-test-label="header-menu">
+                <li><a
+                  class="nav-link nav-link-flex"
+                  id="nav-forum"
+                  rel="noopener noreferrer"
+                  href="{% t 'links:forum' %}"
+                  target="_blank"
+                  data-test-label="forum-button"
+              >{% t 'buttons.forum' %}</a></li>
+              <li><a
+                  class="nav-link nav-link-flex"
+                  id="nav-learn"
+                  rel="noopener noreferrer"
+                  href="{% t 'links:nav:learn' %}"
+                  target="_blank"
+                  data-test-label="learn-button"
+              >{% t 'buttons.learn' %}</a></li>
+            </ul>
             <a
                 class="toggle-button-nav"
                 id="nav-donate"
                 rel="noopener noreferrer"
                 href="{% t 'links:donate' %}"
                 target="_blank"
                 data-test-label="donate-button"
-            >{% t 'buttons.donate' %}</a>
+          >{% t 'buttons.donate' %}</a>
         </div>
+
     </div>
 </nav>