From 493b879dac90a84177c5a0c656574d428249d946 Mon Sep 17 00:00:00 2001 From: Laura Gerhardt Date: Tue, 17 Jan 2023 17:13:29 -0500 Subject: [PATCH] Primary nav for whole site #3348 (#3382) * mid megamenu disaster * initial more menu handling * initial more menu build * update navigation for correct child nesting * condense into bigger top nav * adjust nav header mobile styling * send nav to hmpg anchors * add child link * add back in supervisor * remove default usa-current class * format files * add current page navigation (#3385) * add current page navigation * format files Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> * add link shortcode to handle nav links * refactor primary-nav * format files Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> --- .eleventy.js | 5 + _data/navigation.yml | 266 +++++++++++++------------ _includes/header.html | 39 ++-- _includes/usa-nav__primary.html | 69 +++++++ _includes/usa-nav__usa-col-subnav.html | 14 ++ config/shortcodes.js | 8 + styles/custom/nav.scss | 14 +- styles/custom/usa-overrides.scss | 4 - 8 files changed, 261 insertions(+), 158 deletions(-) create mode 100644 _includes/usa-nav__primary.html create mode 100644 _includes/usa-nav__usa-col-subnav.html diff --git a/.eleventy.js b/.eleventy.js index 1a74cff84..175b1a7d5 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -12,6 +12,7 @@ const { imageWithClassShortcode, slackChannelLinkShortcode, uswdsIconShortcode, + usaCurrentShortcode, } = require("./config/shortcodes"); const { headingLinks } = require("./config/headingLinks"); const postbuild = require("./config/postbuild"); @@ -99,8 +100,12 @@ module.exports = function (config) { config.addLiquidShortcode("image_with_class", imageWithClassShortcode); config.addLiquidShortcode("slack_channel", slackChannelLinkShortcode); config.addLiquidShortcode("uswds_icon", uswdsIconShortcode); + config.addLiquidShortcode("usa_current", usaCurrentShortcode); config.addLiquidShortcode("page", (link) => path.join(pathPrefix, link)); + config.addLiquidShortcode("link", (link) => + link.startsWith("http") ? link : path.join(pathPrefix, link) + ); config.on("eleventy.after", async () => { await postbuild(); diff --git a/_data/navigation.yml b/_data/navigation.yml index e8ff876c7..b799b92e3 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -1,6 +1,10 @@ primary: - text: About TTS href: /#about-tts + sub: + - TTS Offices + topnavcondense: false + main-file-path: /about-us/ blurb: | Technology Transformation Services (TTS) applies modern methodologies and technologies to improve the public’s experience with government by helping agencies make their services more accessible, efficient, and effective. Below is more information on both general TTS policies and the individual offices within TTS. children: @@ -20,7 +24,12 @@ primary: url: about-us/digital-council/ internal: true - text: Getting started + topnavcondense: false + sub: + - General information and resources + - Tools href: /#getting-started + main-file-path: /getting-started/ blurb: | Here's what you probably want to know in your first weeks at TTS. children: @@ -46,7 +55,9 @@ primary: url: getting-started/classes/travel-101/ internal: true - text: Training & Development + topnavcondense: false href: /#training-and-development + main-file-path: /training-and-development/ blurb: | Classes, coaching and ongoing professional development children: @@ -83,7 +94,9 @@ primary: url: https://drive.google.com/drive/folders/12E7VbV7YhRfBp5fRdcjfpdVSLPPCyKHe internal: false - text: Travel and leave + topnavcondense: false href: /#travel-and-leave + main-file-path: /travel-and-leave/ blurb: | Going somewhere? Here's what you need to know. children: @@ -104,6 +117,8 @@ primary: internal: true - text: Supervisor Resources href: /#supervisor-resources + main-file-path: /supervisor-resources/ + topnavcondense: false blurb: | Tools and tips for supervisors. children: @@ -117,7 +132,9 @@ primary: url: https://docs.google.com/document/d/1ow1VIwSzAGGzsBjGUZMlnLwK6kKTZWS_paGyIzfgpbE/edit internal: false - text: Performance management + topnavcondense: false href: /#performance-management + main-file-path: /performance-management/ blurb: | Annual reviews, self-evaluations and peer feedback. Oh my! children: @@ -144,6 +161,7 @@ primary: interal: true - text: Hiring, staying, or changing jobs href: /#hiring-staying-or-changing-jobs + main-file-path: /hiring-staying-or-changing-jobs/ blurb: | Everything you need to know about getting a job at TTS, changing jobs at TTS, or leaving TTS. @@ -182,134 +200,136 @@ primary: url: office-of-operations/talent/#referring-a-person internal: true - text: General information and resources + topnavcondense: Getting started href: /#general-information-and-resources + main-file-path: /general-information-and-resources/ children: - - children: - - text: Who we are - children: - - text: Staff directory - url: https://docs.google.com/spreadsheets/d/1pt68FCytthwhwBiXzrC78mCl4G_pG8QtyzlyfsyGsP4/edit#gid=655713658 - internal: false - - text: General contacts - url: general-contacts/ - internal: true - - text: Glossary - url: glossary/ - internal: true - - text: Records management - url: records-management/ - internal: true - - text: Diversity, equity, inclusion, and accessibility - children: - - text: DEIA Resources - url: general-information-and-resources/deia-resources/ - internal: true - - text: Inclusive Behaviors - url: general-information-and-resources/inclusive-behaviors/ - internal: true - - text: Inclusion Bot - url: general-information-and-resources/inclusion-bot/ - internal: true - - text: TTS locations - children: - - text: Distributed - url: distributed/ - internal: true - - text: Chicago - url: chicago/ - internal: true - - text: New York City - url: new-york-city/ - internal: true - - text: San Francisco - url: san-francisco/ - internal: true - - text: Washington, D.C. - url: washington-dc/ - internal: true - - text: TTS platforms - children: - - text: Cloud.gov - url: https://cloud.gov/ - internal: false - - text: Login.gov - url: https://login.gov/ - internal: false - - text: Federalist (publishing platform) - url: federalist/ - internal: true - - text: Tech - children: - - text: FITARA - url: fitara/ - internal: true - - text: Requirements for passwords - url: password-requirements/ - internal: true - - text: Security incidents - url: security-incidents/ - internal: true - - text: Sensitive information - url: sensitive-information/ - internal: true - - text: Employee resources + - text: Who we are + children: + - text: Staff directory + url: https://docs.google.com/spreadsheets/d/1pt68FCytthwhwBiXzrC78mCl4G_pG8QtyzlyfsyGsP4/edit#gid=655713658 + internal: false + - text: General contacts + url: general-contacts/ + internal: true + - text: Glossary + url: glossary/ + internal: true + - text: Records management + url: records-management/ + internal: true + - text: Diversity, equity, inclusion, and accessibility + children: + - text: DEIA Resources + url: general-information-and-resources/deia-resources/ + internal: true + - text: Inclusive Behaviors + url: general-information-and-resources/inclusive-behaviors/ + internal: true + - text: Inclusion Bot + url: general-information-and-resources/inclusion-bot/ + internal: true + - text: TTS locations + children: + - text: Distributed + url: distributed/ + internal: true + - text: Chicago + url: chicago/ + internal: true + - text: New York City + url: new-york-city/ + internal: true + - text: San Francisco + url: san-francisco/ + internal: true + - text: Washington, D.C. + url: washington-dc/ + internal: true + - text: TTS platforms + children: + - text: Cloud.gov + url: https://cloud.gov/ + internal: false + - text: Login.gov + url: https://login.gov/ + internal: false + - text: Federalist (publishing platform) + url: federalist/ + internal: true + - text: Tech + children: + - text: FITARA + url: fitara/ + internal: true + - text: Requirements for passwords + url: password-requirements/ + internal: true + - text: Security incidents + url: security-incidents/ + internal: true + - text: Sensitive information + url: sensitive-information/ + internal: true + - text: Employee resources + children: + - text: Benefits links and resources + url: benefits-links/ + internal: true + - text: Covid leave guidance + url: https://docs.google.com/document/d/1kiIowld8JIY-ORa1Udaj8EosoHjJXF64IekusOsGtdw/edit?usp=sharing + internal: false + - text: Daily Check-in + url: daily-checkin/ + internal: true + - text: Emergency procedures + url: https://docs.google.com/document/d/11tUnOegbHajqXPwSFxGtmGakupYrLgyItz4sgxAysi8/edit + internal: false + - text: Employee assistance program + url: getting-started/classes/benefits/#employee-assistance-program + internal: true + - text: Employment verification + url: employment-verification/ + internal: true + - text: Overtime, comp time, and credit hours + url: travel-and-leave/overtime/ + internal: true + - text: Purchase requests + url: purchase-requests/ + internal: true children: - - text: Benefits links and resources - url: benefits-links/ + - text: Software under $10,000 + url: software/ internal: true - - text: Covid leave guidance - url: https://docs.google.com/document/d/1kiIowld8JIY-ORa1Udaj8EosoHjJXF64IekusOsGtdw/edit?usp=sharing - internal: false - - text: Daily Check-in - url: daily-checkin/ - internal: true - - text: Emergency procedures - url: https://docs.google.com/document/d/11tUnOegbHajqXPwSFxGtmGakupYrLgyItz4sgxAysi8/edit - internal: false - - text: Employee assistance program - url: getting-started/classes/benefits/#employee-assistance-program - internal: true - - text: Employment verification - url: employment-verification/ - internal: true - - text: Overtime, comp time, and credit hours - url: travel-and-leave/overtime/ - internal: true - - text: Purchase requests - url: purchase-requests/ - internal: true - children: - - text: Software under $10,000 - url: software/ - internal: true - - text: Procurements over $10,000 - url: procurements-over-10000/ - internal: true - - text: Resources for Deaf and Hard of Hearing individuals - url: deaf-hoh/ + - text: Procurements over $10,000 + url: procurements-over-10000/ internal: true - - text: Moving and changing your address - url: moving/ - internal: true - - text: Transit benefit - url: transit-benefit/ - internal: true - - text: Within Grade Increases (opm.gov) - url: https://www.opm.gov/policy-data-oversight/pay-leave/pay-administration/fact-sheets/within-grade-increases/ - internal: false - - text: Launching software - children: - - text: Lifecycle of a Launch (ATOs, etc.) - url: launching-software/lifecycle/ - - text: Security - url: launching-software/security/ - - text: Infrastructure - url: launching-software/infrastructure/ - - text: Laws - url: launching-software/laws/ - - text: Privacy - url: launching-software/privacy/ + - text: Resources for Deaf and Hard of Hearing individuals + url: deaf-hoh/ + internal: true + - text: Moving and changing your address + url: moving/ + internal: true + - text: Transit benefit + url: transit-benefit/ + internal: true + - text: Within Grade Increases (opm.gov) + url: https://www.opm.gov/policy-data-oversight/pay-leave/pay-administration/fact-sheets/within-grade-increases/ + internal: false + - text: Launching software + children: + - text: Lifecycle of a Launch (ATOs, etc.) + url: launching-software/lifecycle/ + - text: Security + url: launching-software/security/ + - text: Infrastructure + url: launching-software/infrastructure/ + - text: Laws + url: launching-software/laws/ + - text: Privacy + url: launching-software/privacy/ - text: TTS Offices + topnavcondense: About TTS href: /#tts-offices blurb: | We’re all one family at TTS, but each office has its own norms and practices. @@ -512,7 +532,9 @@ primary: url: https://digitalcorps.gsa.gov/ internal: false - text: Tools + topnavcondense: Getting started href: /#tools + main-file-path: /tools/ blurb: | A by-no-means complete sampling of commonly used tools around TTS. children: diff --git a/_includes/header.html b/_includes/header.html index a2236c62e..61cdda850 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,26 +1,23 @@
-
-
-
- - +
+
+ -
+ -
-
\ No newline at end of file + {% include "usa-nav__primary.html" %} +
+ +
+ {% include "searchgov/form.html" searchgov: site.searchgov %} +
+
+ + + diff --git a/_includes/usa-nav__primary.html b/_includes/usa-nav__primary.html new file mode 100644 index 000000000..8dcc306aa --- /dev/null +++ b/_includes/usa-nav__primary.html @@ -0,0 +1,69 @@ + \ No newline at end of file diff --git a/_includes/usa-nav__usa-col-subnav.html b/_includes/usa-nav__usa-col-subnav.html new file mode 100644 index 000000000..8c55f9db4 --- /dev/null +++ b/_includes/usa-nav__usa-col-subnav.html @@ -0,0 +1,14 @@ +
+

