Merge pull request #4513 from owid/sitenav-updates

✨ Site Nav Updates
owid · Feb 18, 2025 · 4a81e8c · 4a81e8c
2 parents 2a251cd + 9f37830
commit 4a81e8c
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/site/SiteNavigation.scss b/site/SiteNavigation.scss
@@ -25,12 +25,14 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    @include column-gap(16px);
     padding-top: 12px;
     padding-bottom: 12px;
     @include sm-up {
         @include column-gap(24px);
     }
+    @include md-only {
+        @include column-gap(0px);
+    }
 
     .SiteNavigationToggle--mobile-menu {
         flex: 1; // center owid logo
@@ -105,12 +107,16 @@
         align-items: center;
         justify-content: end;
         height: $search-cta-height;
-        @include column-gap(16px);
+        @include column-gap(8px);
         @include sm-only {
             flex: 1; // center owid logo
         }
 
         .SiteNavigationToggle.newsletter-subscription {
+            // hide the newsletter button at the last little bit before we switch to the mobile view
+            @media (max-width: calc($sm + 40px)) and (min-width: $sm) {
+                display: none;
+            }
             @include sm-only {
                 // when the donate button is hidden, it still captures the
                 // :last-child selector of the column-gap mixin of the parent

diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
@@ -147,7 +147,10 @@ export const SiteNavigation = ({
                                     </SiteNavigationToggle>
                                 </li>
                                 <li>
-                                    <a href="/latest">Latest</a>
+                                    <a href="/data">Data</a>
+                                </li>
+                                <li>
+                                    <a href="/data-insights">Insights</a>
                                 </li>
                                 <li className="with-relative-dropdown">
                                     <SiteNavigationToggle

diff --git a/site/SiteResources.tsx b/site/SiteResources.tsx
@@ -2,16 +2,16 @@ export const SiteResources = () => {
     return (
         <ul>
             <li>
-                <a href="/data">Data Catalog</a>
+                <a href="/latest">Latest Articles</a>
             </li>
             <li>
-                <a href="/data-insights">Daily Data Insights</a>
+                <a href="/explorers">Data Explorers</a>
             </li>
             <li>
-                <a href="/sdgs">Sustainable Development Goals Tracker</a>
+                <a href="/sdgs">SDG Trackers</a>
             </li>
             <li>
-                <a href="/teaching">Teaching Hub</a>
+                <a href="/teaching">Teaching Materials</a>
             </li>
         </ul>
     )

diff --git a/site/search/Autocomplete.scss b/site/search/Autocomplete.scss
@@ -136,7 +136,9 @@
     outline: none;
 }
 
-@include md-down {
+// A magic number slightly higher than our $md breakpoint to ensure there's enough room
+// for everything in the site nav between 960-1045px. Mirrored in Autocomplete.tsx
+@media (max-width: 1045px) {
     .aa-DetachedSearchButtonIcon svg {
         fill: #fff;
     }

diff --git a/site/search/Autocomplete.tsx b/site/search/Autocomplete.tsx
@@ -235,7 +235,9 @@ export function Autocomplete({
     onClose,
     className,
     placeholder = DEFAULT_SEARCH_PLACEHOLDER,
-    detachedMediaQuery = "(max-width: 960px)",
+    // A magic number slightly higher than our $md breakpoint to ensure there's enough room
+    // for everything in the site nav between 960-1045px. Mirrored in Autocomplete.scss
+    detachedMediaQuery = "(max-width: 1045px)",
     panelClassName,
 }: {
     onActivate?: () => void