glossary search styling:

src/components/theme/View/TabsChildView.jsx

@@ -20,6 +20,7 @@ import {
   hasBlocksData,
 } from '@plone/volto/helpers';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { SearchWidget } from '@plone/volto/components';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -93,6 +94,9 @@ class DefaultView extends Component {
       hasBlocksData(content) && (
         <div className="ui wrapper">
 
+          <div className="glossary-search search">
+            <SearchWidget pathname={this.props.pathname} />
+          </div>
 
           {sectionTabs && sectionTabs.length ? (
             <nav className="tabs section-tabs">

src/customizations/volto/components/theme/SearchWidget/SearchWidget.jsx

@@ -0,0 +1,127 @@
+/**
+ * Search widget component.
+ * @module components/theme/SearchWidget/SearchWidget
+ */
+
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { Form, Input } from 'semantic-ui-react';
+import { compose } from 'redux';
+import { PropTypes } from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { Icon } from '@plone/volto/components';
+import zoomSVG from '@plone/volto/icons/zoom.svg';
+
+const messages = defineMessages({
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+  searchSite: {
+    id: 'Search Site',
+    defaultMessage: 'Search Site',
+  },
+});
+
+/**
+ * SearchWidget component class.
+ * @class SearchWidget
+ * @extends Component
+ */
+class SearchWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    pathname: PropTypes.string.isRequired,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs WysiwygEditor
+   */
+  constructor(props) {
+    super(props);
+    this.onChangeText = this.onChangeText.bind(this);
+    this.onChangeSection = this.onChangeSection.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.state = {
+      text: '',
+      section: false,
+    };
+  }
+
+  /**
+   * On change text
+   * @method onChangeText
+   * @param {object} event Event object.
+   * @param {string} value Text value.
+   * @returns {undefined}
+   */
+  onChangeText(event, { value }) {
+    this.setState({
+      text: value,
+    });
+  }
+
+  /**
+   * On change section
+   * @method onChangeSection
+   * @param {object} event Event object.
+   * @param {bool} checked Section checked.
+   * @returns {undefined}
+   */
+  onChangeSection(event, { checked }) {
+    this.setState({
+      section: checked,
+    });
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @param {event} event Event object.
+   * @returns {undefined}
+   */
+  onSubmit(event) {
+    const section = this.state.section ? `&path=${this.props.pathname}` : '';
+    this.props.history.push(
+      `/search?SearchableText=${this.state.text}${section}`,
+    );
+    event.preventDefault();
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    return (
+      <Form action="/search" onSubmit={this.onSubmit}>
+        <Form.Field className="searchbox">
+          <Input
+            aria-label={this.props.intl.formatMessage(messages.search)}
+            onChange={this.onChangeText}
+            name="SearchableText"
+            value={this.state.text}
+            transparent
+            placeholder={this.props.intl.formatMessage(messages.searchSite)}
+            title={this.props.intl.formatMessage(messages.search)}
+          />
+          <button aria-label={this.props.intl.formatMessage(messages.search)}>
+            {/* <Icon name={zoomSVG} size="18px" /> */}
+            SEARCH
+          </button>
+        </Form.Field>
+      </Form>
+    );
+  }
+}
+
+export default compose(withRouter, injectIntl)(SearchWidget);

theme/themes/pastanaga/globals/site.overrides

@@ -72,4 +72,8 @@ h1.documentFirstHeading {
   &:before {
     display: none!important;
   }
+}
+
+.breadcrumbs {
+  display: none;
 }

theme/themes/pastanaga/modules/search.overrides

@@ -1,3 +1,26 @@
 /*******************************
          Theme Overrides
 *******************************/
+.glossary-search {
+    max-width: 964px;
+    margin   : 2rem auto;
+
+    .searchbox {
+        border-left: none!important;
+    }
+
+    .input {
+        border-radius: 30px;
+        height       : 50px;
+        background   : #F6F6F6;
+        padding-left : 1rem;
+    }
+
+    button {
+        background: #008173!important;
+        border-radius: 30px;
+        padding: 0 2rem!important;
+        color: white!important;
+        margin-left: 1rem;
+    }
+}