Skip to content

Commit 3bcaac9

Browse files
benjaminkottbenjaminkott
committed
[TASK] Split into tabs and links
1 parent 302ce40 commit 3bcaac9

1 file changed

Lines changed: 46 additions & 56 deletions

File tree

‎src/typo3-universe.ts‎

Lines changed: 46 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
44
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
55

66
export enum MenuEntryType {
7+
tab = 'tab',
78
link = 'link',
89
spacer = 'spacer'
910
}
@@ -29,22 +30,22 @@ export interface Menu {
2930

3031
const defaultEntries : Menu = {
3132
'typo3-com': {
32-
'type': MenuEntryType.link,
33+
'type': MenuEntryType.tab,
3334
'label': 'TYPO3',
3435
'href': 'https://typo3.com',
3536
},
3637
'typo3-community': {
37-
'type': MenuEntryType.link,
38+
'type': MenuEntryType.tab,
3839
'label': 'Community',
3940
'href': 'https://typo3.community',
4041
},
4142
'typo3-org': {
42-
'type': MenuEntryType.link,
43+
'type': MenuEntryType.tab,
4344
'label': 'Project',
4445
'href': 'https://typo3.org',
4546
},
4647
'typo3-news': {
47-
'type': MenuEntryType.link,
48+
'type': MenuEntryType.tab,
4849
'label': 'News & Events',
4950
'href': 'https://news.typo3.com',
5051
},
@@ -117,8 +118,8 @@ export class Typo3UniverseElement extends LitElement {
117118
--universe-text-color: #fff;
118119
--universe-divider-color: color-mix(in srgb, var(--universe-link-color) 15%, var(--universe-link-background));
119120
--universe-background-color: #313131;
120-
--universe-link-padding-horizontal: .9375rem;
121-
--universe-link-padding-vertical: .625rem;
121+
--universe-item-padding-horizontal: .9375rem;
122+
--universe-item-padding-vertical: .625rem;
122123
--universe-link-color: #fff;
123124
--universe-link-background: var(--universe-background-color);
124125
--universe-link-hover-color: #fff;
@@ -166,25 +167,15 @@ export class Typo3UniverseElement extends LitElement {
166167
flex-grow: 1;
167168
}
168169
169-
.universe-menu-item {
170-
border-inline-end: 1px solid var(--universe-divider-color);
171-
}
172-
173-
.universe-menu-item:has(+ .universe-menu-spacer),
174-
.universe-menu-item + .universe-menu-spacer,
175-
.universe-menu-spacer ~ .universe-menu-item {
176-
border-inline-end-color: transparent;
177-
}
178-
179-
.universe-menu-item:last-child {
180-
border-inline-end: unset;
170+
.universe-menu-item--tab + .universe-menu-item--tab {
171+
border-inline-start: 1px solid var(--universe-divider-color);
181172
}
182173
183174
.universe-item {
184175
--item-background: var(--universe-background-color);
185176
--item-color: var(--universe-text-color);
186-
--item-padding-vertical: var(--universe-link-padding-vertical);
187-
--item-padding-horizontal: var(--universe-link-padding-horizontal);
177+
--item-padding-vertical: var(--universe-item-padding-vertical);
178+
--item-padding-horizontal: var(--universe-item-padding-horizontal);
188179
color: var(--item-color);
189180
background: var(--item-background);
190181
position: relative;
@@ -196,6 +187,7 @@ export class Typo3UniverseElement extends LitElement {
196187
padding: var(--item-padding-vertical) var(--item-padding-horizontal);
197188
text-decoration: none;
198189
}
190+
199191
.universe-item:focus {
200192
z-index: 1;
201193
outline: none;
@@ -208,65 +200,61 @@ export class Typo3UniverseElement extends LitElement {
208200
overflow: hidden;
209201
opacity: .56;
210202
}
203+
211204
.universe-item-icon svg {
212205
display: block;
213206
height: 16px;
214207
width: 16px;
215208
}
209+
216210
[dir="rtl"] .universe-item-icon {
217211
transform: scaleX(-1);
218212
}
219213
220-
.universe-menu-spacer ~ .universe-menu-item .universe-item {
221-
--item-padding-horizontal: 10px;
222-
}
223-
224-
.universe-menu-spacer ~ .universe-menu-item:last-child .universe-item {
225-
padding-inline-end: var(--universe-link-padding-horizontal);
214+
.universe-item:focus-visible {
215+
box-shadow:
216+
inset 0 0 0 2px var(--item-background),
217+
inset 0 0 0 4px var(--item-color);
226218
}
227219
228-
.universe-item {
220+
.universe-menu-item--tab .universe-item {
229221
--item-color: var(--universe-link-color);
230222
--item-background: var(--universe-link-background);
231223
}
232-
.universe-item:focus,
233-
.universe-item:hover {
224+
225+
.universe-menu-item--tab .universe-item:focus,
226+
.universe-menu-item--tab .universe-item:hover {
234227
--item-color: var(--universe-link-hover-color);
235228
--item-background: var(--universe-link-hover-background);
236229
}
237230
238-
.universe-item--active,
239-
.universe-item--active:focus,
240-
.universe-item--active:hover {
231+
.universe-menu-item--tab .universe-item--active,
232+
.universe-menu-item--tab .universe-item--active:focus,
233+
.universe-menu-item--tab .universe-item--active:hover {
241234
--item-color: var(--universe-link-active-color);
242235
--item-background: var(--universe-link-active-background);
243236
}
244237
245-
.universe-item:focus-visible {
246-
box-shadow:
247-
inset 0 0 0 2px var(--item-background),
248-
inset 0 0 0 4px var(--item-color);
249-
}
238+
.universe-menu-item--link {
239+
.universe-item {
240+
--item-padding-horizontal: 10px;
241+
--item-color: var(--universe-link-color);
242+
--item-background: var(--universe-link-background);
250243
251-
.universe-item--active:after {
252-
content: '';
253-
position: absolute;
254-
bottom: 0;
255-
left: 50%;
256-
height: .8em;
257-
width: .8em;
258-
transform: translate(-50%, 0);
259-
border: .4em solid transparent;
260-
border-bottom-color: var(--universe-caret-color, var(--item-background));
261-
}
244+
&:hover {
245+
text-decoration: underline;
246+
text-decoration-color: color-mix(in srgb, currentColor, transparent);
247+
}
248+
}
262249
263-
.universe-menu-spacer ~ .universe-menu-item .universe-item {
264-
--item-color: var(--universe-link-color);
265-
--item-background: var(--universe-link-background);
250+
&:last-child {
251+
.universe-item {
252+
padding-inline-end: var(--universe-item-padding-horizontal);
253+
}
254+
}
266255
267-
&:hover {
268-
text-decoration: underline;
269-
text-decoration-color: color-mix(in srgb, currentColor, transparent 25%);
256+
.universe-item--active {
257+
font-weight: bold;
270258
}
271259
}
272260
`;
@@ -282,10 +270,12 @@ export class Typo3UniverseElement extends LitElement {
282270
}
283271
284272
return html`
285-
<li class="universe-menu-item">
273+
<li class="universe-menu-item${classMap({
274+
'universe-menu-item--link': entry.type === MenuEntryType.link,
275+
'universe-menu-item--tab': entry.type === MenuEntryType.tab,
276+
})}">
286277
<a href=${entry.href} class=${classMap({
287278
'universe-item': true,
288-
'universe-item--link': entry.type === MenuEntryType.link,
289279
'universe-item--spacer': entry.type === MenuEntryType.spacer,
290280
'universe-item--active': identifier === this.active
291281
})}>

0 commit comments

Comments
 (0)