3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-06 21:03:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): responsive search bar (#1741)

Browse source 
* Fix search bar on smaller devices

* Update packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css

Removed blank line

Co-Authored-By: Endi <endiliey@gmail.com>
This commit is contained in:
Shirshendu Bhowmick 2019-08-06 10:19:28 +05:30 • committed by Endi
parent 4ecdd98cc8
commit abc80e9b00
4 changed files with 87 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -45,6 +45,7 @@ const Sun = () => <span className={classnames(styles.toggle, styles.sun)} />;
function Navbar() { function Navbar() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
const [sidebarShown, setSidebarShown] = useState(false); const [sidebarShown, setSidebarShown] = useState(false);
const [searchBarExpanded, setSearchBarExpanded] = useState(false);
const currentTheme = const currentTheme =
typeof document !== 'undefined' typeof document !== 'undefined'
? document.querySelector('html').getAttribute('data-theme') ? document.querySelector('html').getAttribute('data-theme')
@ -81,6 +82,10 @@ function Navbar() {
} }
}; };
const handleSearchBarToggle = () => {
setSearchBarExpanded(!searchBarExpanded);
};
return ( return (
<React.Fragment> <React.Fragment>
<Head> <Head>
@ -125,7 +130,12 @@ function Navbar() {
alt={logo.alt} alt={logo.alt}
/> />
)} )}
{title != null && <strong>{title}</strong>} {title != null && (
<strong
className={searchBarExpanded ? styles.hideLogoText : ''}>
{title}
</strong>
)}
</Link> </Link>
{links {links
.filter(linkItem => linkItem.position !== 'right') .filter(linkItem => linkItem.position !== 'right')
@ -151,7 +161,7 @@ function Navbar() {
/> />
{algolia && ( {algolia && (
<div className="navbar__search" key="search-box"> <div className="navbar__search" key="search-box">
<SearchBar /> <SearchBar handleSearchBarToggle={handleSearchBarToggle} />
</div> </div>
)} )}
</div> </div>

6
packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
View file

@ -29,6 +29,12 @@
content: '\1F31E'; content: '\1F31E';
} }
@media (max-width: 360px) {
.hideLogoText {
display: none;
}
}
/** /**
* styles for React Toggle * styles for React Toggle
* copied over because we want to allow user to swizzle it and modify the css * copied over because we want to allow user to swizzle it and modify the css

43
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file

@ -5,7 +5,7 @@
* LICENSE file in the root directory of this source tree. * LICENSE file in the root directory of this source tree.
*/ */
import React from 'react'; import React, {Fragment} from 'react';
import DocusaurusContext from '@docusaurus/context'; import DocusaurusContext from '@docusaurus/context';
@ -16,7 +16,10 @@ class Search extends React.Component {
super(props); super(props);
this.state = { this.state = {
enabled: true, enabled: true,
isExpanded: false,
}; };
this.searchBarRef = React.createRef();
this.toggleSearchIconClick = this.toggleSearchIconClick.bind(this);
} }
componentDidMount() { 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() { render() {
const {enabled} = this.state; const {enabled, isExpanded} = this.state;
return enabled ? ( return enabled ? (
<input <Fragment>
id="search_input_react" <span
type="search" role="button"
placeholder="Search" className={`search-icon ${isExpanded ? 'search-icon-hidden' : ''}`}
aria-label="Search" onClick={this.toggleSearchIconClick}
/> onKeyDown={this.toggleSearchIconClick}
tabIndex={0}
/>
<input
id="search_input_react"
type="search"
placeholder="Search"
aria-label="Search"
className={`${isExpanded ? 'search-bar-expanded' : 'search-bar'}`}
onBlur={this.toggleSearchIconClick}
ref={this.searchBarRef}
/>
</Fragment>
) : null; ) : null;
} }
} }

34
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
View file

@ -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 { .searchbox {
display: inline-block; display: inline-block;
position: relative; position: relative;