{{ item.text }}

+ +
\ No newline at end of file diff --git a/config/shortcodes.js b/config/shortcodes.js index 05a557e4e..de4f023d3 100644 --- a/config/shortcodes.js +++ b/config/shortcodes.js @@ -69,10 +69,18 @@ const slackChannelLinkShortcode = (channel, name) => { }`; }; +const usaCurrentShortcode = (navItemMainFilePath, pagePath) => { + if (pagePath.includes(navItemMainFilePath)) { + return `usa-current - ${pagePath} - ${navItemMainFilePath}`; + } + return ""; +}; + module.exports = { downloadShortCode, imageWithClassShortcode, imageShortcode, slackChannelLinkShortcode, uswdsIconShortcode, + usaCurrentShortcode, }; diff --git a/styles/custom/nav.scss b/styles/custom/nav.scss index 1ab057d84..61852df6b 100644 --- a/styles/custom/nav.scss +++ b/styles/custom/nav.scss @@ -1,13 +1,5 @@ -.usa-nav__primary { - // only show the navigation in the top bar on mobile - display: none; - .usa-js-mobile-nav--active & { - display: block; - } -} - -nav.usa-nav { - section { - overflow-x: visible; +h2.usa-nav__header { + @media (min-width: 64em) { + color: white; } } diff --git a/styles/custom/usa-overrides.scss b/styles/custom/usa-overrides.scss index cde1241d3..608d507d8 100644 --- a/styles/custom/usa-overrides.scss +++ b/styles/custom/usa-overrides.scss @@ -11,10 +11,6 @@ } } -.usa-header--basic .usa-nav-container { - align-items: center; -} - .usa-layout-docs__main { border-top: 1px solid #dfe1e2; }