@ucd-lib/theme-elements 0.0.2 → 0.0.6

package/brand/ucd-theme-header/ucd-theme-header.js

@@ -1,7 +1,10 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-header.tpl.js";
 
-import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.js";
+import { 
+  IntersectionObserverController,
+  MutationObserverController, 
+  WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeHeader
@@ -15,6 +18,7 @@ import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.j
  * @property {String} figureSrc - Site logo/icon to display next to site name
  * @property {String} siteUrl - Url to use for links around site name and figure
  * @property {Boolean} opened - Whether header is open in the mobile view
+ * @property {Boolean} preventFixed - Navbar will not be fixed to top of screen in desktop view
  * 
  * @example
  *  <ucd-theme-header site-name="A UC Davis Website">
@@ -35,8 +39,10 @@ import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.j
  *  </ucd-theme-header>
  * 
  */
-export default class UcdThemeHeader extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints) {
+export default class UcdThemeHeader extends LitElement {
+  
+  mutationObserver = new MutationObserverController(this);
+  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -45,11 +51,13 @@ export default class UcdThemeHeader extends Mixin(LitElement)
       figureSrc: {type: String, attribute: "figure-src"},
       siteUrl: {type: String, attribute: "site-url"},
       opened: {type: Boolean},
+      preventFixed: {type: Boolean, attribute: "prevent-fixed"},
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
       _hasSlottedBranding: {type: Boolean, state: true},
       _hasQuickLinks: {type: Boolean, state: true},
-      _hasSearch: {type: Boolean, state: true}
+      _hasSearch: {type: Boolean, state: true},
+      _brandingBarInView: {type: Boolean, state: true}
     };
   }
 
@@ -73,26 +81,38 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     this._hasQuickLinks = false;
     this._hasSearch = false;
     this._animationDuration = 500;
+    this._brandingBarInView = false;
 
   }
 
