@progressive-development/pd-page 0.1.100 → 0.1.102

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.100",
+  "version": "0.1.102",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -20,10 +20,10 @@
   },
   "dependencies": {
     "@lit/localize": "^0.11.4",
-    "@progressive-development/pd-contact": "^0.1.48",
-    "@progressive-development/pd-dialog": "^0.1.64",
-    "@progressive-development/pd-forms": "^0.1.50",
-    "@progressive-development/pd-icon": "^0.1.17",
+    "@progressive-development/pd-contact": "^0.1.49",
+    "@progressive-development/pd-dialog": "^0.1.65",
+    "@progressive-development/pd-forms": "^0.1.51",
+    "@progressive-development/pd-icon": "^0.1.18",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.8.0",
     "pwa-helpers": "^0.9.1"

package/src/PdMenu.js

@@ -198,6 +198,14 @@ export class PdMenu extends LitElement {
         pointer-events: none;
       }               
 
+      .menu-wrapper {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        padding-right: 0.5rem;
+      }
+
       .burger-menu {
         display: flex;
         gap: 0.3rem;
@@ -228,13 +236,17 @@ export class PdMenu extends LitElement {
         color: var(--pd-default-hover-col);        
       }
 
-      .logo-container {
-        max-width: var(--pd-menu-logo-maxwidth, 8rem);
-        width: 100%;
-        padding: var(--pd-menu-logo-padding, 2em);        
-        fill: var(--pd-menu-logo-color, #067394);
-        cursor: pointer;
-      }
+
+      /* Doppelt zum logo-container, pd-logo sonst nicht mehr funktional
+        */
+        ::slotted(.logo) {        
+          width: 100%;
+          max-width: var(--pd-menu-logo-maxwidth, 8rem);
+          padding: var(--pd-menu-logo-padding, 2em);        
+          width: 100%;
+          fill: var(--pd-menu-logo-color, #067394);
+          cursor: pointer;              
+        }
 
 
       .locale-selection-logo {
@@ -320,9 +332,9 @@ export class PdMenu extends LitElement {
 
     return html`    
     <div class="menu-container"> 
-      <div class="logo-container">
-        <slot @click="${this._logoClicked}" name="slotLogo"></slot>       
-      </div>
+      
+      <slot @click="${this._logoClicked}" name="slotLogo"></slot>       
+      
       <ul class="menu-ul ${this._smallScreen ? "burger-ul" : ""}">
         ${this._renderItems(this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems, true, this._smallScreen)}
       </ul>
@@ -349,9 +361,11 @@ export class PdMenu extends LitElement {
           ` : ''}
         </ul>
       ` : html`
-        <div class="burger-menu" @click="${this._toggleBurgerMenu}">
-          <pd-icon class="burgerLogo" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
-          <span class="item ${this._activeBurgerMenu ? 'active' : ''}">Menu</span>
+        <div class="menu-wrapper">
+          <div class="burger-menu" @click="${this._toggleBurgerMenu}">
+            <pd-icon class="burgerLogo" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
+            <span class="item ${this._activeBurgerMenu ? 'active' : ''}">Menu</span>
+          </div>
         </div>
       `}