add branding bar links to mobile menu. #71

ucd-library · Aug 12, 2022 · 6a55847 · 6a55847
1 parent af247b6
commit 6a55847
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 6 deletions.
diff --git a/brand-app/pages/page-ucdlib-branding-bar.tpl.js b/brand-app/pages/page-ucdlib-branding-bar.tpl.js
@@ -15,10 +15,7 @@ return html`
   ${this.pageTitle("UC Davs Library Branding Bar")}
   ${this.importPanel("ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js")}
 
-  <p>The <code>ucdlib-branding-bar</code> component can be used in the <a href="#ucd-theme-header">header controller component</a>
-    to quickly apply the Library's preferred styling to the masthead portion of the header.
-  </p>
-
+  <p>The <code>ucdlib-branding-bar</code> has some library-specific customizations to the masthead portion of the UC Davis header:</p>
   ${this.examplePanel(html`
     <ucdlib-branding-bar>
       <a href="#">My Account</a>
@@ -27,5 +24,45 @@ return html`
     </ucdlib-branding-bar>
   `)}
 
+  <p>It can be placed inside the <a href="#ucd-theme-header">header controller component</a>:</p>
+
+  ${this.examplePanel(html`
+    <ucd-theme-header 
+      prevent-fixed
+      is-demo>
+
+      <ucdlib-branding-bar>
+        <a href="#">My Account</a>
+        <a href="#">Access VPN</a>
+        <a href="#">Give</a>
+      </ucdlib-branding-bar>
+
+      <ucd-theme-primary-nav>
+        <ul link-text="Books" href="#">
+          <li><a href="#">Biographies</a></li>
+          <li><a href="#">Fantasy</a></li>
+          <li><a href="#">Mystery</a></li>
+        </ul>
+        <a href=#>Magazines</a>
+        <a href="#">Journals</a>
+      </ucd-theme-primary-nav>
+
+      <ucd-theme-search-popup>
+        <ucd-theme-search-form
+          @search="${e => console.log(e.detail.searchTerm)}">
+        </ucd-theme-search-form>
+      </ucd-theme-search-popup>
+
+      <ucd-theme-quick-links title="Locations" style-modifiers="highlight">
+        <a href="#">Shields</a>
+        <a href="#">Blaisdell</a>
+        <a href="#">Carlson</a>
+        <a href="#">Special Collections</a>
+      </ucd-theme-quick-links>
+
+    </ucd-theme-header>
+  `)}
+
+
 
 `;}
diff --git a/elements/brand/ucd-theme-header/ucd-theme-header.js b/elements/brand/ucd-theme-header/ucd-theme-header.js
@@ -18,6 +18,7 @@ import {
  * @property {String} slogan - Optional text to display below site name
  * @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} silenceWarnings - Console warnings will be silences
  * @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
  * 
@@ -49,6 +50,7 @@ export default class UcdThemeHeader extends LitElement {
       figureSrc: {type: String, attribute: "figure-src"},
       siteUrl: {type: String, attribute: "site-url"},
       opened: {type: Boolean},
+      silenceWarnings: {type: Boolean, attribute: 'silence-warnings'},
       preventFixed: {type: Boolean, attribute: "prevent-fixed"},
       isDemo: {type: Boolean, attribute: "is-demo"},
       _transitioning: {type: Boolean, state: true},
@@ -57,6 +59,8 @@ export default class UcdThemeHeader extends LitElement {
       _hasQuickLinks: {type: Boolean, state: true},
       _hasSearch: {type: Boolean, state: true},
       _brandingBarInView: {type: Boolean, state: true},
+      _brandingBarLinks: {type: Array, state: true},
+      _brandingBarListener: {type: Boolean, state: true},
       _components: {type: Object, state: true}
     };
   }
@@ -79,6 +83,7 @@ export default class UcdThemeHeader extends LitElement {
     this.figureSrc = "";
     this.opened = false;
     this.isDemo = false;
+    this.silenceWarnings = false;
 
     this._transitioning = false;
     this._hasPrimaryNav = false;
@@ -87,6 +92,8 @@ export default class UcdThemeHeader extends LitElement {
     this._hasSearch = false;
     this._animationDuration = 500;
     this._brandingBarInView = false;
+    this._brandingBarLinks = [];
+    this._brandingBarListener = false;
     this._slottedComponents = {};
 
   }
@@ -261,6 +268,21 @@ export default class UcdThemeHeader extends LitElement {
 
   }
 
+  /**
+   * @method _onBrandingBarUpdate
+   * @description Listens to nav item changes to the ucdlib-branding-bar element (if applicable)
+   * @private
+   * @param {Element} ele - ucdlib-branding-bar element
+   */
+  _onBrandingBarUpdate(ele) {
+    if ( ele.navItems ) {
+      this._brandingBarLinks = ele.navItems;
+    } else {
+      this._brandingBarLinks = [];
+    }
+    console.log(ele.navItems);
+  }
+
   /**
    * @method _onChildListMutation
    * @description Fires when there are changes to this element's non-shadow DOM children
@@ -273,7 +295,9 @@ export default class UcdThemeHeader extends LitElement {
       this._hasPrimaryNav = true;
       this._slottedComponents.primaryNav = primaryNav;
     } else {
-      console.warn("No 'ucd-theme-primary-nav' child element found!");
+      if ( !this.silenceWarnings ) {
+        console.warn("No 'ucd-theme-primary-nav' child element found!");
+      }
       this._hasPrimaryNav = false;
     }
 
@@ -300,10 +324,18 @@ export default class UcdThemeHeader extends LitElement {
       UcdlibBrandingBar.setAttribute('slot', 'branding-bar');
       this._hasSlottedBranding = true;
       this._slottedComponents.brandingBar = UcdlibBrandingBar;
+      if ( !this._brandingBarListener ){
+        this._onBrandingBarUpdate(UcdlibBrandingBar);
+        UcdlibBrandingBar.addEventListener('nav-update', (e) => {this._onBrandingBarUpdate(e.target);});
+        this._brandingBarListener = true;
+      }
+
     } else if ( this.querySelector("*[slot='branding-bar']") ){
       this._hasSlottedBranding = true;
+      this._brandingBarLinks = [];
     } else {
       this._hasSlottedBranding = false;
+      this._brandingBarLinks = [];
     }
   }
 

diff --git a/elements/brand/ucd-theme-header/ucd-theme-header.tpl.js b/elements/brand/ucd-theme-header/ucd-theme-header.tpl.js
@@ -1,5 +1,6 @@
 import { html, css } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import headingStyles from "@ucd-lib/theme-sass/1_base_html/_headings.css.js";
 import headerStyles from "@ucd-lib/theme-sass/4_component/_header.css.js";
@@ -40,6 +41,9 @@ export function styles() {
       .fixed-mobile .l-header__branding {
         margin-top: 55px;
       }
+      .branding-bar-mobile-links {
+        display: block;
+      }
     }
 
     @media (min-width: 992px) {
@@ -51,6 +55,36 @@ export function styles() {
         left: 0;
         width: 100%;
       }
+      .branding-bar-mobile-links {
+        display: none;
+      }
+    }
+    .branding-bar-mobile-links ul {
+      margin: 0px;
+      padding: 0px;
+      list-style: none;
+    }
+    .branding-bar-mobile-links li {
+      margin: 0px;
+      padding: 0px;
+      list-style: none;
+    }
+    .branding-bar-mobile-links a {
+      display: flex;
+      align-items: center;
+      padding: 0.75rem;
+      border-bottom: 0.15rem solid rgb(219, 234, 247);
+      background-color: #fff;
+      color: rgb(2, 40, 81);
+      font-weight: 700;
+      line-height: 1.5rem;
+      text-decoration: none;
+    }
+    .branding-bar-mobile-links a:hover {
+      background-color: rgb(255, 191, 0);
+    }
+    .branding-bar-mobile-links li:last-child a {
+      border-bottom: none;
     }
 
   `;
