add a class to body in search.html

packages/app/src/components/SearchPage.jsx

@@ -60,7 +60,6 @@ class SearchPage extends React.Component {
   }
 
   componentDidMount() {
-    $('body').addClass('on-search');
     const keyword = this.state.searchingKeyword;
     if (keyword !== '') {
       this.search({ keyword });

packages/app/src/server/views/search.html

@@ -11,6 +11,9 @@
   data-target="#search-result-list"
 {% endblock %}
 
+<!-- add .on-search to body tag class in layout -->
+{% set additionalBodyClass = 'on-search' %}
+
 {% block layout_main %}
 <div id="grw-fav-sticky-trigger" class="sticky-top"></div>
 

packages/app/src/styles/_on-search.scss

@@ -1,10 +0,0 @@
-body.on-search {
-  .grw-navbar {
-    position: fixed !important;
-    width: 100vw;
-  }
-  .page-wrapper {
-    position: relative;
-    top: $grw-navbar-border-width;
-  }
-}

packages/app/src/styles/_search.scss

@@ -251,6 +251,18 @@
   }
 }
 
+// class to add to .grw-navbar to hide its navbar above the displaying page
+body.on-search {
+  .grw-navbar {
+    position: fixed !important;
+    width: 100vw;
+  }
+  .page-wrapper {
+    position: relative;
+    top: $grw-navbar-border-width;
+  }
+}
+
 // 2021/9/22 TODO: Remove after moving to SearchResult
 .search-page-input {
   position: sticky;

packages/app/src/styles/style-app.scss

@@ -62,7 +62,6 @@
 @import 'page-history';
 @import 'recent-changes';
 @import 'search';
-@import 'on-search';
 @import 'shortcuts';
 @import 'sidebar';
 @import 'sidebar-wiki';