diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
index 110349b87e..2015ac9cb3 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -45,6 +45,7 @@ const Sun = () => ;
function Navbar() {
const context = useDocusaurusContext();
const [sidebarShown, setSidebarShown] = useState(false);
+ const [searchBarExpanded, setSearchBarExpanded] = useState(false);
const currentTheme =
typeof document !== 'undefined'
? document.querySelector('html').getAttribute('data-theme')
@@ -81,6 +82,10 @@ function Navbar() {
}
};
+ const handleSearchBarToggle = () => {
+ setSearchBarExpanded(!searchBarExpanded);
+ };
+
return (
@@ -125,7 +130,12 @@ function Navbar() {
alt={logo.alt}
/>
)}
- {title != null && {title}}
+ {title != null && (
+
+ {title}
+
+ )}
{links
.filter(linkItem => linkItem.position !== 'right')
@@ -151,7 +161,7 @@ function Navbar() {
/>
{algolia && (
-
+
)}
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
index a5b0a0a789..c3e85fe7d8 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
@@ -29,6 +29,12 @@
content: '\1F31E';
}
+@media (max-width: 360px) {
+ .hideLogoText {
+ display: none;
+ }
+}
+
/**
* styles for React Toggle
* copied over because we want to allow user to swizzle it and modify the css
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
index 9db2b5c482..afb6a340e5 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree.
*/
-import React from 'react';
+import React, {Fragment} from 'react';
import DocusaurusContext from '@docusaurus/context';
@@ -16,7 +16,10 @@ class Search extends React.Component {
super(props);
this.state = {
enabled: true,
+ isExpanded: false,
};
+ this.searchBarRef = React.createRef();
+ this.toggleSearchIconClick = this.toggleSearchIconClick.bind(this);
}
componentDidMount() {
@@ -43,16 +46,40 @@ class Search extends React.Component {
}
}
+ toggleSearchIconClick() {
+ this.setState(
+ oldState => ({
+ isExpanded: !oldState.isExpanded,
+ }),
+ () => {
+ this.searchBarRef.current.focus();
+ this.props.handleSearchBarToggle();
+ },
+ );
+ }
+
render() {
- const {enabled} = this.state;
+ const {enabled, isExpanded} = this.state;
return enabled ? (
-
+
+
+
+
) : null;
}
}
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
index 9f6433d4bd..d076d93c8d 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
@@ -44,6 +44,40 @@
}
}
+.search-icon {
+ background-image: var(--ifm-navbar-search-input-icon);
+ height: auto;
+ width: 24px;
+ cursor: pointer;
+ padding: 8px;
+ line-height: 32px;
+ background-repeat: no-repeat;
+ background-position: center;
+ display: none;
+}
+
+.search-icon-hidden {
+ visibility: hidden;
+}
+
+@media (max-width: 360px) {
+ .search-bar {
+ width: 0 !important;
+ background: none !important;;
+ padding: 0 !important;
+ transition: none !important;
+ }
+
+ .search-bar-expanded {
+ width: 9rem !important;
+ }
+
+ .search-icon {
+ display: inline;
+ }
+
+}
+
.searchbox {
display: inline-block;
position: relative;