@internetarchive/ia-topnav 2.0.1 → 2.1.0-alpha-webdev8170.0

package/dist/src/styles/save-page-form.js

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 export default css `
   div {
     display: grid;
@@ -44,7 +45,7 @@ export default css `
     display: block;
   }
 
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     h3 {
       margin-top: 0;
       font: normal 100 1.6rem var(--themeFontFamily);

package/dist/src/styles/save-page-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"save-page-form.js","sourceRoot":"","sources":["../../../src/styles/save-page-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  div {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-column-gap: 0.8rem;\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n\n  input[type='text'] {\n    width: 100%;\n    height: 3rem;\n    box-sizing: border-box;\n    border: 1px solid var(--savePageInputBorder);\n    border-radius: 0.5rem;\n    color: var(--grey13);\n    font-size: inherit;\n  }\n\n  input[type='submit'] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    padding: 0.4rem 0.8rem;\n    font: normal 1.3rem var(--themeFontFamily);\n    text-transform: uppercase;\n    color: var(--savePageSubmitText);\n    border: none;\n    border-radius: 16px;\n    background: var(--savePageSubmitBg);\n    cursor: pointer;\n  }\n\n  .error {\n    display: none;\n    margin-top: 0.5rem;\n    font-weight: bold;\n    color: var(--savePageErrorText);\n  }\n\n  .visible {\n    display: block;\n  }\n\n  @media (min-width: 890px) {\n    h3 {\n      margin-top: 0;\n      font: normal 100 1.6rem var(--themeFontFamily);\n    }\n  }\n`;\n"]}
+{"version":3,"file":"save-page-form.js","sourceRoot":"","sources":["../../../src/styles/save-page-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA6CK,wBAAwB;;;;;;CAM9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n  div {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    grid-column-gap: 0.8rem;\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n\n  input[type='text'] {\n    width: 100%;\n    height: 3rem;\n    box-sizing: border-box;\n    border: 1px solid var(--savePageInputBorder);\n    border-radius: 0.5rem;\n    color: var(--grey13);\n    font-size: inherit;\n  }\n\n  input[type='submit'] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    padding: 0.4rem 0.8rem;\n    font: normal 1.3rem var(--themeFontFamily);\n    text-transform: uppercase;\n    color: var(--savePageSubmitText);\n    border: none;\n    border-radius: 16px;\n    background: var(--savePageSubmitBg);\n    cursor: pointer;\n  }\n\n  .error {\n    display: none;\n    margin-top: 0.5rem;\n    font-weight: bold;\n    color: var(--savePageErrorText);\n  }\n\n  .visible {\n    display: block;\n  }\n\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n    h3 {\n      margin-top: 0;\n      font: normal 100 1.6rem var(--themeFontFamily);\n    }\n  }\n`;\n"]}

