18F · beechnut · Jul 24, 2024 · Jul 12, 2024
diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -17,41 +17,4 @@ primary:
     - /author/:path/
 - text: Contact
   href: /contact/
-
-drawer:
-  - text: Our work
-    permalink: /our-work/
-    multiple_permalinks:
-    - /our-work/:path/
-  - text: Work with us
-    permalink: /work-with-us/
-  - text: About
-    permalink: /about/
-  - text: Blog
-    permalink: /blog/
-    multiple_permalinks:
-      - /blog/:path/
-      - /tags/:path/
-      - /author/:path/
-  - text: Contact
-    permalink: /contact/
-
-footer:
-  - text: Our work
-    permalink: /our-work/
-    multiple_permalinks:
-    - /our-work/:path/
-  - text: About
-    permalink: /about/
-  - text: Partnership principles
-    permalink: /partnership-principles/
-  - text: Join 18F
-    permalink: /join/
-  - text: Blog
-    permalink: /blog/
-    multiple_permalinks:
-      - /blog/:path/
-      - /tags/:path/
-      - /author/:path/
-  - text: Contact
-    permalink: /contact/
+  class: usa-button an18f-button--dark margin-top-3 desktop:margin-top-0 desktop:margin-x-2
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -25,8 +25,8 @@ <h2 class="font-heading-md text-medium margin-top-4 tablet:margin-top-0 margin-b
           Pages 
         </h2>
         <ul class="usa-list usa-list--unstyled font-sans-sm list-item-spacing-2"> 
-        {% for item in site.data.navigation.primary %}
-        <li> <a href="{{ site.baseurl }}{{ item.href }}"> {{item.text}} </a> </li>
+        {% for nav_item in navigation.primary %}
+        <li> <a href="{{ nav_item.href | url }}"> {{nav_item.text}} </a> </li>
           {% endfor %}
         </ul>
       </div>

diff --git a/_includes/layouts/default.html b/_includes/layouts/default.html
@@ -7,6 +7,7 @@
   <body class="{{ layout.class }} {{ page.class }}">
     {% include "skipnav.html" %}
     {% include "header.html" %}
+    {% include "menu.html" %}
 
     {% comment %}
       code smell: Altering layouts based on the value of `layout`.

diff --git a/_includes/logo.html b/_includes/logo.html
@@ -1,3 +1,5 @@
-<div class="usa-logo" id="extended-logo">
-  <a class="display-flex flex-align-center" href="/" title="Home" aria-label="Home">{% image_with_class "assets/common/img/18f-logo.svg" "maxw-6 margin-right-105" "18f" %}<em class="usa-logo__text">Home</em></a>
+<div class="usa-logo" id="header-logo">
+  <a href="/" title="Home">
+    {% image_with_class "assets/img/logos/18f-logo.svg" "usa-logo-img" "18F home page" %}
+  </a>
 </div>
diff --git a/_includes/menu.html b/_includes/menu.html
@@ -4,79 +4,43 @@
 manage your navigation system
 {% endcomment %}
 
-<header class="usa-header usa-header--extended" role="banner">
-  <div class="usa-navbar">
-    {% include "logo.html" %}
-    <button type="button" class="usa-menu-btn">Menu</button>
-  </div>
-  <nav
-    id="menu-navigation"
-    aria-label="Menu navigation"
-    role="navigation"
-    class="usa-nav"
-  >
-    <div class="usa-nav__inner">
+<header class="usa-header usa-header--basic usa-header--basic-megamenu" role="banner">
+  <div class="usa-nav-container">
+    <div class="usa-navbar">
+      {% include "logo.html" %}
+      <button type="button" class="usa-menu-btn">Menu</button>
+    </div>
+    <nav
+      class="usa-nav"
+      aria-label="Menu navigation"
+    >
       <button type="button" class="usa-nav__close">
         {% image "./node_modules/@uswds/uswds/dist/img/usa-icons/close.svg" "close" %}
       </button>
       <ul class="usa-nav__primary usa-accordion">
-        {% for nav_item in primary_navigation %}
-          {% unless nav_item.children %}
-          {% if tags %}
-            {% assign basedir = page.url | remove: titles_roots[tags].root | split: '/' | first | lstrip %}
-            {% assign linkdir = nav_item.url | remove: titles_roots[tags].root | replace: '/', '' | lstrip %}
-          {% else %}
-            {% assign basedir = page.url | remove_first: '/' | split: '/' | first | lstrip %}
-            {% assign linkdir = nav_item.url | replace: "/", "" | lstrip %}
-          {% endif %}
+        {% for nav_item in navigation.primary %}
         <li class="usa-nav__primary-item">
