- if (this.direction === 'right') {
- this.menu.style.right = `${(this.rect.right - this.rect.width)}px`;
- } else {
- this.menu.style.left = `${this.rect.left}px`;
- }
- this.menu.style.top = `${this.rect.top}px`;
- this.menu.style.width = `${this.rect.width}px`;
+ this.menu.style.width = `${menuOriginalRect.width}px`;
+ this.menu.style.left = `${menuOriginalRect.left}px`;
+ heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top - toggleHeight / 2) : menuOriginalRect.top;
+ }
+
+ // Adjust menu to display upwards if near the bottom of the screen
+ if (dropUpwards) {
+ this.menu.style.top = 'initial';
+ this.menu.style.bottom = `${heightOffset}px`;
+ } else {
+ this.menu.style.top = `${heightOffset}px`;
+ this.menu.style.bottom = 'initial';