@progressive-development/pd-page 0.1.96 → 0.1.98
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 +50 -2
- package/src/stories/menu.stories.js +1 -1
package/package.json
CHANGED
package/src/PdMenu.js
CHANGED
|
@@ -88,12 +88,42 @@ 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
|
+
z-index: 100;
|
|
98
|
+
background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
|
|
99
|
+
|
|
100
|
+
box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);
|
|
101
|
+
border-bottom: var(--pd-menu-burger-bottomborder);
|
|
102
|
+
padding: var(--pd-menu-burger-padding, 0);
|
|
103
|
+
-moz-border-radius: var(--pd-border-radius);
|
|
104
|
+
border-radius: var(--pd-border-radius);
|
|
105
|
+
|
|
106
|
+
transition: 0.5s;
|
|
107
|
+
transition-timing-function: ease-out;
|
|
108
|
+
|
|
109
|
+
transform: translateY(0);
|
|
110
|
+
opacity: 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
91
113
|
:host([_activeBurgerMenu]) .burger-ul {
|
|
92
114
|
visibility: visible;
|
|
93
115
|
opacity: 1;
|
|
94
116
|
top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));
|
|
95
117
|
transition-timing-function: ease-in;
|
|
96
|
-
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
:host([_activeLocaleMenu]) .locale-ul {
|
|
122
|
+
visibility: visible;
|
|
123
|
+
opacity: 1;
|
|
124
|
+
top: 40px;
|
|
125
|
+
transition-timing-function: ease-in;
|
|
126
|
+
}
|
|
97
127
|
|
|
98
128
|
.menu-li {
|
|
99
129
|
display: flex;
|
|
@@ -110,6 +140,10 @@ export class PdMenu extends LitElement {
|
|
|
110
140
|
height:1rem;
|
|
111
141
|
}
|
|
112
142
|
|
|
143
|
+
.locale-li {
|
|
144
|
+
position: relative;
|
|
145
|
+
}
|
|
146
|
+
|
|
113
147
|
.burger-li:hover {
|
|
114
148
|
background-color: var(--pd-default-dark-col);
|
|
115
149
|
}
|
|
@@ -126,6 +160,10 @@ export class PdMenu extends LitElement {
|
|
|
126
160
|
color: var(--pd-menu-burger-font-col, var(--pd-default-dark-col));
|
|
127
161
|
}
|
|
128
162
|
|
|
163
|
+
.locale-item {
|
|
164
|
+
padding-left: 1.5em;
|
|
165
|
+
}
|
|
166
|
+
|
|
129
167
|
.item.active,
|
|
130
168
|
.item:hover {
|
|
131
169
|
color: var(--pd-default-hover-col);
|
|
@@ -281,9 +319,19 @@ export class PdMenu extends LitElement {
|
|
|
281
319
|
${this._renderItems(this.topMenuItems, false)}
|
|
282
320
|
|
|
283
321
|
${(this.locales && this.locales.length) > 1 ? html`
|
|
284
|
-
<li class="item menu-li" @click="${this._toggleLocaleSelection}">
|
|
322
|
+
<li class="item menu-li locale-li" @click="${this._toggleLocaleSelection}">
|
|
285
323
|
${this.selectedLocale}
|
|
286
324
|
<pd-icon class="locale-selection-logo" icon="${toggleArrow}" ?activeIcon="${!this._activeLocaleMenu}"></pd-icon>
|
|
325
|
+
<ul class="menu-ul locale-ul">
|
|
326
|
+
${this.locales.filter(l => l !== this.selectedLocale).map(locale => html`
|
|
327
|
+
<li class="item menu-li burger-li burger-item locale-item"
|
|
328
|
+
data-key="${locale}"
|
|
329
|
+
@click="${this._localeClicked}"
|
|
330
|
+
>
|
|
331
|
+
${locale}
|
|
332
|
+
</li>
|
|
333
|
+
`)}
|
|
334
|
+
</ul>
|
|
287
335
|
</li>
|
|
288
336
|
` : ''}
|
|
289
337
|
</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}
|