@progressive-development/pd-page 0.1.99 → 0.1.101

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.99",
+  "version": "0.1.101",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdMenu.js

@@ -198,10 +198,17 @@ 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;
-        justify-content: end;
         align-items: center;        
         cursor: pointer;
 
@@ -210,6 +217,13 @@ export class PdMenu extends LitElement {
 
         --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
         --pd-icon-col-active: lightgrey;
+      }      
+
+      .burger-menu:hover {
+        --pd-icon-col: var(--pd-default-hover-col);
+        --pd-icon-col-active: var(--pd-default-hover-col);
+        --pd-icon-stroke-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));
       }
 
       .burger-menu .item{
@@ -222,23 +236,17 @@ export class PdMenu extends LitElement {
         color: var(--pd-default-hover-col);        
       }
 
-      .burger-menu:hover {
-        --pd-icon-col: var(--pd-default-hover-col);
-        --pd-icon-col-active: var(--pd-default-hover-col);
-        --pd-icon-stroke-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));
-      }
 
-      /* An anderer Stelle teils das Image von außen gestylt, das macht es wahrschweinlich
-        einfacher als hier einzeln zu stylen. noch zu prüfen 
+      /* Doppelt zum logo-container, pd-logo sonst nicht mehr funktional
         */
-      ::slotted(.logo) {
-        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;
-      }
+        ::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 {
@@ -324,7 +332,9 @@ export class PdMenu extends LitElement {
 
     return html`    
     <div class="menu-container"> 
-      <slot @click="${this._logoClicked}" name="slotLogo"></slot>      
+      
+      <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>
@@ -351,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>
       `}