container.classList.add("pageMenuMainContainer");
container.addEventListener("scroll", () => this.updateOverflowIndicator(container), { passive: true });
- container.append(...this.buildMainMenu());
+ container.append(this.buildMainMenu());
const footerMenu = this.buildFooterMenu();
if (footerMenu) {
this.refreshUnreadIndicator();
}
- private buildMainMenu(): HTMLElement[] {
+ private buildMainMenu(): HTMLElement {
const boxMenu = this.mainMenu.querySelector(".boxMenu") as HTMLElement;
const nav = this.buildMenu(boxMenu);
nav.setAttribute("aria-label", window.PAGE_TITLE);
nav.setAttribute("role", "navigation");
- return [nav];
+ return nav;
}
private buildFooterMenu(): HTMLElement | null {
const container = document.createElement("div");
container.classList.add("pageMenuMainContainer");
container.addEventListener("scroll", () => this.updateOverflowIndicator(container), { passive: true });
- container.append(...this.buildMainMenu());
+ container.append(this.buildMainMenu());
const footerMenu = this.buildFooterMenu();
if (footerMenu) {
container.append(footerMenu);
const nav = this.buildMenu(boxMenu);
nav.setAttribute("aria-label", window.PAGE_TITLE);
nav.setAttribute("role", "navigation");
- return [nav];
+ return nav;
}
buildFooterMenu() {
const box = document.querySelector('.box[data-box-identifier="com.woltlab.wcf.FooterMenu"]');
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
+
+ &:hover {
+ color: inherit;
+ }
}
.pageMenuMainItemCounter {
}
@include screen-sm-down {
- .pageMenuContent {
+ .pageMenuMainNavigation:last-child {
+ /* Gap to prevent conflicts with the UI elements of touch browsers. */
+ margin-bottom: 30px;
+ }
+
+ .pageMenuUserTabContainer {
/* Gap to prevent conflicts with the UI elements of touch browsers. */
padding-bottom: 30px;
}