refactored the layout:

removed fixed head, replaced with flex
moved pagetitle and searchform to headerbottom region
added Common store to vuejs with pagetitle data
added pagetitle vuejs component

web/themes/custom/materiotheme/templates/content/page-title.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation for page titles.
+ *
+ * Available variables:
+ * - title_attributes: HTML attributes for the page title element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title: The page title, for use in the actual content.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ title_prefix }}
+{% if title %}
+  <h2{{ title_attributes }}>{{ title }}</h2>
+{% endif %}
+{{ title_suffix }}

web/themes/custom/materiotheme/templates/layout/page.html.twig

@@ -57,22 +57,26 @@
         {% endif %}
       </div>
     </div>
+    <div id="header-bottom" class="wrapper">
+      {{ page.header_bottom}}
+    </div>
   </header>
 
   <main role="main">
-    {% if page.content.messages %}
-      <aside class="messages">
-        {{ page.content.messages }}
-      </aside>
-    {% endif %}
+    <div class="wrapper">
+      {% if page.content.messages %}
+        <aside class="messages">
+          {{ page.content.messages }}
+        </aside>
+      {% endif %}
 
-    <div id="content-top">
-      {{ page.content_top }}
+      <div id="content-top">
+        {{ page.content_top }}
+      </div>
+      <div id="main-content">
+        {{ page.content|without('messages') }}
+      </div>{# /.layout-content #}
     </div>
-
-    <div id="main-content">
-      {{ page.content|without('messages') }}
-    </div>{# /.layout-content #}
   </main>
 
   {% if page.footer_left or page.footer_center or page.footer_right %}