@internetarchive/ia-topnav 1.1.32 → 1.1.33-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.1.32",
+  "version": "1.1.33-alpha1",
   "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}`,
@@ -540,6 +541,16 @@ export function buildTopNavMenus(userid = '___USERID___', localLinks = true, way
         title: 'My favorites',
         analyticsEvent: 'UserFavorites',
       },
+      {
+        url: `${prefix}/details/@${userid}?tab=lists`,
+        title: 'My lists',
+        analyticsEvent: 'UserLists',
+      },
+      {
+        url: `${prefix}/details/@${userid}?tab=collections`,
+        title: 'My collections',
+        analyticsEvent: 'UserCollections',
+      },
       {
         url: `${prefix}/details/@${userid}/web-archive`,
         title: 'My web archives',

package/src/dropdown-menu.js

@@ -1,7 +1,9 @@
 import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
+import { ifDefined } from '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() {
@@ -52,7 +54,7 @@ class DropdownMenu extends TrackedElement {
   }
 
   dropdownLink(link) {
-    return html`<a href="${formatUrl(link.url, this.baseHost)}" @click=${this.trackClick} data-event-click-tracking="${this.config.eventCategory}|Nav${link.analyticsEvent}">${link.title}</a>`;
+    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}">${link.class === 'mobile-upload' ? icons.uploadUnpadded : nothing} ${link.title}</a>`;
   }
 
   static dropdownText(item) {

package/src/styles/dropdown-menu.js

@@ -67,6 +67,16 @@ export default css`
     color: var(--dropdownMenuInfoItem);
   }
 
+  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;
@@ -135,5 +145,9 @@ export default css`
       opacity: 1;
       overflow: visible;
     }
+
+    a.mobile-upload {
+      display: none;
+    }
   }
 `;