From e728280aa1645e498290096db92e0cb410a485af Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 25 Jan 2021 09:47:32 +0200
Subject: [PATCH] hide backdrop when browser size is exiting fullscreen into
<1200px screen size
---
.../hy-desktop-menu-links.tsx | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 03d02953..06a6c7c9 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -20,6 +20,7 @@ export interface DesktopLinks {
import {ColorVariant} from '../../../utils/utils';
import {Component, h, Element, Prop, State, Watch, EventEmitter, Event, Listen} from '@stencil/core';
+import ResizeObserver from 'resize-observer-polyfill';
@Component({
tag: 'hy-desktop-menu-links',
@@ -47,6 +48,8 @@ export class HyDesktopMenuLinks {
private _hoverTimer = null;
private _fadeOutTimer = null;
+ private ro: ResizeObserver;
+
@Watch('dataDesktopLinks')
dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data;
@@ -56,6 +59,13 @@ export class HyDesktopMenuLinks {
this.dataDesktopLinksWatcher(this.dataDesktopLinks);
}
+ removeBackdropShadow(size: number) {
+ // Close backdrop shadow if the screen is < 1200px
+ if (size < 1200) {
+ this.showBackdropShadow();
+ }
+ }
+
showBackdropShadow(state = 'close', top = 0) {
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
@@ -288,6 +298,14 @@ export class HyDesktopMenuLinks {
}
componentDidLoad() {
+ // Set the browser resize observer to gather information about browser width.
+ this.ro = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ this.removeBackdropShadow(entry.contentRect.width);
+ }
+ });
+ this.ro.observe(document.body);
+
let hyToolbar = document.querySelectorAll('#toolbar-administration')[0];
if (hyToolbar) {
this.hasToolbar = true;
--
GitLab