diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayoutWithSearchbar.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayoutWithSearchbar.jsx
new file mode 100644
index 00000000..a6b2e9ed
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppLayoutWithSearchbar.jsx
@@ -0,0 +1,131 @@
+import {
+ SearchAppResultsPane,
+ SearchConfigurationContext,
+} from "@js/invenio_search_ui/components";
+import { i18next } from "@translations/oarepo_ui/i18next";
+import React, { useContext } from "react";
+import { SearchBar, ActiveFilters } from "react-searchkit";
+import { GridResponsiveSidebarColumn } from "react-invenio-forms";
+import { Grid, Button, Container, Icon } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import {
+ SearchAppFacets,
+ ClearFiltersButton,
+ ShouldActiveFiltersRender,
+ ActiveFiltersCountFloatingLabel,
+} from "@js/oarepo_ui";
+import Overridable from "react-overridable";
+
+export const SearchAppLayoutWithSearchbarHOC = ({
+ placeholder,
+ extraContent,
+ mobileOnlyExtraRow,
+ appName,
+}) => {
+ const SearchAppLayoutWithSearchbar = (props) => {
+ const [sidebarVisible, setSidebarVisible] = React.useState(false);
+ const { config } = props;
+ const searchAppContext = useContext(SearchConfigurationContext);
+ const { buildUID } = searchAppContext;
+ return (
+
+
+ setSidebarVisible(false)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {extraContent?.()}
+
+
+
+
+
+
+
+ {extraContent && (
+
+ {extraContent()}
+
+ )}
+ {mobileOnlyExtraRow && (
+
+ {mobileOnlyExtraRow()}
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ SearchAppLayoutWithSearchbar.propTypes = {
+ config: PropTypes.object.isRequired,
+ };
+
+ return SearchAppLayoutWithSearchbar;
+};
+
+SearchAppLayoutWithSearchbarHOC.propTypes = {
+ placeholder: PropTypes.string,
+ extraContent: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOf([null])]),
+ mobileOnlyExtraRow: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.oneOf([null]),
+ ]),
+ appName: PropTypes.string,
+};
+
+SearchAppLayoutWithSearchbarHOC.defaultProps = {
+ extraContent: null,
+ mobileOnlyExtraRow: null,
+ appName: undefined,
+ placeholder: "",
+};
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx
new file mode 100644
index 00000000..23adb822
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/SearchAppResultViewWithSearchbar.jsx
@@ -0,0 +1,145 @@
+import React from "react";
+import {
+ ResultsList,
+ buildUID,
+ Pagination,
+ ResultsPerPage,
+} from "react-searchkit";
+import { Grid, Segment } from "semantic-ui-react";
+import PropTypes from "prop-types";
+import Overridable from "react-overridable";
+import {
+ ResultsPerPageLabel,
+ ResultCountWithState,
+ SearchAppSort,
+} from "@js/oarepo_ui";
+
+export function SearchAppResultViewWithSearchbar(props) {
+ const { sortOptions, paginationOptions, currentResultsState, appName } =
+ props;
+ const { total } = currentResultsState.data;
+ const { resultsPerPage } = paginationOptions;
+ return (
+ total && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ );
+}
+
+SearchAppResultViewWithSearchbar.propTypes = {
+ sortOptions: PropTypes.array.isRequired,
+ paginationOptions: PropTypes.object.isRequired,
+ currentResultsState: PropTypes.object.isRequired,
+ appName: PropTypes.string,
+};
+
+SearchAppResultViewWithSearchbar.defaultProps = {
+ appName: "",
+};
diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js
index 19d56ab9..28f165ca 100644
--- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js
+++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/search/index.js
@@ -20,6 +20,8 @@ export { DynamicResultsListItem } from "./DynamicResultsListItem";
export { SearchappSearchbarElement } from "./SearchappSearchbarElement";
export { ShouldActiveFiltersRender } from "./ShouldActiveFiltersRender";
export { FoldableBucketAggregationElement } from "./FoldableBucketAggregationElement";
+export { SearchAppLayoutWithSearchbarHOC } from "./SearchAppLayoutWithSearchbar";
+export { SearchAppResultViewWithSearchbar } from "./SearchAppResultViewWithSearchbar";
export * from "./ShouldRender";
export * from "./util";
export * from "./histogram";
diff --git a/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.overrides b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.overrides
new file mode 100644
index 00000000..da9664c6
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.overrides
@@ -0,0 +1,5 @@
+.row {
+ &.results-options-row {
+ background-color: @resultsOptionsRowBackgroundColor;
+ }
+}
diff --git a/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.variables b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.variables
new file mode 100644
index 00000000..e346b692
--- /dev/null
+++ b/oarepo_ui/theme/assets/semantic-ui/less/oarepo_ui/themes/default/collections/grid.variables
@@ -0,0 +1 @@
+@resultsOptionsRowBackgroundColor: rgba(242, 242, 242);