@progressive-development/pd-page 0.1.88 → 0.1.90

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.88",
+  "version": "0.1.90",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -20,9 +20,9 @@
   },
   "dependencies": {
     "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-contact": "^0.1.46",
-    "@progressive-development/pd-dialog": "^0.1.59",
-    "@progressive-development/pd-forms": "^0.1.48",
+    "@progressive-development/pd-contact": "^0.1.47",
+    "@progressive-development/pd-dialog": "^0.1.60",
+    "@progressive-development/pd-forms": "^0.1.49",
     "@progressive-development/pd-icon": "^0.1.16",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.2.0",

package/src/PdMenu.js

@@ -129,6 +129,33 @@ export class PdMenu extends LitElement {
         fill: var(--pd-menu-logo-color, #067394);
         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);
+        pointer-events: none;
+      }
+
+      .selectable-locale:hover {
+        color: var(--pd-default-hover-col);
+        cursor: pointer;
+      }
+
+
+      @media (max-width: 1300px) {
+        .locales {       
+          right: 25%;
+        }
+      }
       
 
       /**
@@ -138,7 +165,7 @@ export class PdMenu extends LitElement {
 
         :host([_activeBurgerMenu]) ul {
           visibility: visible;
-        }
+        }       
 
         .burger-menu {
           visibility: visible;
@@ -185,6 +212,8 @@ export class PdMenu extends LitElement {
   static get properties() {
     return {
       activeRoute: { type: String },
+      selectedLocale: { type: String },
+      locales: { type: Array },
       menuItems: { type: Array },
       topMenuItems: { type: Array },      
       // At the moment needed for scroll to pistion => Refactor possible?
@@ -263,6 +292,16 @@ export class PdMenu extends LitElement {
         </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>
     `;
   }
@@ -295,6 +334,13 @@ export class PdMenu extends LitElement {
     this._activeBurgerMenu = !this._activeBurgerMenu;
   }
 
+  _localeClicked(e) {
+    const keyParam = e.target.dataset.key;
+    this.dispatchEvent(new CustomEvent("locale-change", {
+      detail: keyParam
+    }));
+  }
+
   _menuItemClicked(e) {   
 
     // get menu item

package/stories/menu.stories.js

@@ -82,7 +82,7 @@ export default {
   },
 };
 
-function Template({ menuItems, topMenuItems, color, logo, menuColor }) {
+function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, selectedLocale }) {
   return html`
     <pd-menu
       style="--squi-menu-bg-color: ${menuColor || color};
@@ -90,6 +90,8 @@ function Template({ menuItems, topMenuItems, color, logo, menuColor }) {
       .menuItems=${menuItems}
       .topMenuItems=${topMenuItems}
       ?teaserClosed="${true}"
+      .locales="${locales}"
+      selectedLocale="${selectedLocale}"
       @route-event="${e => {
         console.log('Der route event ist da: ', e);
       }}"
@@ -147,4 +149,6 @@ WithTopItems.args = {
   topMenuItems: [{ name: 'Profile', icon: 'userIcon', route: 'profile' }],
   color: '#084c61',
   logo: ticomiLogo,
+  locales: ["de", "en"],
+  selectedLocale: "de",
 };