Skip to content

README.md

Latest commit

 

History

History
137 lines (104 loc) · 2.85 KB

README.md

File metadata and controls

137 lines (104 loc) · 2.85 KB

The top navigation menu component for archive.org

Update guide

https://git.archive.org/www/offshoot/-/blob/main/guides/update-top-nav.md

Installation

npm i -S @internetarchive/ia-topnav

Usage

// ia-top-nav.js
import { IATopNav } from '@internetarchive/ia-topnav';
export { IATopNav };
<!-- index.html -->
<script type="module">
  import './ia-topnav.js';
</script>

<style>
  /* Defaults */
  ia-topnav {
    --white: #fff;
    --grey13: #222;
    --grey20: #333;
    --grey40: #666;
    --grey28: #474747;
    --grey60: #999;
    --grey66: #aaa;
    --grey80: #ccc;
    --errorYellow: #ffcd27;

    --linkColor: #428bca;
    --linkHoverColor: var(--white);
    --subnavLinkColor: var(--grey66);
    --primaryTextColor: var(--white);
    --inverseTextColor: var(--grey20);
    --lightTextColor: var(--grey60);
    --activeColor: var(--white);
    --activeButtonBg: var(--grey20);
    --iconFill: var(--grey60);

    --searchActiveBg: var(--grey20);
    --searchActiveInputBg: var(--white);
    --searchMenuBg: var(--grey20);
    --desktopSearchIconFill: var(--grey20);

    --mediaMenuBg: var(--grey13);
    --mediaLabelDesktopColor: var(--grey60);
    --activeDesktopMenuIcon: var(--grey28);

    --mediaSliderBg: var(--grey20);
    --mediaSliderDesktopBg: var(--grey28);

    --primaryNavBg: var(--grey13);
    --primaryNavBottomBorder: var(--grey20);

    --desktopSubnavBg: var(--grey20);

    --dropdownMenuBg: var(--grey20);
    --dropdownMenuInfoItem: var(--grey60);
    --dropdownMenuDivider: var(--grey40);

    --loginTextColor: var(--grey60);

    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --logoWidthTablet: 263px;

    --savePageSubmitBg: var(--grey13);
    --savePageSubmitText: var(--white);
    --savePageInputBorder: var(--grey60);
    --savePageErrorText: var(--errorYellow);

    --topOffset: -1500px;
  }
</style>

<!--
  `baseHost` is the navigation base so leave emtpy for relative links
  `mediaBaseHost` is the base host for media like the profile picture if it's not relative

  NOTE:
  When passing in the `searchQuery` attribute from HTML, not LitElement bindings,
  you must base64 the value to account for any special characters.
-->
<ia-topnav
  baseHost="https://archive.org"
  mediaBaseHost="https://archive.org"
  hideSearch=${true}
  username="shaneriley"
  screenName="long_screen_name_that_gets_truncated"
  searchQuery="J2Zvbyc="
></ia-topnav>

Menus object:

Please see [src/data/menus.js](the menu objects) for our valid menus property.

Development

Prerequisite

npm install

Start Development Server

npm run start  // start development server and typescript compiler

then open demo - http://localhost:8000/www/index.html

Testing

npm run test

Testing via browserstack

npm run test:bs

Linting

npm run lint