package/dist/src/styles/wayback-search.js

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 export default css `
   form {
   }
@@ -33,7 +34,7 @@ export default css `
     transform: translateY(-50%);
   }
 
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     fieldset a,
     .search-field {
       display: block;

package/dist/src/styles/wayback-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"wayback-search.js","sourceRoot":"","sources":["../../../src/styles/wayback-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  form {\n  }\n\n  p {\n    margin-bottom: 1rem;\n    font-size: 1.6rem;\n    text-align: center;\n  }\n\n  fieldset {\n    padding: 0.5rem;\n    border-radius: 5px;\n    box-shadow: none;\n  }\n\n  input {\n    padding-left: 3rem;\n    margin-top: 0.3rem;\n    font-size: 1.4rem;\n    border-color: #bca38e;\n    background: #fff;\n  }\n\n  input::placeholder,\n  input::-webkit-input-placeholder {\n    color: #8e8e8e;\n  }\n\n  .search-field svg {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  @media (min-width: 890px) {\n    fieldset a,\n    .search-field {\n      display: block;\n      width: auto;\n    }\n\n    fieldset a {\n      margin: 0 1.5rem;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"wayback-search.js","sourceRoot":"","sources":["../../../src/styles/wayback-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAkCK,wBAAwB;;;;;;;;;;;CAW9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\n\nexport default css`\n  form {\n  }\n\n  p {\n    margin-bottom: 1rem;\n    font-size: 1.6rem;\n    text-align: center;\n  }\n\n  fieldset {\n    padding: 0.5rem;\n    border-radius: 5px;\n    box-shadow: none;\n  }\n\n  input {\n    padding-left: 3rem;\n    margin-top: 0.3rem;\n    font-size: 1.4rem;\n    border-color: #bca38e;\n    background: #fff;\n  }\n\n  input::placeholder,\n  input::-webkit-input-placeholder {\n    color: #8e8e8e;\n  }\n\n  .search-field svg {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n    fieldset a,\n    .search-field {\n      display: block;\n      width: auto;\n    }\n\n    fieldset a {\n      margin: 0 1.5rem;\n    }\n  }\n`;\n"]}

package/dist/src/styles/wayback-slider.js

@@ -1,9 +1,10 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 import { subnavListCSS } from './base';
 export default [
     subnavListCSS,
     css `
-    @media (min-width: 890px) {
+    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
       :host {
         display: block;
         grid-column: 1 / 4;

package/dist/src/styles/wayback-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"wayback-slider.js","sourceRoot":"","sources":["../../../src/styles/wayback-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { subnavListCSS } from './base';\n\nexport default [\n  subnavListCSS,\n  css`\n    @media (min-width: 890px) {\n      :host {\n        display: block;\n        grid-column: 1 / 4;\n        padding: 0 1.5rem;\n      }\n\n      h4 {\n        margin-top: 0;\n        font: normal 100 1.6rem var(--themeFontFamily);\n      }\n\n      .grid {\n        display: grid;\n        grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);\n        /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */\n        grid-column-gap: 2.5rem;\n      }\n\n      .link-lists {\n        display: grid;\n        grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);\n        grid-column-gap: 2.5rem;\n      }\n    }\n  `,\n];\n"]}
+{"version":3,"file":"wayback-slider.js","sourceRoot":"","sources":["../../../src/styles/wayback-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAEvC,eAAe;IACb,aAAa;IACb,GAAG,CAAA;yBACoB,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;GAyB9C;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { TOPNAV_MOBILE_BREAKPOINT } from '../models';\nimport { subnavListCSS } from './base';\n\nexport default [\n  subnavListCSS,\n  css`\n    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {\n      :host {\n        display: block;\n        grid-column: 1 / 4;\n        padding: 0 1.5rem;\n      }\n\n      h4 {\n        margin-top: 0;\n        font: normal 100 1.6rem var(--themeFontFamily);\n      }\n\n      .grid {\n        display: grid;\n        grid-template-columns: minmax(auto, 260px) 1fr minmax(auto, 260px);\n        /* Possible for 890 - 935: minmax(auto, 260px) 1fr minmax(auto, 260px) */\n        grid-column-gap: 2.5rem;\n      }\n\n      .link-lists {\n        display: grid;\n        grid-template-columns: calc(50% - 1.25rem) calc(50% - 1.25rem);\n        grid-column-gap: 2.5rem;\n      }\n    }\n  `,\n];\n"]}

package/dist/src/user-menu.js

@@ -13,19 +13,19 @@ let UserMenu = class UserMenu extends DropdownMenu {
         return dropdownStyles;
     }
     render() {
-        return html `
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden=${!this.open}
-          aria-expanded=${this.open}
-        >
-          <h3>${this.screenName}</h3>
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
+        return html `
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden=${!this.open}
+          aria-expanded=${this.open}
+        >
+          <h3>${this.screenName}</h3>
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
     `;
     }
 };