@@ -137,6 +171,19 @@ ${this.isDemo ? html`
         <div class="l-nav-horizontal__primary-nav">
           <slot name="primary-nav"></slot>
         </div>
+        ${this._brandingBarLinks.length ? html`
+          <div class='branding-bar-mobile-links'>
+            <ul>
+              ${this._brandingBarLinks.map(link => html`
+                <li><a 
+                  href=${ifDefined(link.href ? link.href : null)}
+                  target=${ifDefined(link.newTab ? "_blank": null)}
+                  >${link.linkText}</a></li>
+              `)}
+            </ul>
+
+          </div>
+        ` : html``}
       </div>
     </div>
   </div>

diff --git a/elements/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.tpl.js b/elements/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.tpl.js
@@ -17,6 +17,9 @@ export function styles() {
     button[disabled] {
       pointer-events: none;
     }
+    .submenu-toggle__icon {
+      min-width: 40%;
+    }
     @media (min-width: 992px) {
       nav.primary-nav--mega li.depth-0 > ul.menu {
         opacity: 1;

diff --git a/elements/brand/ucd-theme-quick-links/ucd-theme-quick-links.tpl.js b/elements/brand/ucd-theme-quick-links/ucd-theme-quick-links.tpl.js
@@ -29,6 +29,9 @@ export function styles() {
     .click-attached {
       cursor: pointer;
     }
+    .submenu-toggle__icon {
+      min-width: 40%;
+    }
     @media (min-width: 992px) {
       .slot-parent {
         display: block;

diff --git a/elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js b/elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js
@@ -92,7 +92,12 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    */
   _onChildListMutation(){
     let navItems = this.parseNavChildren();
-    if ( navItems.length ) this.navItems = navItems;
+    if ( navItems.length ) {
+      this.navItems = navItems;
+    } else {
+      this.navItems = [];
+    }
+    this.dispatchEvent(new CustomEvent('nav-update', {bubbles: true, composed: false}));
   }
 
 }