+          {% assign nav_item_class = "usa-nav__link" %}
+          {% if nav_item.class %}
+            {% assign nav_item_class = nav_item.class %}
+          {% endif %}
           <a
-            class="usa-nav__link{% if basedir == linkdir %} usa-current{% endif %}"
-            href="{{ nav_item.url | url }}"
-            ><span>{{ nav_item.name | escape }}</span></a
+            class="{{ nav_item_class }} {% if page.url == nav_item.href %} usa-current {% endif %}"
+            href="{{ nav_item.href | url }}"
+            {% if page.url == nav_item.href %} aria-current="page" {% endif %}
           >
+            <span>{{ nav_item.text | escape }}</span>
+          </a>
         </li>
-        {% else %} {% assign nav_id = 'primary-nav-' | append: forloop.index %}
-        <li class="usa-nav__primary-item">
-          <button
-            class="usa-accordion__button usa-nav__link"
-            aria-expanded="false"
-            aria-controls="{{ nav_id }}"
-            type="button"
-          >
-            <span>{{ nav_item.name | escape }}</span>
-          </button>
-          <ul id="{{ nav_id }}" class="usa-nav__submenu">
-            {% for subnav_item in nav_item.children %}
-            <li class="usa-nav__submenu-item">
-              <a href="{{ subnav_item.url | url }}"
-                >{{ subnav_item.name | escape }}</a
-              >
-            </li>
-            {% endfor %}
-          </ul>
-        </li>
-        {% endunless %} {% endfor %}
+        {% endfor %}
       </ul>
-      {% comment %}
-      TODO: The conditional and bottom-2 class on the line below can be removed after launch.
-      It's there to fix wonky alignment when search is present on the index page
-      {% endcomment%}
-      <div class="usa-nav__secondary {% unless tags %} bottom-2 {% endunless %}">
-        {% if navigation.secondary_navigation %}
-        <ul class="usa-nav__secondary-links">
-          {% for nav_item in navigation.secondary_navigation %}
-          <li class="usa-nav__secondary-item">
-            <a href="{{ nav_item.url | url }}" class="text-bold">
-              {{ nav_item.name | escape }}
-            </a
-            >
-          </li>
-          {% endfor %}
-        </ul>
-        {% endif %}
-        {% include "searchgov/form.html" searchgov: site.searchgov %}
-      </div>
-    </div>
-  </nav>
+      {% if site.searchgov  %}
+      <a href="https://search.usa.gov/search?utf8=%E2%9C%93&affiliate={{site.searchgov.affiliate}}&query=&commit="
+         class="usa-button padding-x-2"
+      >
+        {% image "assets/uswds/img/usa-icons-bg/search--white.svg" "Search" %}
+      </a>
+      {% endif %}
+    </nav>
+  </div>
 </header>
diff --git a/assets/common/styles/base/uswds-theme-settings.scss b/assets/common/styles/base/uswds-theme-settings.scss
@@ -99,7 +99,7 @@
   /*------------------------------------------------
   ## Header width
   -------------------------------------------------*/ 
-  $theme-header-logo-text-width: 70%,
+  $theme-header-logo-text-width: 15%,
 
   /*---------------------------------------------------------
   # Utility Settings

diff --git a/assets/uswds/img/usa-icons-bg/search--white.svg b/assets/uswds/img/usa-icons-bg/search--white.svg
diff --git a/content/pages/work-with-us.html b/content/pages/work-with-us.html
@@ -4,7 +4,7 @@
 lead: As federal employees, we share your dedication to serving the American&nbsp;public.
 redirect_from: /how-we-work/
 hide_footer_rule: true
-layout: primary
+layout: default
 ---
 
 {% capture intro %}

diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,36 @@
+/* gulpfile.js */
+
+/**
+* Import uswds-compile
+*/
+const uswds = require('@uswds/compile')
+
+/**
+* USWDS version
+* Set the major version of USWDS you're using
+* (Current options are the numbers 2 or 3)
+*/
+uswds.settings.version = 3
+
+/**
+* Path settings
+* Set as many as you need
+*/
+uswds.paths.src.projectSass = './_sass'
+uswds.paths.dist.img = './assets/uswds/img'
+uswds.paths.dist.fonts = './assets/uswds/fonts'
+uswds.paths.dist.js = './assets/uswds/js'
+uswds.paths.dist.css = './assets/css'
+uswds.paths.dist.theme = './_sass/'
+
+/**
+* Exports
+* Add as many as you need
+*/
+exports.compile = uswds.compile
+exports.compileIcons = uswds.compileIcons
+exports.compileSass = uswds.compileSass
+exports.copyAssets = uswds.copyAssets
+exports.copyImages = uswds.copyImages
+exports.watch = uswds.watch
+exports.default = this.watch