-  /**
-   * @method updated
-   * @description Lit lifecycle method called after element has updated.
-   * @param {Map} props - Properties updated in cycle
-   * @private
-   */
-  updated( props ){
+  connectedCallback(){
+    super.connectedCallback();
+    if ( !this.preventFixed ) {
+      this.intersectionObserver = new IntersectionObserverController(this, {}, "_onBrandingBarIntersection", false);
+    }
+  }
 
-    // Check if we're using the default branding div
-    const brandProps = ['siteName', 'slogan', 'figureSrc'];
-    if ( brandProps.map(p => props.has(p)).filter(Boolean).length ) {
-      if ( brandProps.map(p => this[p]).filter(Boolean).length ) {
-        this._hasSlottedBranding = false;
+  firstUpdated(){
+    if ( !this.preventFixed ) {
+      let aboveNav = this.renderRoot.getElementById('branding-bar-container');
+      this.intersectionObserver.observer.observe(aboveNav);
+    }
+  }
+
+  _onBrandingBarIntersection(entries){
+    let offSetValue = 0;
+    try {
+      offSetValue = this.renderRoot.getElementById('nav-bar').getBoundingClientRect().height;
+    } catch (error) {}
+    if ( offSetValue > 150 ) offSetValue = 0;
+    entries.forEach(entry => {
+      this._brandingBarInView = entry.isIntersecting;
+      if (this._brandingBarInView) {
+        this.style.marginBottom = '0px';
       } else {
-        this._hasSlottedBranding = true;
+        this.style.marginBottom = offSetValue + "px";
       }
-    }
+    })
   }
 
   /**
@@ -105,7 +125,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = true;
     this._transitioning = true;
-    await this._waitForAnimation();
+    await this.wait.wait(this._animationDuration);
     this._transitioning = false;
     return true;
 
@@ -121,7 +141,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = false;
     this._transitioning = true;
-    await this._waitForAnimation();
+    await this.wait.wait(this._animationDuration);
     this._transitioning = false;
     return true;
 
@@ -168,6 +188,24 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     return classes;
   }
 
+  /**
+   * @method _getHeaderClasses
+   * @description Get classes to be assigned to the header element
+   * @private
+   * @returns {Object}
+   */
+  _getHeaderClasses(){
+    let classes = {
+      "l-header": true,
+      "header": true
+    };
+
+    classes['fixed-mobile'] = !this.preventFixed;
+    classes['fixed-desktop'] = !this.preventFixed && !this._brandingBarInView;
+    
+    return classes;
+  }
+
   /**
    * @method _ucdLogo
    * @description Returns URI-encoded svg string of UC Davis logo
@@ -213,18 +251,16 @@ export default class UcdThemeHeader extends Mixin(LitElement)
     } else {
       this._hasSearch = false;
     }
-  }
 
-  /**
-   * @method _waitForAnimation
-   * @private
-   * @description Wait for time designated for open/close animation
-   * @returns {Promise}
-   */
-  async _waitForAnimation() {
-    return new Promise(resolve => {
-      setTimeout(resolve, this._animationDuration);
-    });
+    let UcdlibBrandingBar = this.querySelector('ucdlib-branding-bar');
+    if ( UcdlibBrandingBar ) {
+      UcdlibBrandingBar.setAttribute('slot', 'branding-bar');
+      this._hasSlottedBranding = true;
+    } else if ( this.querySelector("*[slot='branding-bar']") ){
+      this._hasSlottedBranding = true;
+    } else {
+      this._hasSlottedBranding = false;
+    }
   }
 
 }

package/brand/ucd-theme-header/ucd-theme-header.tpl.js

@@ -20,6 +20,39 @@ export function styles() {
     button {
       cursor: pointer;
     }
+    ::slotted(ucdlib-branding-bar){
+      width: 100%;
+    }
+
+    @media (max-width: 991px) {
+      .fixed-mobile .mobile-bar {
+        position: fixed;
+        width: 100%;
+        z-index: 1000;
+        top: 0;
+      }
+      .fixed-mobile .off-canvas {
+        position: fixed;
+        overflow: auto;
+        z-index: 1000;
+        top: 55px;
+      }
+      .fixed-mobile .l-header__branding {
+        margin-top: 55px;
+      }
+    }
+
+    @media (min-width: 992px) {
+      .fixed-desktop .l-navbar {
+        position: fixed;
+        z-index: 1000;
+        top: 0;
+        right: 0;
+        left: 0;
+        width: 100%;
+      }
+    }
+
   `;
 
   return [
@@ -41,7 +74,7 @@ ${this.isDemo ? html`
     .l-navbar { top: auto !important}
   </style>
 ` : html``}
-<header class="l-header header">
+<header class=${classMap(this._getHeaderClasses())}>
   <div class="mobile-bar">
     <div class="mobile-bar__nav-toggle">
       <button 
@@ -61,32 +94,34 @@ ${this.isDemo ? html`
     </div>
   </div>
 
-  <div class="header__bar">
-      <div class="header__university">
-        <a href="https://www.ucdavis.edu/">
-          <img class="ucd-logo" src='data:image/svg+xml;utf8,${this._ucdLogo()}'>
-        </a>
-      </div>
-  </div>
-  <div class="l-header__branding">
-    ${this._hasSlottedBranding ? html`
-      <slot name="branding-bar"></slot>
-    ` : html`
-      <div class="site-branding">
-        <div class="site-branding__figure" ?hidden=${!this.figureSrc}>
-          <a href="${this.siteUrl}" class=""><img src=${this.figureSrc} class="site-logo" alt="Site Logo" /></a>
+  <div id="branding-bar-container">
+    <div class="header__bar">
+        <div class="header__university">
+          <a href="https://www.ucdavis.edu/">
+            <img class="ucd-logo" src='data:image/svg+xml;utf8,${this._ucdLogo()}'>
+          </a>
         </div>
-        <div class="site-branding__body">
-        <h1 class="site-branding__site-name" ?hidden=${!this.siteName}>
-          <a href=${this.siteUrl}>${this.siteName}</a>
-        </h1>
-        <div class="site-branding__slogan" ?hidden=${!this.slogan}>${this.slogan}</div>
+    </div>
+    <div class="l-header__branding">
+      ${this._hasSlottedBranding ? html`
+        <slot name="branding-bar"></slot>
+      ` : html`
+        <div class="site-branding">
+          <div class="site-branding__figure" ?hidden=${!this.figureSrc}>
+            <a href="${this.siteUrl}" class=""><img src=${this.figureSrc} class="site-logo" alt="Site Logo" /></a>
+          </div>
+          <div class="site-branding__body">
+          <h1 class="site-branding__site-name" ?hidden=${!this.siteName}>
+            <a href=${this.siteUrl}>${this.siteName}</a>
+          </h1>
+          <div class="site-branding__slogan" ?hidden=${!this.slogan}>${this.slogan}</div>
+          </div>
         </div>
-      </div>
-    `}
+      `}
+    </div>
   </div>
 
-  <div class="${classMap(this._getNavbarClasses())}">
+  <div class="${classMap(this._getNavbarClasses())}" id="nav-bar">
     <div class="l-container--navigation off-canvas off-canvas--left">
       <div class="off-canvas__container l-nav-horizontal">
         ${this._hasSearch ? html`

package/brand/ucd-theme-pagination/ucd-theme-pagination.js

@@ -1,7 +1,8 @@
 import { LitElement, html } from 'lit';
 //import { Page } from 'puppeteer';
 import {render, styles} from "./ucd-theme-pagination.tpl.js";
-import { Mixin, BreakPoints } from "../../utils/index.js";
+
+import { BreakPointsController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePagination
@@ -11,6 +12,7 @@ import { Mixin, BreakPoints } from "../../utils/index.js";
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-pagination
  * 
  * @property {String} base-path - for anchor tag href
+ * @property {String} queryParams - Append query parameters if constructing an anchor tag
  * @property {String} current-page - Page to show and highlight
  * @property {String} max-pages - Max number of total pages
  * @property {String} visible-link-count - How many page links to show
@@ -33,8 +35,8 @@ import { Mixin, BreakPoints } from "../../utils/index.js";
  * </ucd-theme-pagination>
  * 
  */
-export default class UcdThemePagination extends Mixin(LitElement)
-  .with(BreakPoints) {
+export default class UcdThemePagination extends LitElement {
+  breakPoints = new BreakPointsController(this);
 
   static get properties() {
     return {
@@ -42,6 +44,10 @@ export default class UcdThemePagination extends Mixin(LitElement)
         type: String, 
         attribute: 'base-path'
       },
+      queryParams: {
+        type: String,
+        attribute: 'query-params'
+      },
       useHash : {
         type: Boolean, 
         attribute: 'use-hash'
@@ -94,6 +100,7 @@ export default class UcdThemePagination extends Mixin(LitElement)
     this.disableLabel = false;
     this.type = 'virtual';
     this.basePath = '';
+    this.queryParams = '';
     this.visibleLinkCount = 7;
     this.currentPage = 1;
     this.maxPages = 1;
@@ -101,8 +108,7 @@ export default class UcdThemePagination extends Mixin(LitElement)
     this.xs_screen = false;
     this.size = '';
 
-    this.screen_check = (window.innerWidth <= this._mobileBreakPoint)  ? true : false;
-    console.log(this.screen_check);
+    this.screen_check = (window.innerWidth <= this.breakPoints.mobileBreakPoint)  ? true : false;
 
     this.render = render.bind(this);
   }
@@ -190,7 +196,7 @@ export default class UcdThemePagination extends Mixin(LitElement)
         </li>`;            
     }
 
-    let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page;
+    let href = (this.useHash ? '#' : '') + (this.basePath || '/') + page + (this.queryParams ? '?' + this.queryParams : '');
     return html`<li class="pager__item ${args.class || ''}">
         ${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ? 
           html` <a style="pointer-events: none; cursor: default; color:#999999; background:white;" href="${href}">${args.label || page}</a>`: 

package/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.js

@@ -4,7 +4,8 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.js";
+import { Mixin, NavElement } from "../../utils/mixins";
+import { MutationObserverController, BreakPointsController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePrimaryNav
@@ -33,7 +34,10 @@ import { Mixin, MutationObserverElement, BreakPoints } from "../../utils/index.j
  *  </ucd-theme-primary-nav>
  */
 export default class UcdThemePrimaryNav extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints) {
+  .with(NavElement) {
+
+  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+  breakPoints = new BreakPointsController(this);
 
   static get properties() {
     return {
@@ -58,8 +62,6 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     this.styleModifiers = "";
     this.hoverDelay = 300;
     this.animationDuration = 300;
-    this.navItems = [];
-    this.maxDepth = 2;
 
     this._classPrefix = "primary-nav";
     this._acceptedNavTypes = ['superfish', 'mega'];
@@ -99,7 +101,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     if ( !navItem ) return;
 
     // Open on mobile
-    if ( this.isMobile() ) {
+    if ( this.breakPoints.isMobile() ) {
       let nav = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
       if ( !nav ) return;
       let ul = nav.querySelector('ul');
@@ -108,14 +110,14 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       navItem.isTransitioning = true;
 
       // Get expanded height
-      navItem.mobileStyles.display = "block";
-      navItem.mobileStyles.height = 0 + "px";
+      navItem.inlineStyles.display = "block";
+      navItem.inlineStyles.height = 0 + "px";
       this.requestUpdate();
       await this.updateComplete;
       const expandedHeight = ul.scrollHeight + "px";
 
       // Set expanded height
-      navItem.mobileStyles.height = expandedHeight;
+      navItem.inlineStyles.height = expandedHeight;
       this.requestUpdate();
       await this.updateComplete;
 
@@ -131,7 +133,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
         return;
       }
 
-      this.clearMobileAnimationStyles(navItem);
+      this.clearItemInlineStyles(navItem);
       if ( navItem.isClosing ) {
         navItem.isClosing = false;
         this.requestUpdate();
@@ -162,7 +164,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     if ( !navItem ) return;
 
     // close on mobile
-    if ( this.isMobile() ) {
+    if ( this.breakPoints.isMobile() ) {
       let nav = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
       if ( !nav ) return;
       let ul = nav.querySelector('ul');
@@ -171,15 +173,15 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       navItem.isTransitioning = true;
 
       // Set expanded height
-      navItem.mobileStyles.height = ul.scrollHeight + "px";
-      navItem.mobileStyles.display = "block";
+      navItem.inlineStyles.height = ul.scrollHeight + "px";
+      navItem.inlineStyles.display = "block";
       this.requestUpdate();
       await this.updateComplete;
 
       // Set height to 0 by requesting all of the animation frames :-(
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          navItem.mobileStyles.height = "0px";
+          navItem.inlineStyles.height = "0px";
           this.requestUpdate();
   
           requestAnimationFrame(() => {
@@ -200,7 +202,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       }
 
 
-      this.clearMobileAnimationStyles(navItem);
+      this.clearItemInlineStyles(navItem);
       if ( navItem.timeout ) clearTimeout(navItem.timeout);
       if ( !navItem.isOpen ) return;
   
@@ -234,22 +236,6 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     });
   }
 
-  /**
-   * @method clearMobileAnimationStyles
-   * @description Removes inline styles on a nav element (used for mobile transition animation)
-   * @param {Object} navItem - Member of the this.navItems array
-   */
-  clearMobileAnimationStyles(navItem){
-    if (
-      navItem &&
-      navItem.mobileStyles && 
-      Object.keys(navItem.mobileStyles).length > 0 
-    ) {
-      navItem.mobileStyles = {};
-      this.requestUpdate();
-    }
-  }
-
   /**
    * @method isMegaMenu
    * @description Does this element use the mega menu?
@@ -260,20 +246,6 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     return false;
   }
 
-  /**
-   * @method getNavItem
-   * @description Retrieves an item from the navItems array.
-   * @param {Array} location - Coordinates of the item in the 'navItems' array. i.e. [0, 1, 4].
-   * @returns {Object}
-   */
-  getNavItem(location){
-    let accessor = "this.navItems";
-    if ( location && location.length > 0) {
-      accessor += "[" + location.join("].subItems[") + "]";
-    }
-    return eval(accessor);
-  }
-
   /**
    * @method _getNavClasses
    * @private
@@ -295,46 +267,14 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
   /**
    * @method _onChildListMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){
-    const children = Array.from(this.children);
-    let navItems = children.map((child) => this._makeNavItemTree(child)).filter(navItem => navItem.linkText);
+    let navItems = this.parseNavChildren();
     if ( navItems.length ) this.navItems = navItems;
   }
 
-  /**
-   * @method _makeNavItemTree
-   * @private
-   * @description Extracts menu item data from DOM Element
-   * @param {Element} ele - Element
-   * @returns {Object} Formatted object describing the menu item and its children
-   */
-  _makeNavItemTree(ele){
-    let linkText, href, subItems = [], isOpen=false, mobileStyles={};
-    if ( ele.tagName === 'LI' && ele.children.length > 0) ele = ele.children[0];
-
-    if ( ele.tagName === 'A' ) {
-      linkText = ele.innerText;
-      href = ele.href;
-    } else if ( ele.tagName === 'LI' ) {
-      linkText = ele.innerText;
-    } else if ( ele.tagName === 'OL' || ele.tagName === 'UL' ) {
-      linkText = ele.getAttribute('link-text');
-      href = ele.getAttribute('href');
-
-      for (const child of Array.from(ele.children)) {
-        let childItem = this._makeNavItemTree(child);
-        if ( childItem.linkText ) subItems.push(childItem);
-      }
-    }
-
-    if ( linkText ) linkText = linkText.trim();
-    return {linkText, href, subItems, isOpen, mobileStyles};
-
-  }
-
   /**
    * @method _renderNavItem
    * @private
@@ -347,7 +287,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     const depth = location.length - 1;
 
     // Render item and its subnav
-    if ( this._hasSubNav(navItem) && depth < this.maxDepth) {
+    if ( this.itemHasSubNav(navItem) && depth < this.maxDepth) {
       return html`
       <li 
         id="nav--${location.join("-")}"
@@ -409,7 +349,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       this.isMegaMenu() && 
       depth > 0 && 
       !this._megaIsOpen &&
-      this.isDesktop()
+      this.breakPoints.isDesktop()
     ) i = -1;
 
     return i;
@@ -439,7 +379,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Array} navLocation - Array coordinates of corresponding nav item
    */
   async _toggleMobileMenu(navLocation){
-    if ( this.isDesktop() ) return;
+    if ( this.breakPoints.isDesktop() ) return;
     let navItem = this.getNavItem(navLocation);
     if ( navItem.isOpen ) {
       this.closeSubNav(navLocation);
@@ -455,7 +395,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavMouseenter(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -472,7 +412,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavMouseleave(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -490,7 +430,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavFocusin(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
     
@@ -511,7 +451,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemMouseenter(e){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     this.openSubNav(e.target.key);
   }
 
@@ -522,7 +462,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemFocus(e){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     const LI = e.target.parentElement.parentElement;
 
     if (LI.hasnav) {
@@ -561,7 +501,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _completeMobileTransition(navItem){
     navItem.timeout = setTimeout(() => {
-      navItem.mobileStyles = {};
+      navItem.inlineStyles = {};
       navItem.isOpen = !navItem.isOpen;
       navItem.isTransitioning = false;
       this.requestUpdate();
@@ -575,7 +515,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemMouseleave(e){
-    if ( this.isMobile() || this.isMegaMenu() ) return;
+    if ( this.breakPoints.isMobile() || this.isMegaMenu() ) return;
     this.closeSubNav(e.target.key);
   }
 
@@ -585,7 +525,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @description Attached to the top-level nav element. Closes subnav if it doesn't contain focused link.
    */
   _onNavFocusout(){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     if ( this.isMegaMenu() ) {
       if ( this._megaTimeout ) clearTimeout(this._megaTimeout);
       requestAnimationFrame(() => {
@@ -630,18 +570,6 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
 
   }
 
-  /**
-   * @method _hasSubNav
-   * @private
-   * @description Utility function for determining if a menu has subitems
-   * @param {Object} navItem - A member of the navItems array.
-   * @returns {Boolean}
-   */
-  _hasSubNav(navItem){
-    if ( navItem && navItem.subItems && navItem.subItems.length) return true;
-    return false;
-  }
-
   /**
    * @method _getItemMobileStyles
    * @private
@@ -650,10 +578,10 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @returns {Object} - Style map
    */
   _getItemMobileStyles(location) {
-    if ( this.isDesktop() ) return {};
+    if ( this.breakPoints.isDesktop() ) return {};
     let navItem = this.getNavItem(location);
-    if ( !navItem.mobileStyles ) return {};
-    return navItem.mobileStyles;
+    if ( !navItem.inlineStyles ) return {};
+    return navItem.inlineStyles;
   }
 
 }