@progressive-development/pd-page 0.1.93 → 0.1.94

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive development page helper, teaser, menu, footer.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.93",
+  "version": "0.1.94",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdMenu.js

@@ -55,7 +55,7 @@ export class PdMenu extends LitElement {
         margin: 0 auto;
       }
 
-      ul {        
+      .menu-ul {        
         display: flex;
         align-items: center;
         list-style: none;
@@ -63,14 +63,45 @@ export class PdMenu extends LitElement {
         padding: 0;
       }
 
-      li {
+      .burger-ul {
+        visibility: hidden;
+        position: absolute;
+        flex-direction: column;
+        top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));
+        right: 0px;
+        background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
+        
+        box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);    
+        border-bottom: var(--pd-menu-burger-bottomborder);
+        padding: var(--pd-menu-burger-padding, 0);
+        width:100%;
+        -moz-border-radius: var(--pd-border-radius);
+        border-radius: var(--pd-border-radius);
+      }
+
+      :host([_activeBurgerMenu]) .burger-ul {
+          visibility: visible;
+      }       
+
+      .menu-li {
         display: flex;
         align-items: center;                
         cursor: pointer;
         border-radius: var(--pd-border-radius);
-        
       }
 
+      .burger-li {
+        border-radius: var(--pd-border-radius);
+        align-self: justify;
+        width:80%;
+        font-size:90% !important;
+        height:1rem;
+      }
+
+      .burger-li:hover {
+          background-color: var(--pd-default-dark-col);
+        }
+
       .item {
         color: var(--pd-menu-font-col, var(--pd-default-bg-col));
         font-family: var(--pd-menu-font-family, var(--pd-default-font-title-family));
@@ -79,6 +110,10 @@ export class PdMenu extends LitElement {
         padding: var(--pd-menu-item-padding, 0.6em);
       }
 
+      .burger-item {
+        color: var(--pd-menu-burger-font-col, var(--pd-default-dark-col));
+      }
+
       .item.active,
       .item:hover {
         color: var(--pd-default-hover-col);
@@ -100,13 +135,12 @@ export class PdMenu extends LitElement {
 
       .burger-menu {
           display: flex;
-          width: 100%;          
-          visibility: hidden;
-          justify-content: end;
+          width: 100%;
+          justify-content: start
       }
 
       .topItemLogo {
-        --pd-icon-size: 1.6rem;
+        --pd-icon-size: 1.4rem;
         /* TODO: noch vars übernehmen
         --pd-icon-bg-col: var(--pd-menu-bg-col, var(--pd-default-col));
         --pd-icon-col: var(--pd-menu-bg-col, var(--pd-default-dark-col));
@@ -114,8 +148,8 @@ export class PdMenu extends LitElement {
         */
 
         --pd-icon-bg-col: transparent;   
-        --pd-icon-stroke-col: var(--pd-default-bg-col);
-        --pd-icon-col: var(--pd-default-dark-col);        
+        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
+        --pd-icon-col: var(--pd-menu-font-col, var(--pd-default-bg-col));        
         pointer-events: none;
       }               
 
@@ -130,82 +164,17 @@ export class PdMenu extends LitElement {
         cursor: pointer;
       }
 
-      .locales {
 
-        color: var(--pd-menu-font-col, var(--pd-default-bg-col));
-        font-size: var(--pd-menu-font-size, 1em);
-
-        position: absolute;
-        top: 15px;
-        right: 15px;
-      }
-
-      .selected-locale {
-        color: var(--pd-default-hover-col);
+      .locale-selection-logo {
+        --pd-icon-size: 0.8rem;
+        --pd-icon-bg-col: transparent;
+        --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));;
+        --pd-icon-col: var(--pd-menu-font-col, var(--pd-default-bg-col));;
+        --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));;
+        --pd-icon-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));;
         pointer-events: none;
       }
-
-      .selectable-locale:hover {
-        color: var(--pd-default-hover-col);
-        cursor: pointer;
-      }
-
-
-      @media (max-width: 1300px) {
-        .locales {       
-          right: 25%;
-        }
-      }
-      
-
-      /**
-       * Style for drop down menu on small screens.
-       */
-      @media (max-width: 700px) {
-
-        :host([_activeBurgerMenu]) ul {
-          visibility: visible;
-        }       
-
-        .burger-menu {
-          visibility: visible;
-        }
-
-        ul {
-          visibility: hidden;
-          position: absolute;
-          flex-direction: column;
-          top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));
-          right: 0px;
-          background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
           
