feat: add --vaadin-app-layout-drawer-width CSS property (#6687)

vaadin · Oct 24, 2023 · f22fbd2 · f22fbd2
1 parent a417fca
commit f22fbd2
Showing 1 changed file with 4 additions and 11 deletions.
diff --git a/packages/app-layout/src/vaadin-app-layout.js b/packages/app-layout/src/vaadin-app-layout.js
@@ -121,6 +121,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
           height: 100%;
           --vaadin-app-layout-transition: 200ms;
           transition: padding var(--vaadin-app-layout-transition);
+          --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
           --vaadin-app-layout-touch-optimized: false;
           --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
           --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
@@ -138,7 +139,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
         }
 
         :host([drawer-opened]) {
-          --vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
+          --vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-width);
         }
 
         :host([overlay]) {
@@ -196,7 +197,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
           transition: transform var(--vaadin-app-layout-transition), visibility var(--vaadin-app-layout-transition);
           transform: translateX(-100%);
           max-width: 90%;
-          width: 16em;
+          width: var(--_vaadin-app-layout-drawer-width);
           box-sizing: border-box;
           padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
           outline: none;
@@ -260,10 +261,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
         @media (max-width: 800px), (max-height: 600px) {
           :host {
             --vaadin-app-layout-drawer-overlay: true;
-          }
-
-          [part='drawer'] {
-            width: 20em;
+            --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);
           }
         }
 
@@ -591,11 +589,6 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
 
     this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${navbarRect.height}px`);
     this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${navbarBottomRect.height}px`);
-
-    const drawer = this.$.drawer;
-    const drawerRect = drawer.getBoundingClientRect();
-
-    this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', `${drawerRect.width}px`);
   }
 
   /** @protected */