@progressive-development/pd-page 0.1.98 → 0.1.100

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

package/src/PdMenu.js

@@ -48,8 +48,9 @@ export class PdMenu extends LitElement {
       .menu-container {        
         height: 100%;
         padding-left: 10px;
-        padding-right: 10px;        
+        padding-right: 10px;
         display: flex;
+        justify-content: space-between;
         align-items: center;
         white-space: nowrap;
         max-width: 1170px;        
@@ -183,41 +184,51 @@ export class PdMenu extends LitElement {
         padding-left: 10px;
       }
 
-      .burger-menu {
-          display: flex;
-          gap: 0.3rem;
-          width: 100%;
-          justify-content: end;
-          align-items: center;
-      }
-
-      .burger-menu .item{
-          padding: 0;
-          font-size: 1.5em;
-      }
-
       .topItemLogo {
         --pd-icon-size: 1.4rem;
         --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));        
         pointer-events: none;
-      }               
+      }
 
       .burgerLogo {
-        --pd-icon-size: 2rem;        
-        --pd-icon-bg-col: transparent;   
+        --pd-icon-size: 2rem;
+        --pd-icon-bg-col: transparent;
+        pointer-events: none;
+      }               
+
+      .burger-menu {
+        display: flex;
+        gap: 0.3rem;
+        align-items: center;        
+        cursor: pointer;
+
         --pd-icon-stroke-col: var(--pd-menu-font-col, var(--pd-default-bg-col));
-        --pd-icon-col: var(--pd-default-hover-col);        
+        --pd-icon-col: var(--pd-default-hover-col);
+
         --pd-icon-stroke-col-active: var(--pd-menu-font-col, var(--pd-default-bg-col));
         --pd-icon-col-active: lightgrey;
-        pointer-events: none;
-      }               
+      }      
 
-      /* An anderer Stelle teils das Image von außen gestylt, das macht es wahrschweinlich
-        einfacher als hier einzeln zu stylen. noch zu prüfen 
-        */
-      ::slotted(.logo) {
+      .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{
+          padding: 0;
+          font-size: 1.5em;
+          transition: color ease 0.5s;
+      }
+
+      .burger-menu:hover .item {
+        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);        
@@ -309,7 +320,9 @@ export class PdMenu extends LitElement {
 
     return html`    
     <div class="menu-container"> 
-      <slot @click="${this._logoClicked}" name="slotLogo"></slot>      
+      <div class="logo-container">
+        <slot @click="${this._logoClicked}" name="slotLogo"></slot>       
+      </div>
       <ul class="menu-ul ${this._smallScreen ? "burger-ul" : ""}">
         ${this._renderItems(this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems, true, this._smallScreen)}
       </ul>
@@ -338,7 +351,7 @@ export class PdMenu extends LitElement {
       ` : html`
         <div class="burger-menu" @click="${this._toggleBurgerMenu}">
           <pd-icon class="burgerLogo" icon="${burgerIcon}" ?activeIcon="${!this._activeBurgerMenu}"></pd-icon>          
-          <span class="item">Menu</span>
+          <span class="item ${this._activeBurgerMenu ? 'active' : ''}">Menu</span>
         </div>
       `}
 

package/src/stories/menu.stories.js

@@ -86,7 +86,7 @@ function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, se
   return html`
     <pd-menu
       style="--pd-menu-bg-col: ${menuColor || color};
-             --pd-menu-height: ${menuHeight || 160}px;
+             --pd-menu-height: ${menuHeight || 80}px;
              transition: background-color 1s;"
       .menuItems=${menuItems}
       .topMenuItems=${topMenuItems}