-          box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);    
-          border-bottom: var(--pd-menu-burger-bottomborder);
-          padding: var(--pd-menu-burger-padding, 0);
-          width:100%;
-          -moz-border-radius: var(--pd-border-radius);
-          border-radius: var(--pd-border-radius);
-        }
-
-        li {
-          border-radius: var(--pd-border-radius);
-          align-self: justify;
-          width:80%;
-          font-size:90% !important;
-          height:1rem;                           
-        }
-
-        .item {
-          color: var(--pd-menu-burger-font-col, var(--pd-default-dark-col));
-        }
-
-        li:hover {
-          background-color: var(--pd-default-dark-col);
-        }
-
-      }
-
-      /* Media Query für 500 => Alles darunter mit Burger Menu */
     `];
   }
 
@@ -216,13 +185,13 @@ export class PdMenu extends LitElement {
       locales: { type: Array },
       menuItems: { type: Array },
       topMenuItems: { type: Array },      
+      noBurgerMenu: { type: Boolean },      
       // At the moment needed for scroll to pistion => Refactor possible?
       headerSize: { type: Number },
       _activeSecIndex: { type: Number },
       _smallScreen: { type: Boolean, state: true },
       _activeBurgerMenu: { type: Boolean, reflect: true },
-      
-      
+      _activeLocaleMenu: { type: Boolean, reflect: true },
     };
   }
 
@@ -230,6 +199,7 @@ export class PdMenu extends LitElement {
     super();    
     this.menuItems = [];
     this.topMenuItems = [];
+    this.noBurgerMenu = false;
     this._activeSecIndex = 0;
     this._activeBurgerMenu = false;
     this.headerSize = 0;
@@ -266,7 +236,7 @@ export class PdMenu extends LitElement {
 
     installMediaQueryWatcher(`(max-width: 700px)`, matches => {
       if (matches) {
-        this._smallScreen = true;
+        this._smallScreen = !this.noBurgerMenu;
       } else {
         this._smallScreen = false;
       }
@@ -278,30 +248,28 @@ export class PdMenu extends LitElement {
     return html`    
     <div class="menu-container"> 
       <slot @click="${this._logoClicked}" name="slotLogo"></slot>      
-      <ul>
+      <ul class="menu-ul ${this._smallScreen ? "burger-ul" : ""}">
         ${this._renderItems(this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems, true, this._smallScreen)}
       </ul>
 
       ${!this._smallScreen ? html`
-        <ul class="topMenu">
+        <ul class="menu-ul topMenu">
           ${this._renderItems(this.topMenuItems, false)}
+          
+          ${(this.locales && this.locales.length) > 1 ? html`
+            <li class="item menu-li" @click="${this._toggleLocaleSelection}">
+              ${this.selectedLocale}
+              <pd-icon class="locale-selection-logo" icon="${burgerIcon}" ?activeIcon="${!this._activeLocaleMenu}"></pd-icon>
+            </li>
+          ` : ''}
         </ul>
       ` : html`
-        <div class="burger-menu">
-          <pd-icon class="round" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}" @click="${this._toggleBurgerMenu}"></pd-icon>
+        <div class="burger-menu" @click="${this._toggleBurgerMenu}">
+          <pd-icon class="round" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
+          <span class="item">Menu</span>
         </div>
       `}
 
-      ${(this.locales && this.locales.length) > 1 ? html`
-      <div class="locales">
-        ${this.locales.map((l) => html`
-          <span @click="${this._localeClicked}" data-key="${l}"              
-            class="${l === this.selectedLocale ? 'selected-locale' : 'selectable-locale'}">${l}</span>          
-        `)}
-        
-      </div>
-      ` : ''}            
-
     </div>
     `;
   }
@@ -311,7 +279,8 @@ export class PdMenu extends LitElement {
     ${items.map(
           (item, index) => html`
             <li
-              class="item ${(checkActiveClass && this._activeSecIndex === index + 1) || (item.route && item.route === this.activeRoute) 
+              class="item menu-li ${this._smallScreen ? "burger-li burger-item" : ""}
+                ${(checkActiveClass && this._activeSecIndex === index + 1) || (item.route && item.route === this.activeRoute) 
                 ? 'active'
                 : ''}"
               data-key="${item.key}"              
@@ -334,6 +303,10 @@ export class PdMenu extends LitElement {
     this._activeBurgerMenu = !this._activeBurgerMenu;
   }
 
+  _toggleLocaleSelection() {
+    this._activeLocaleMenu = !this._activeLocaleMenu;
+  }
+
   _localeClicked(e) {
     const keyParam = e.target.dataset.key;
     this.dispatchEvent(new CustomEvent("locale-change", {

package/stories/menu.stories.js

@@ -82,7 +82,7 @@ export default {
   },
 };
 
-function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, selectedLocale }) {
+function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, selectedLocale, noBurger }) {
   return html`
     <pd-menu
       style="--squi-menu-bg-color: ${menuColor || color};
@@ -90,6 +90,7 @@ function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, se
       .menuItems=${menuItems}
       .topMenuItems=${topMenuItems}
       ?teaserClosed="${true}"
+      ?noBurgerMenu="${noBurger}"
       .locales="${locales}"
       selectedLocale="${selectedLocale}"
       @route-event="${e => {
@@ -152,3 +153,19 @@ WithTopItems.args = {
   locales: ["de", "en"],
   selectedLocale: "de",
 };
+
+// with top items
+export const WithoutBurger = Template.bind({});
+WithoutBurger.args = {
+  menuItems: [
+    { name: 'Service', sec: 'secServices' },
+    { name: 'Over ons', sec: 'secAboutUs' },
+    { name: 'Contact', sec: 'secContactUs' },
+  ],
+  topMenuItems: [{ name: 'Profile', icon: 'userIcon', route: 'profile' }],
+  color: '#084c61',
+  logo: ticomiLogo,
+  locales: ["de", "en"],
+  selectedLocale: "de",
+  noBurger: true
+};