From b2610c013cf528effd9fa67a914ccc1940d80e82 Mon Sep 17 00:00:00 2001
From: Christina Toegl <toegl@tugraz.at>
Date: Tue, 1 Dec 2020 18:17:19 +0100
Subject: [PATCH] Add scrollbar to menu if necessary and calculate value for
fixed top position
---
packages/app-shell/src/app-shell.js | 32 +++++++++++++++++++++++++----
1 file changed, 28 insertions(+), 4 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index 30fa1c45..f0096710 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -56,6 +56,7 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
this.basePath = '/';
this.keycloakConfig = null;
this.noWelcomePage = false;
+ this.isMenuOverflow = null;
this._updateAuth = this._updateAuth.bind(this);
this._loginStatus = 'unknown';
@@ -240,7 +241,8 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
noWelcomePage: { type: Boolean, attribute: "no-welcome-page" },
shellName: { type: String, attribute: "shell-name" },
shellSubname: { type: String, attribute: "shell-subname" },
- noBrand: { type: Boolean, attribute: "no-brand" }
+ noBrand: { type: Boolean, attribute: "no-brand" },
+ isMenuOverflow: { type: Boolean, attribute: false }
};
}
@@ -363,7 +365,6 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
this.updatePageTitle();
this.subtitle = this.activeMetaDataText("short_name");
this.description = this.activeMetaDataText("description");
-
};
// If it is empty assume the element is already registered through other means
@@ -406,6 +407,30 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
menu.classList.toggle('hidden');
+ if (this.isMenuOverflow === null) {
+ if (menu.clientHeight >= window.innerHeight) {
+ this.isMenuOverflow = true;
+ } else {
+ this.isMenuOverflow = false;
+ }
+ }
+
+ if (this.isMenuOverflow && !menu.classList.contains('hidden')) {
+ // default value if menu is in sticky position
+ let topValue = 46.5;
+ // if menu is not in sticky position the top value must be calculated
+ if (window.pageYOffset < 96) {
+ topValue = 142.5 - window.pageYOffset;
+ }
+ menu.setAttribute('style', 'position: fixed;top: ' + topValue + 'px;bottom: 0;border-bottom: 0;');
+ menu.scrollTop = 0;
+
+ document.body.setAttribute('style', 'overflow:hidden;');
+
+ } else if (this.isMenuOverflow && menu.classList.contains('hidden')) {
+ document.body.removeAttribute('style', 'overflow:hidden;');
+ }
+
const chevron = this.shadowRoot.querySelector("#menu-chevron-icon");
if (chevron !== null) {
chevron.name = menu.classList.contains('hidden') ? 'chevron-down' : 'chevron-up';
@@ -635,8 +660,7 @@ export class AppShell extends ScopedElementsMixin(LitElement) {
position: absolute;
background-color: white;
z-index: 10;
- overflow-y: scroll;
- white-space: nowrap;
+ overflow-y: auto;
}
.menu li {
--
GitLab