@internetarchive/ia-topnav 1.1.30 → 1.1.31-heart2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.1.30",
+  "version": "1.1.31-heart2",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",

package/src/primary-nav.js

@@ -142,6 +142,17 @@ class PrimaryNav extends TrackedElement {
     `;
   }
 
+  get mobileDonateHeart() {
+    return html`
+      <a class="mobile-donate-link" href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}>
+        <span class="icon ${this.iconClass}">
+        ${icons.donate}
+      </span>
+      <span class="label">"Donate to the archive"</span>
+      </a>
+    `;
+  }
+
   get secondLogoSlot() {
     return this.allowSecondaryIcon
       ? html`
@@ -158,7 +169,7 @@ class PrimaryNav extends TrackedElement {
   render() {
     const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';
     return html`
-      <nav>
+      <nav class=${this.hideSearch ? 'hide-search' : nothing}>
         <div class=${`branding ${this.secondLogoClass}`}>
           <a
             href=${formatUrl('/', this.baseHost)}
@@ -170,6 +181,7 @@ class PrimaryNav extends TrackedElement {
           >
           ${this.secondLogoSlot}
         </div>
+        ${this.mobileDonateHeart}
         ${this.searchMenu}
         <a href="${formatUrl('/create', this.baseHost)}" class="upload">
           ${icons.upload}

package/src/styles/primary-nav.js

@@ -12,15 +12,21 @@ export default css`
     display: -ms-grid;
     display: grid;
     height: 4rem;
-    grid-template-areas: 'hamburger empty search user';
-    -ms-grid-columns: 4rem minmax(1rem, 100%) 4.3rem 4rem;
-    grid-template-columns: 4rem auto 4.3rem 4rem;
+    grid-template-areas: 'hamburger empty heart search user';
+    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4.3rem 4rem;
+    grid-template-columns: 4rem auto 4rem 4.3rem 4rem;
     -ms-grid-rows: 100%;
     grid-template-rows: 100%;
     background: var(--primaryNavBg);
     border-bottom: 1px solid var(--primaryNavBottomBorder);
   }
 
+  nav.hide-search {
+    grid-template-areas: 'hamburger empty heart user';
+    -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;
+    grid-template-columns: 4rem auto 4rem 4rem;
+  }
+
   button {
     background: none;
     color: inherit;
@@ -62,9 +68,36 @@ export default css`
     padding: 0;
   }
 
-  .search-trigger {
+  .mobile-donate-link {
     -ms-grid-row: 1;
     -ms-grid-column: 3;
+    grid-area: heart;
+    position: relative;
+    padding: 0;
+    z-index: 1;
+    width: 100%;
+    text-align: right;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+  .mobile-donate-link .fill-color {
+    fill: rgb(255, 0, 0);
+  }
+  .mobile-donate-link .label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+  }
+
+.search-trigger {
+    -ms-grid-row: 1;
+    -ms-grid-column: 4;
     grid-area: search;
     position: relative;
     padding: 0;
@@ -95,7 +128,7 @@ export default css`
 
   .user-info {
     -ms-grid-row: 1;
-    -ms-grid-column: 4;
+    -ms-grid-column: 5;
     grid-area: user;
     -ms-grid-row-align: stretch;
     align-self: stretch;
@@ -181,7 +214,8 @@ export default css`
     }
 
     .hamburger,
-    .search-trigger {
+    .search-trigger,
+    .mobile-donate-link {
       display: none;
     }