@progressive-development/pd-page 0.1.96 → 0.1.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/PdMenu.js +49 -2
- package/src/stories/menu.stories.js +1 -1
package/package.json
CHANGED
package/src/PdMenu.js
CHANGED
|
@@ -88,12 +88,41 @@ export class PdMenu extends LitElement {
|
|
|
88
88
|
opacity: 0;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
+
.locale-ul {
|
|
92
|
+
visibility: hidden;
|
|
93
|
+
position: absolute;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
top: 10px;
|
|
96
|
+
right: 15px;
|
|
97
|
+
background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
|
|
98
|
+
|
|
99
|
+
box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);
|
|
100
|
+
border-bottom: var(--pd-menu-burger-bottomborder);
|
|
101
|
+
padding: var(--pd-menu-burger-padding, 0);
|
|
102
|
+
-moz-border-radius: var(--pd-border-radius);
|
|
103
|
+
border-radius: var(--pd-border-radius);
|
|
104
|
+
|
|
105
|
+
transition: 0.5s;
|
|
106
|
+
transition-timing-function: ease-out;
|
|
107
|
+
|
|
108
|
+
transform: translateY(0);
|
|
109
|
+
opacity: 0;
|
|
110
|
+
}
|
|
111
|
+
|
|
91
112
|
:host([_activeBurgerMenu]) .burger-ul {
|
|
92
113
|
visibility: visible;
|
|
93
114
|
opacity: 1;
|
|
94
115
|
top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));
|
|
95
116
|
transition-timing-function: ease-in;
|
|
96
|
-
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
:host([_activeLocaleMenu]) .locale-ul {
|
|
121
|
+
visibility: visible;
|
|
122
|
+
opacity: 1;
|
|
123
|
+
top: 40px;
|
|
124
|
+
transition-timing-function: ease-in;
|
|
125
|
+
}
|
|
97
126
|
|
|
98
127
|
.menu-li {
|
|
99
128
|
display: flex;
|
|
@@ -110,6 +139,10 @@ export class PdMenu extends LitElement {
|
|
|
110
139
|
height:1rem;
|
|
111
140
|
}
|
|
112
141
|
|
|
142
|
+
.locale-li {
|
|
143
|
+
position: relative;
|
|
144
|
+
}
|
|
145
|
+
|
|
113
146
|
.burger-li:hover {
|
|
114
147
|
background-color: var(--pd-default-dark-col);
|
|
115
148
|
}
|
|
@@ -126,6 +159,10 @@ export class PdMenu extends LitElement {
|
|
|
126
159
|
color: var(--pd-menu-burger-font-col, var(--pd-default-dark-col));
|
|
127
160
|
}
|
|
128
161
|
|
|
162
|
+
.locale-item {
|
|
163
|
+
padding-left: 1.5em;
|
|
164
|
+
}
|
|
165
|
+
|
|
129
166
|
.item.active,
|
|
130
167
|
.item:hover {
|
|
131
168
|
color: var(--pd-default-hover-col);
|
|
@@ -281,9 +318,19 @@ export class PdMenu extends LitElement {
|
|
|
281
318
|
${this._renderItems(this.topMenuItems, false)}
|
|
282
319
|
|
|
283
320
|
${(this.locales && this.locales.length) > 1 ? html`
|
|
284
|
-
<li class="item menu-li" @click="${this._toggleLocaleSelection}">
|
|
321
|
+
<li class="item menu-li locale-li" @click="${this._toggleLocaleSelection}">
|
|
285
322
|
${this.selectedLocale}
|
|
286
323
|
<pd-icon class="locale-selection-logo" icon="${toggleArrow}" ?activeIcon="${!this._activeLocaleMenu}"></pd-icon>
|
|
324
|
+
<ul class="menu-ul locale-ul">
|
|
325
|
+
${this.locales.map(locale => html`
|
|
326
|
+
<li class="item menu-li burger-li burger-item locale-item"
|
|
327
|
+
data-key="${locale}"
|
|
328
|
+
@click="${this._localeClicked}"
|
|
329
|
+
>
|
|
330
|
+
${locale}
|
|
331
|
+
</li>
|
|
332
|
+
`)}
|
|
333
|
+
</ul>
|
|
287
334
|
</li>
|
|
288
335
|
` : ''}
|
|
289
336
|
</ul>
|
|
@@ -86,7 +86,7 @@ function Template({ menuItems, topMenuItems, color, logo, menuColor, locales, se
|
|
|
86
86
|
return html`
|
|
87
87
|
<pd-menu
|
|
88
88
|
style="--pd-menu-bg-col: ${menuColor || color};
|
|
89
|
-
--pd-menu-height: ${menuHeight ||
|
|
89
|
+
--pd-menu-height: ${menuHeight || 160}px;
|
|
90
90
|
transition: background-color 1s;"
|
|
91
91
|
.menuItems=${menuItems}
|
|
92
92
|
.topMenuItems=${topMenuItems}
|