Defaut to opening the menu drawer on the old feature list page. (Goog…

…leChrome#3216) * Defaut to opening the menu drawer on the old feature list page. * Remade template test golden * Update templates/features.html Co-authored-by: Daniel Smith <[email protected]> * Remade template test golden --------- Co-authored-by: Daniel Smith <[email protected]>
punithnayak · Jul 27, 2023 · f2d56ed · f2d56ed
1 parent 012fc13
commit f2d56ed
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/pages/testdata/featurelist_test/test_html_rendering.html b/pages/testdata/featurelist_test/test_html_rendering.html
@@ -177,6 +177,26 @@ <h2>Features: <span class="num-features"></span></h2>
       };
       loadFeatureLegendViews(VIEWS);
     })();
+
+    // Since we don't use chromedash-app on this page, re-implement a little
+    // logic for the main menu shifting the page content on desktop.
+    const isMobile = window.screen.width < 701;
+    if (!isMobile) {
+        const header = document.querySelector('chromedash-header');
+        const drawer = document.querySelector('chromedash-drawer');
+        const flexWrapper = document.querySelector('#content-flex-wrapper');
+        const shiftedStyle = 'margin-left: 210px; justify-content: start';
+        drawer.defaultOpen = true;
+        flexWrapper.style = shiftedStyle;
+
+        function shiftPage() {
+            const slDrawer = drawer.shadowRoot.querySelector('sl-drawer');
+            const isOpening = !slDrawer.open;
+            flexWrapper.style = isOpening ? shiftedStyle : '';
+        }
+        header.addEventListener('drawer-clicked', shiftPage);
+    }
+
   </script>
 
 

diff --git a/templates/features.html b/templates/features.html
@@ -56,5 +56,25 @@ <h2>Features: <span class="num-features"></span></h2>
       };
       loadFeatureLegendViews(VIEWS);
     })();
+
+    // Since we don't use chromedash-app on this page, re-implement a little
+    // logic for the main menu shifting the page content on desktop.
+    const isMobile = window.screen.width < 701;
+    if (!isMobile) {
+        const header = document.querySelector('chromedash-header');
+        const drawer = document.querySelector('chromedash-drawer');
+        const flexWrapper = document.querySelector('#content-flex-wrapper');
+        const shiftedStyle = 'margin-left: 210px; justify-content: start';
+        drawer.defaultOpen = true;
+        flexWrapper.style = shiftedStyle;
+
+        function shiftPage() {
+            const slDrawer = drawer.shadowRoot.querySelector('sl-drawer');
+            const isOpening = !slDrawer.open;
+            flexWrapper.style = isOpening ? shiftedStyle : '';
+        }
+        header.addEventListener('drawer-clicked', shiftPage);
+    }
+
   </script>
 {% endblock %}