Merge pull request #41962 from wgordon17/fix-search-bar

Author: adellape

_templates/_page_openshift.html.erb

@@ -270,21 +270,29 @@
   <!-- adjust page css based on breadcrumb and/or resize -->
   <script type="text/javascript">
     window.addEventListener('DOMContentLoaded', () => {
-      if (window.innerWidth >= 1008) {
+      if ($(window).width() >= 1008) {
         adjustSide();
         adjustToc();
         adjustMain();
       }
     });
 
     window.addEventListener('resize', () => {
-      if (window.innerWidth >= 1008) {
+      if ($(window).width() >= 1008) {
+        sidebar.classList.add('wide');
+        document.querySelector('#hc-search').classList.add('wide');
         sidebar.style.display = 'block';
         adjustSide();
         adjustToc();
         adjustMain();
-      } else if (window.innerWidth < 1008) {
-        sidebar.style.display = 'none';
+      } else if ($(window).width() < 1008) {
+        sidebar.classList.remove('wide');
+        document.querySelector('#hc-search').classList.remove('wide');
+        if (sidebar.classList.contains('open')) {
+          sidebar.style.display = 'block';
+        } else {
+          sidebar.style.display = 'none';
+        }
         document.querySelector('.main').style.paddingTop = '0px';
       }
     });
@@ -341,6 +349,7 @@
     function closeNav() {
       let sidebar = document.querySelector(".sidebar");
       sidebar.style.display = "none";
+      sidebar.classList.remove('open');
     }
 
     function openNav() {
@@ -349,6 +358,7 @@
       sidebar.style.display = "block";
       sidebar.style.top = "0px";
       hc_search.style.top = 'unset';
+      sidebar.classList.add('open');
     }
   </script>
 
@@ -463,7 +473,7 @@
     //handle scrolling pages
     document.addEventListener('scroll', () => {
       //scroll to bottom
-      if (window.innerWidth >= 1008) {
+      if ($(window).width() >= 1008) {
         if(sidebar !== null) {
           //pages with multiple toc entries
           if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
@@ -501,7 +511,7 @@
   <script type="text/javascript">
     alert = document.querySelector('#support-alert')
     window.addEventListener("wheel", () => {
-      if (window.innerWidth < 1008) {
+      if ($(window).width() < 1008) {
         //adjust alert
         if(window.pageYOffset > 0) {
           if(alert !== null) {
@@ -514,7 +524,7 @@
       }
    });
     window.addEventListener('resize', () => {
-      if (window.innerWidth >= 1008) {
+      if ($(window).width() >= 1008) {
         if(alert !== null) {
           document.querySelector('#support-alert').style.removeProperty('position');
           document.querySelector('#support-alert').style.removeProperty('bottom');