package/dist/src/user-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-menu.js","sourceRoot":"","sources":["../../src/user-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QACe,aAAQ,GAAG,EAAE,CAAC;QACd,eAAU,GAAG,EAAE,CAAC;IAsB9C,CAAC;IApBC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,SAAS;wBACT,CAAC,IAAI,CAAC,IAAI;0BACR,IAAI,CAAC,IAAI;;gBAEnB,IAAI,CAAC,UAAU;;cAEjB,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;CACF,CAAA;AAvB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAiB;AAFzB,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAwB5B;eAxBoB,QAAQ","sourcesContent":["import { CSSResultGroup, html } from 'lit';\r\nimport DropdownMenu from './dropdown-menu';\r\nimport dropdownStyles from './styles/dropdown-menu';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\n@customElement('user-menu')\r\nexport default class UserMenu extends DropdownMenu {\r\n  @property({ type: String }) username = '';\r\n  @property({ type: String }) screenName = '';\r\n\r\n  static get styles(): CSSResultGroup {\r\n    return dropdownStyles;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"nav-container\">\r\n        <nav\r\n          class=\"${this.menuClass}\"\r\n          aria-hidden=${!this.open}\r\n          aria-expanded=${this.open}\r\n        >\r\n          <h3>${this.screenName}</h3>\r\n          <ul>\r\n            ${this.dropdownItems}\r\n          </ul>\r\n        </nav>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"user-menu.js","sourceRoot":"","sources":["../../src/user-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QACe,aAAQ,GAAG,EAAE,CAAC;QACd,eAAU,GAAG,EAAE,CAAC;IAsB9C,CAAC;IApBC,MAAM,KAAK,MAAM;QACf,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;mBAGI,IAAI,CAAC,SAAS;wBACT,CAAC,IAAI,CAAC,IAAI;0BACR,IAAI,CAAC,IAAI;;gBAEnB,IAAI,CAAC,UAAU;;cAEjB,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;CACF,CAAA;AAvB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAiB;AAFzB,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAwB5B;eAxBoB,QAAQ","sourcesContent":["import { CSSResultGroup, html } from 'lit';\nimport DropdownMenu from './dropdown-menu';\nimport dropdownStyles from './styles/dropdown-menu';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('user-menu')\nexport default class UserMenu extends DropdownMenu {\n  @property({ type: String }) username = '';\n  @property({ type: String }) screenName = '';\n\n  static get styles(): CSSResultGroup {\n    return dropdownStyles;\n  }\n\n  render() {\n    return html`\n      <div class=\"nav-container\">\n        <nav\n          class=\"${this.menuClass}\"\n          aria-hidden=${!this.open}\n          aria-expanded=${this.open}\n        >\n          <h3>${this.screenName}</h3>\n          <ul>\n            ${this.dropdownItems}\n          </ul>\n        </nav>\n      </div>\n    `;\n  }\n}\n"]}

package/index.ts

@@ -1,3 +1,3 @@
-import { IATopNav } from './src/ia-topnav';
+export { IATopNav } from './src/ia-topnav';
 
-export { IATopNav };
+export { TOPNAV_MOBILE_BREAKPOINT } from './src/models';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "2.0.1",
+  "version": "2.1.0-alpha-webdev8170.0",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",

package/src/dropdown-menu.ts

@@ -1,132 +1,132 @@
-import {
-  CSSResultGroup,
-  html,
-  nothing,
-  PropertyValues,
-  TemplateResult,
-} from 'lit';
-import { property } from 'lit/decorators.js';
-
-import icons from './assets/img/icons';
-import { defaultTopNavConfig } from './data/menus';
-import formatUrl from './lib/format-url';
-import { makeBooleanString } from './lib/make-boolean-string';
-import { IATopNavConfig, IATopNavLink } from './models';
-import dropdownMenuCSS from './styles/dropdown-menu';
-import TrackedElement from './tracked-element';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import KeyboardNavigation from './lib/keyboard-navigation';
-
-export default class DropdownMenu extends TrackedElement {
-  @property({ type: String }) baseHost = '';
-  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
-  @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];
-  @property({ type: Boolean }) animated = false;
-  @property({ type: Boolean }) open = false;
-
-  private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (this: HTMLElement, ev: KeyboardEvent) => any;
-
-  static get styles(): CSSResultGroup {
-    return dropdownMenuCSS;
-  }
-
-  updated(props: PropertyValues) {
-    if (props.has('open') && this.open) {
-      const container = this.shadowRoot?.querySelector(
-        '.nav-container',
-      ) as HTMLElement;
-
-      if (container) {
-        const keyboardNavigation = new KeyboardNavigation(
-          container,
-          'usermenu',
-        );
-        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
-        if (this.previousKeydownListener) {
-          this.removeEventListener('keydown', this.previousKeydownListener);
-        }
-        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
-      }
-    }
-  }
-
-  get dropdownItems() {
-    if (!this.menuItems) return nothing;
-
-    if (!Array.isArray(this.menuItems[0])) {
-      const submenu = this.menuItems as IATopNavLink[];
-      return this.dropdownSection(submenu);
-    }
-    return this.menuItems.map((submenu, i) => {
-      const joiner = i ? DropdownMenu.dropdownDivider : html``;
-      if (!Array.isArray(submenu)) {
-        return;
-      }
-      return [joiner, ...this.dropdownSection(submenu)];
-    });
-  }
-
-  static get dropdownDivider() {
-    return html`<li class="divider"></li>`;
-  }
-
-  private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {
-    return submenu.map(
-      (item) => html`
-        <li>
-          ${item.url
-            ? this.dropdownLink(item)
-            : DropdownMenu.dropdownText(item)}
-        </li>
-      `,
-    );
-  }
-
-  dropdownLink(link: IATopNavLink): TemplateResult {
-    const calloutText = this.config?.callouts?.[link.title];
-    const isMobileUpload = link.class === 'mobile-upload';
-    const isTabbable = this.open && !isMobileUpload;
-
-    return html`<a
-      href="${formatUrl(link.url, this.baseHost)}"
-      class=${ifDefined(link.class)}
-      tabindex="${isTabbable ? '' : '-1'}"
-      @click=${this.trackClick}
-      data-event-click-tracking="${this.config
-        ?.eventCategory}|Nav${link.analyticsEvent}"
-      aria-label=${calloutText ? `New feature: ${link.title}` : nothing}
-    >
-      ${isMobileUpload ? icons.uploadUnpadded : nothing} ${link.title}
-      ${calloutText
-        ? html`<span class="callout" aria-hidden="true">${calloutText}</span>`
-        : nothing}
-    </a>`;
-  }
-
-  static dropdownText(item: IATopNavLink) {
-    return html`<span class="info-item">${item.title}</span>`;
-  }
-
-  get menuClass() {
-    if (this.open) return 'open';
-    if (this.animated) return 'closed';
-    return 'initial';
-  }
-
-  render() {
-    return html`
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden="${makeBooleanString(!this.open)}"
-          aria-expanded="${makeBooleanString(this.open)}"
-        >
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
-    `;
-  }
-}
+import {
+  CSSResultGroup,
+  html,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+
+import icons from './assets/img/icons';
+import { defaultTopNavConfig } from './data/menus';
+import formatUrl from './lib/format-url';
+import { makeBooleanString } from './lib/make-boolean-string';
+import { IATopNavConfig, IATopNavLink } from './models';
+import dropdownMenuCSS from './styles/dropdown-menu';
+import TrackedElement from './tracked-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import KeyboardNavigation from './lib/keyboard-navigation';
+
+export default class DropdownMenu extends TrackedElement {
+  @property({ type: String }) baseHost = '';
+  @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;
+  @property({ type: Array }) menuItems: IATopNavLink[] | IATopNavLink[][] = [];
+  @property({ type: Boolean }) animated = false;
+  @property({ type: Boolean }) open = false;
+
+  private previousKeydownListener?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (this: HTMLElement, ev: KeyboardEvent) => any;
+
+  static get styles(): CSSResultGroup {
+    return dropdownMenuCSS;
+  }
+
+  updated(props: PropertyValues) {
+    if (props.has('open') && this.open) {
+      const container = this.shadowRoot?.querySelector(
+        '.nav-container',
+      ) as HTMLElement;
+
+      if (container) {
+        const keyboardNavigation = new KeyboardNavigation(
+          container,
+          'usermenu',
+        );
+        this.addEventListener('keydown', keyboardNavigation.handleKeyDown);
+        if (this.previousKeydownListener) {
+          this.removeEventListener('keydown', this.previousKeydownListener);
+        }
+        this.previousKeydownListener = keyboardNavigation.handleKeyDown;
+      }
+    }
+  }
+
+  get dropdownItems() {
+    if (!this.menuItems) return nothing;
+
+    if (!Array.isArray(this.menuItems[0])) {
+      const submenu = this.menuItems as IATopNavLink[];
+      return this.dropdownSection(submenu);
+    }
+    return this.menuItems.map((submenu, i) => {
+      const joiner = i ? DropdownMenu.dropdownDivider : html``;
+      if (!Array.isArray(submenu)) {
+        return;
+      }
+      return [joiner, ...this.dropdownSection(submenu)];
+    });
+  }
+
+  static get dropdownDivider() {
+    return html`<li class="divider"></li>`;
+  }
+
+  private dropdownSection(submenu: IATopNavLink[]): TemplateResult[] {
+    return submenu.map(
+      (item) => html`
+        <li>
+          ${item.url
+            ? this.dropdownLink(item)
+            : DropdownMenu.dropdownText(item)}
+        </li>
+      `,
+    );
+  }
+
+  dropdownLink(link: IATopNavLink): TemplateResult {
+    const calloutText = this.config?.callouts?.[link.title];
+    const isMobileUpload = link.class === 'mobile-upload';
+    const isTabbable = this.open && !isMobileUpload;
+
+    return html`<a
+      href="${formatUrl(link.url, this.baseHost)}"
+      class=${ifDefined(link.class)}
+      tabindex="${isTabbable ? '' : '-1'}"
+      @click=${this.trackClick}
+      data-event-click-tracking="${this.config
+        ?.eventCategory}|Nav${link.analyticsEvent}"
+      aria-label=${calloutText ? `New feature: ${link.title}` : nothing}
+    >
+      ${isMobileUpload ? icons.uploadUnpadded : nothing} ${link.title}
+      ${calloutText
+        ? html`<span class="callout" aria-hidden="true">${calloutText}</span>`
+        : nothing}
+    </a>`;
+  }
+
+  static dropdownText(item: IATopNavLink) {
+    return html`<span class="info-item">${item.title}</span>`;
+  }
+
+  get menuClass() {
+    if (this.open) return 'open';
+    if (this.animated) return 'closed';
+    return 'initial';
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden="${makeBooleanString(!this.open)}"
+          aria-expanded="${makeBooleanString(this.open)}"
+        >
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}