From f2d56ed26226b6d91e5267b03c61d10d6785234c Mon Sep 17 00:00:00 2001
From: Jason Robbins <jrobbins@gmail.com>
Date: Wed, 26 Jul 2023 18:50:55 -0700
Subject: [PATCH] Defaut to opening the menu drawer on the old feature list
 page. (#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 <56164590+DanielRyanSmith@users.noreply.github.com>

* Remade template test golden

---------

Co-authored-by: Daniel Smith <56164590+DanielRyanSmith@users.noreply.github.com>
---
 .../featurelist_test/test_html_rendering.html | 20 +++++++++++++++++++
 templates/features.html                       | 20 +++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/pages/testdata/featurelist_test/test_html_rendering.html b/pages/testdata/featurelist_test/test_html_rendering.html
index 8cd828f8fcc..5500100d187 100644
--- 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
index 79f3cb4f90c..076fb4410d2 100644
--- 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 %}