@internetarchive/ia-topnav 1.2.1 → 1.2.2-alpha2

package/package.json

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

package/src/assets/img/icon-upload-unpadded.js

@@ -0,0 +1,15 @@
+import { html } from 'https://offshoot.prod.archive.org/lit.js';
+
+export default html`
+  <svg
+    height="14"
+    width="14"
+    viewBox="8 8 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="uploadTitleID uploadDescID"
+  >
+    <title id="uploadTitleID">Upload icon</title>
+    <desc id="uploadDescID">An illustration of a horizontal line over an up pointing arrow.</desc>
+    <path class="fill-color" d="m20 12.8 8 10.4h-4.8v8.8h-6.4v-8.8h-4.8zm12-4.8v3.2h-24v-3.2z" fill-rule="evenodd"/>
+  </svg>
+`;

package/src/assets/img/icons.js

@@ -8,6 +8,7 @@ import search from './icon-search.js';
 import software from './icon-software.js';
 import texts from './icon-texts.js';
 import upload from './icon-upload.js';
+import uploadUnpadded from './icon-upload-unpadded.js';
 import user from './icon-user.js';
 import video from './icon-video.js';
 import web from './icon-web.js';
@@ -23,6 +24,7 @@ export default {
   software,
   texts,
   upload,
+  uploadUnpadded,
   user,
   video,
   web,

package/src/data/menus.js

@@ -524,6 +524,7 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
         url: `${prefix}/create`,
         title: 'Upload files',
         analyticsEvent: 'UserUpload',
+        class: 'mobile-upload',
       },
       {
         url: `${prefix}/details/@${userid}`,

package/src/dropdown-menu.js

@@ -1,7 +1,9 @@
 import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
+import { ifDefined } from 'https://offshoot.prod.archive.org/lit/directives/if-defined.js';
 import TrackedElement from './tracked-element.js';
 import dropdownMenuCSS from './styles/dropdown-menu.js';
 import formatUrl from './lib/formatUrl.js';
+import icons from './assets/img/icons.js';
 
 class DropdownMenu extends TrackedElement {
   static get styles() {
@@ -55,9 +57,11 @@ class DropdownMenu extends TrackedElement {
     const calloutText = this.config.callouts?.[link.title];
     return html`<a
       href="${formatUrl(link.url, this.baseHost)}"
+      class="${ifDefined(link.class)}"
       @click=${this.trackClick}
       data-event-click-tracking="${this.config.eventCategory}|Nav${link.analyticsEvent}"
       aria-label=${calloutText ? `New feature: ${link.title}` : nothing}>
+        ${link.class === 'mobile-upload' ? icons.uploadUnpadded : nothing}
         ${link.title}
         ${calloutText ? html`<span class="callout" aria-hidden="true">${calloutText}</span>` : nothing}
     </a>`;

package/src/styles/dropdown-menu.js

@@ -78,6 +78,16 @@ export default css`
     font-weight: bold;
   }
 
+  a.mobile-upload {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }  
+  a.mobile-upload svg {
+    fill: #fff;
+    margin-right: 10px;
+  }
+
   @media (min-width: 890px) {
     nav {
       overflow: visible;
@@ -146,5 +156,9 @@ export default css`
       opacity: 1;
       overflow: visible;
     }
+
+    a.mobile-upload {
+      display: none;
+    }
   }
 `;