diff --git a/config/i18n/locales/english/links.json b/config/i18n/locales/english/links.json index 8e31b3b5a..e2378fa36 100644 --- a/config/i18n/locales/english/links.json +++ b/config/i18n/locales/english/links.json @@ -13,5 +13,12 @@ "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": { + "contribute": "https://contribute.freecodecamp.org/#/", + "forum": "https://forum.freecodecamp.org/", + "learn": "https://www.freecodecamp.org/learn", + "news": "https://freecodecamp.org/news/", + "podcast": "https://freecodecamp.libsyn.com/" } } diff --git a/config/i18n/locales/english/translations.json b/config/i18n/locales/english/translations.json index 826f3ea6d..c7927bd31 100644 --- a/config/i18n/locales/english/translations.json +++ b/config/i18n/locales/english/translations.json @@ -2,7 +2,11 @@ "buttons": { "forum": "Forum", "donate": "Donate", - "load-more-articles": "Load More Articles" + "menu": "Menu", + "news": "News", + "curriculum": "Curriculum", + "load-more-articles": "Load More Articles", + "toggle-dark-mode": "Night Mode" }, "search": { "label": "Search", @@ -94,5 +98,8 @@ "audio": "audio", "video": "video" }, - "ad-text": "Advertisement" + "ad-text": "Advertisement", + "aria": { + "opens-new-window": "Opens in new window" + } } diff --git a/cypress/e2e/english/landing/landing.cy.js b/cypress/e2e/english/landing/landing.cy.js index f0bb357c4..a298bd20b 100644 --- a/cypress/e2e/english/landing/landing.cy.js +++ b/cypress/e2e/english/landing/landing.cy.js @@ -10,12 +10,23 @@ const selectors = { avatar: "[data-test-label='avatar']", siteNavLogo: "[data-test-label='site-nav-logo']", postPublishedTime: "[data-test-label='post-published-time']", + menuButton: "[data-test-label='header-menu-button']", + menu: "[data-test-label='header-menu']", + darkModeButton: "[data-test-label='dark-mode-button']", banner: "[data-test-label='banner']" }; describe('Landing', () => { beforeEach(() => { - cy.visit('/'); + cy.visit('/', { + onBeforeLoad(win) { + cy.stub(win, 'matchMedia') + .withArgs('(prefers-color-scheme: light)') + .returns({ + matches: true + }); + } + }); loadAllPosts(); }); @@ -33,6 +44,25 @@ describe('Landing', () => { ); }); + it('Clicking the menu button should open the menu', function () { + cy.get(selectors.menuButton).should('be.visible').click(); + cy.get(selectors.menu).should('be.visible'); + }); + + it('The menu should be able to change the theme', function () { + cy.get(selectors.menuButton).click(); + cy.get(selectors.menu).should('be.visible'); + cy.get(selectors.darkModeButton).click(); + + cy.get('body', { timeout: 1000 }).should('have.class', 'dark-mode'); + cy.get(selectors.siteNavLogo).click(); + cy.get(selectors.menu).should('not.be.visible'); + cy.get(selectors.menuButton).click(); + cy.get(selectors.menu).should('be.visible'); + cy.get(selectors.darkModeButton).click(); + //cy.get('body', { timeout: 1000 }).should('not.have.class', 'dark-mode'); + }); + it("should show the author's profile image", () => { cy.get(selectors.postCard) .contains( diff --git a/package-lock.json b/package-lock.json index 201b2b9c4..31b828f4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "eleventy-news", "version": "1.0.0", "license": "BSD-3-Clause", + "dependencies": { + "@fortawesome/free-solid-svg-icons": "^6.6.0" + }, "devDependencies": { "@11ty/eleventy": "2.0.1", "@11ty/eleventy-plugin-rss": "1.2.0", @@ -1177,6 +1180,27 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@glimmer/env": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/@glimmer/env/-/env-0.1.7.tgz", @@ -11861,17 +11885,18 @@ } }, "node_modules/typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", + "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", "dev": true, + "license": "Apache-2.0", "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/uc.micro": { @@ -13295,6 +13320,19 @@ "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", "dev": true }, + "@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==" + }, + "@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "requires": { + "@fortawesome/fontawesome-common-types": "6.6.0" + } + }, "@glimmer/env": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/@glimmer/env/-/env-0.1.7.tgz", @@ -21147,9 +21185,9 @@ } }, "typescript": { - "version": "4.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz", - "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==", + "version": "5.5.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz", + "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==", "dev": true, "peer": true }, diff --git a/package.json b/package.json index 73b2b0083..75f38a3f6 100644 --- a/package.json +++ b/package.json @@ -105,5 +105,8 @@ }, "lint-staged": { "**/*": "prettier --write --ignore-unknown" + }, + "dependencies": { + "@fortawesome/free-solid-svg-icons": "^6.6.0" } } diff --git a/src/_includes/assets/css/global.css b/src/_includes/assets/css/global.css index 465def02f..a621f5671 100644 --- a/src/_includes/assets/css/global.css +++ b/src/_includes/assets/css/global.css @@ -1,23 +1,3 @@ -/* Variables -/* ---------------------------------------------------------- */ - -:root { - /* Colours */ - --dark-blue: #002ead; - --theme-color: #0a0a23; - --gray90: #0a0a23; - --gray85: #1b1b32; - --gray80: #2a2a40; - --gray75: #3b3b4f; - --gray45: #858591; - --gray15: #d0d0d5; - --gray10: #dfdfe2; - --gray05: #eeeef0; - --gray00: #fff; - --header-height: 38px; - --blue-dark: #002ead; -} - /* Fonts /*------------------------------------------------------------*/ /*@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700|Roboto+Mono:400,700");*/ @@ -285,6 +265,7 @@ html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + body { overflow-x: hidden; color: var(--gray90); @@ -295,7 +276,7 @@ body { font-style: normal; letter-spacing: 0; text-rendering: optimizeLegibility; - background: #fff; + background: var(--primary-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -494,3 +475,147 @@ h6 { font-size: 1.4rem; font-weight: 500; } + +/** + * Site header menu list + */ +.nav-list { + background-color: var(--gray90); + display: none; + justify-content: flex-end; + list-style: none; + padding: 0; + position: absolute; + right: 0; + width: 100%; +} + +/** + * Site header language list + */ +.lang-button-nav[aria-expanded='true'] + .nav-list { + -ms-overflow-style: none; + display: block; + max-height: calc(100vh - var(--header-height)); + overflow-y: auto; + scrollbar-width: none; + top: calc(var(--header-height)); +} + +.lang-button-nav[aria-expanded='true'] + .nav-list::-webkit-scrollbar { + display: none; +} + +@media (min-width: 601px) { + [dir='rtl'] .nav-list { + right: auto; + left: 0; + } +} + +/* WCAG fix */ +.sr-only { + color: white; + background-color: black; +} + +/** + * Check mark for current language + */ +.nav-lang-list-option[aria-current='true'] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg fill='white'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06a.733.733 0 0 1 1.047 0l3.052 3.093l5.4-6.425a.247.247 0 0 1 .02-.022z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); + background-size: 1.2rem; + background-position: calc(100% - 10px) center; + background-repeat: no-repeat; +} + +.nav-lang-list-option[aria-current='true']:hover, +.nav-lang-list-option[aria-current='true']:focus-visible { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' preserveAspectRatio='xMidYMid meet' viewBox='0 0 16 16'%3E%3Cg fill='currentColor'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06a.733.733 0 0 1 1.047 0l3.052 3.093l5.4-6.425a.247.247 0 0 1 .02-.022z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") !important; +} + +/** + * Sub menu dividers + */ +.nav-line { + border-top: 0.0625rem solid var(--gray45); +} + +/** + * Site navigation first level CTA's + */ +.exposed-button-nav, +.lang-button-nav { + align-items: center; + background-color: var(--gray90); + border: 1px solid var(--gray00); + color: var(--gray00); + display: flex; + font-size: 18px; + height: var(--header-element-size); + justify-content: center; + min-width: var(--header-element-size); + padding: 0 4px; +} + +@media (min-width: 601px) { + .exposed-button-nav { + padding-inline: 12px; + } +} + +.exposed-button-nav:hover, +.exposed-button-nav:hover:focus { + border: 1px solid var(--gray00); +} + +.exposed-button-nav:is( + :hover, + :hover:focus, + [aria-expanded='true'], + [aria-expanded='true']:hover + ), +.lang-button-nav:is( + :hover, + :hover:focus, + [aria-expanded='true'], + [aria-expanded='false'].force-show + ) { + background-color: var(--gray00); + color: var(--gray90); +} + +/** + * Text and icon handling for first level CTA's + * + * Login btn icon is used in other places different from the site navigation + * and is expected to not to be displayed. The default is to hide the element + * but on the site navigation display it only on small viewports. + */ +.login-btn-icon { + display: none; +} + +#toggle-button-nav .menu-btn-text, +#universal-nav .login-btn-text { + display: none; +} + +@media (min-width: 601px) { + #toggle-button-nav .menu-btn-text, + #universal-nav .login-btn-text { + display: inline-block; + } +} + +#toggle-button-nav .menu-btn-icon, +#universal-nav .login-btn-icon { + display: inline-block; +} + +@media (min-width: 601px) { + #toggle-button-nav .menu-btn-icon, + #universal-nav .login-btn-icon { + display: none; + } +} diff --git a/src/_includes/assets/css/nav-bar.css b/src/_includes/assets/css/nav-bar.css new file mode 100644 index 000000000..a13f138e1 --- /dev/null +++ b/src/_includes/assets/css/nav-bar.css @@ -0,0 +1,112 @@ +/** + * Site header sub menu items + */ +.nav-link { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: var(--gray90); + border: none; + color: var(--gray00); + 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:focus { + outline-offset: -3px; +} + +.nav-link:focus:not(:focus-visible) { + background-color: inherit; + color: inherit; +} + +.nav-link:not([aria-disabled='true']):hover, +.nav-link:focus-visible { + color: var(--gray90); + background-color: var(--gray10); +} + +.nav-link:not([aria-disabled='true']):hover { + text-decoration: none; + cursor: pointer; + outline-color: transparent !important; +} + +button.nav-link[aria-disabled='true'] { + background-color: inherit; +} + +li > button.nav-link-signout:not([aria-disabled='true']):is(:hover, :focus) { + background-color: var(--danger-background); + color: var(--danger-color); +} + +.nav-link .fa-external-link-alt { + color: var(--gray45); +} + +.nav-link-supporter { + color: var(--yellow-light); + background: var(--yellow-dark); +} + +.nav-link-supporter:hover, +.nav-link-supporter:active, +.nav-link-supporter:focus, +.nav-link-supporter:focus-visible { + color: var(--yellow-dark) !important; + background: var(--yellow-light) !important; +} + +.nav-link-supporter svg { + height: auto; + width: 1em; +} + +/** + * Link items with icon or checkboxes + */ +.nav-link-flex { + display: flex; + justify-content: space-between; +} + +.display-menu { + -ms-overflow-style: none; + display: block; + 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); + } +} + +.display-menu::-webkit-scrollbar { + display: none; +} + +@media (min-width: 980px) { + .nav-list { + max-width: 25rem; + } +} + +.nav-list li { + margin: auto; +} diff --git a/src/_includes/assets/css/screen.css b/src/_includes/assets/css/screen.css index 8401de3b6..0c6e3141c 100644 --- a/src/_includes/assets/css/screen.css +++ b/src/_includes/assets/css/screen.css @@ -34,7 +34,7 @@ on every page through _includes/layouts/default.njk /* ---------------------------------------------------------- */ body { - background: #fff; + background: var(--primary-background); } .img { @@ -104,7 +104,7 @@ body { z-index: 1000; color: #fff; width: 100%; - background: var(--theme-color); + background: var(--gray90); font-family: 'Lato', sans-serif; font-display: swap; } @@ -171,7 +171,7 @@ body { /* ---------------------------------------------------------- */ .site-nav { - z-index: 300; + z-index: 1000; display: flex; justify-content: space-between; align-items: flex-start; @@ -180,9 +180,8 @@ body { font-family: Lato, sans-serif; font-display: swap; height: var(--header-height); - background: var(--theme-color); + background: var(--gray90); position: fixed; - z-index: 1000; color: #fff; width: 100%; } @@ -263,7 +262,7 @@ a.nav-forum, a.nav-forum:hover, .nav li a:hover { background: white; - color: var(--theme-color); + color: var(--primary-color); text-decoration: none; } @@ -302,7 +301,7 @@ a.nav-forum { background-color: #feac32; background-image: linear-gradient(#fecc4c, #ffac33); border: 3px solid #feac32; - color: var(--theme-color); + color: var(--gray90); } .toggle-button-nav:hover, @@ -312,7 +311,7 @@ a.nav-forum { border-width: 3px; border-color: #f1a02a; background-image: none; - color: var(--theme-color); + color: var(--gray90); text-decoration: none; } @@ -378,7 +377,7 @@ a.nav-forum { .rss-button svg { margin-bottom: 1px; height: 2.1rem; - fill: #fff; + fill: var(--primary-background); } @media (max-width: 999px) { @@ -442,7 +441,7 @@ a.nav-forum { overflow: hidden; margin: 0 20px 50px; min-height: 100px; - background: #fff center center; + background: var(--primary-background) center center; background-size: cover; } @@ -474,7 +473,7 @@ a.nav-forum { .post-card-tags a { margin-bottom: 1.3rem; - color: var(--gray75); + color: var(--quaternary-color); font-size: 1.5rem; line-height: 1.15em; font-weight: 500; @@ -488,7 +487,7 @@ a.nav-forum { } .post-card-title a { - color: var(--gray90); + color: var(--primary-color); } .post-card-content { @@ -583,7 +582,7 @@ a.nav-forum { margin: 0 -5px; width: 34px; height: 34px; - border: #fff 2px solid; + border: var(--primary-background) 2px solid; } .moving-avatar { @@ -592,7 +591,7 @@ a.nav-forum { margin: 0 -6px; width: 56px; height: 56px; - border: #fff 2px solid; + border: var(--primary-background) 2px solid; transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s; } @@ -614,7 +613,7 @@ a.nav-forum { .reading-time { flex-shrink: 0; margin-left: 20px; - color: var(--gray75); + color: var(--quaternary-color); font-size: 1.2rem; line-height: 20px; font-weight: 500; @@ -722,7 +721,7 @@ make sure this only happens on large viewports / desktop-ish devices. .post-template.site-main, .page-template.site-main { padding-bottom: 4vw; - background: #fff; + background: var(--primary-background); } .post-full { @@ -1954,8 +1953,8 @@ p:has(mjx-container.MathJax) { /* ---------------------------------------------------------- */ .site-footer { - color: var(--gray85); - background: var(--gray05); + color: var(--secondary-color); + background: var(--primary-background); line-height: 1.6; padding: 40px 15px; font-size: 16px; @@ -1985,7 +1984,7 @@ p:has(mjx-container.MathJax) { } .site-footer a { - color: var(--gray85); + color: var(--secondary-color); text-decoration: none; padding: 2px; } @@ -2271,7 +2270,7 @@ a.cta-button { a.banner { position: fixed; top: var(--header-height); - background-color: var(--blue-dark); + background-color: var(--dark-blue); align-items: center; justify-content: center; font-size: 14px; diff --git a/src/_includes/assets/css/search-bar.css b/src/_includes/assets/css/search-bar.css index 240ae920f..a124e40a0 100644 --- a/src/_includes/assets/css/search-bar.css +++ b/src/_includes/assets/css/search-bar.css @@ -205,7 +205,7 @@ a:active { /* Show default colors if disabled */ .disabled:hover { - background: #eeeef0; + background: var(--secondary-background); color: #0a0a23; } diff --git a/src/_includes/assets/css/variables.css b/src/_includes/assets/css/variables.css new file mode 100644 index 000000000..cbc74ec2e --- /dev/null +++ b/src/_includes/assets/css/variables.css @@ -0,0 +1,37 @@ +:root { + /* Colours */ + --dark-blue: #002ead; + --gray90: #0a0a23; + --gray85: #1b1b32; + --gray80: #2a2a40; + --gray75: #3b3b4f; + --gray45: #858591; + --gray15: #d0d0d5; + --gray10: #dfdfe2; + --gray05: #eeeef0; + --gray00: #fff; + --header-height: 38px; + --header-sub-element-size: 45px; +} + +body { + --primary-color: var(--gray90); + --secondary-color: var(--gray85); + --tertiary-color: var(--gray80); + --quaternary-color: var(--gray75); + --quaternary-background: var(--gray15); + --tertiary-background: var(--gray10); + --secondary-background: var(--gray05); + --primary-background: var(--gray00); +} + +body.dark-mode { + --primary-color: var(--gray00); + --secondary-color: var(--gray05); + --tertiary-color: var(--gray10); + --quaternary-color: var(--gray15); + --quaternary-background: var(--gray75); + --tertiary-background: var(--gray80); + --secondary-background: var(--gray85); + --primary-background: var(--gray90); +} diff --git a/src/_includes/assets/js/dark-mode.js b/src/_includes/assets/js/dark-mode.js new file mode 100644 index 000000000..30e0c8b59 --- /dev/null +++ b/src/_includes/assets/js/dark-mode.js @@ -0,0 +1,40 @@ +function loadDarkModePreference() { + const theme = localStorage.getItem('theme'); + if ( + window.matchMedia('(prefers-color-scheme: dark)')?.matches || + theme == 'dark' || + theme == 'night' + ) { + document.body.classList.add('dark-mode'); + document + .getElementById('dark-mode-enabled') + .classList.replace('fa-square', 'fa-square-check'); + } +} + +document.addEventListener('DOMContentLoaded', () => { + loadDarkModePreference(); + document + .getElementById('toggle-dark-mode') + .addEventListener('click', function () { + document.body.classList.toggle('dark-mode'); + if (document.body.classList.contains('dark-mode')) { + document + .getElementById('dark-mode-enabled') + .classList.replace('fa-square', 'fa-square-check'); + localStorage.setItem('theme', 'dark'); + } else { + document + .getElementById('dark-mode-enabled') + .classList.replace('fa-square-check', 'fa-square'); + localStorage.setItem('theme', 'light'); + } + }); + + document + .getElementById('toggle-dark-mode') + .addEventListener('blur', function () { + document.getElementById('nav-list')?.classList.remove('display-menu'); + document.getElementById('nav-list').ariaExpanded = 'false'; + }); +}); diff --git a/src/_includes/assets/js/dropdown.js b/src/_includes/assets/js/dropdown.js new file mode 100644 index 000000000..1d0543b31 --- /dev/null +++ b/src/_includes/assets/js/dropdown.js @@ -0,0 +1,10 @@ +let displayMenu = false; + +document.addEventListener('DOMContentLoaded', () => { + document + .getElementById('toggle-button-nav') + .addEventListener('click', function () { + document.getElementById('nav-list').classList.toggle('display-menu'); + document.getElementById('nav-list').ariaExpanded = String(displayMenu); + }); +}); diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk index 8df115bdd..ef324fab9 100644 --- a/src/_includes/layouts/default.njk +++ b/src/_includes/layouts/default.njk @@ -25,14 +25,19 @@ {% endblock %} {# News Theme Styles #} + + + {# Algolia search assets #} + {# Font Awesome assets #} + {# Day.js and plugins for localization and formatting #} @@ -48,6 +53,8 @@ {% include "assets/js/search-bar.js" %} {% include "assets/js/client-dayjs.js" %} {% include "assets/js/cookie-checker.js" %} + {% include "assets/js/dark-mode.js" %} + {% include "assets/js/dropdown.js" %} {% endset %} diff --git a/src/_includes/partials/site-nav.njk b/src/_includes/partials/site-nav.njk index bafbe7344..9a21807ee 100644 --- a/src/_includes/partials/site-nav.njk +++ b/src/_includes/partials/site-nav.njk @@ -1,4 +1,4 @@ -