3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-06 04:42:40 +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() {
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 (
<React.Fragment>
<Head>
@ -125,7 +130,12 @@ function Navbar() {
alt={logo.alt}
/>
)}
{title != null && <strong>{title}</strong>}
{title != null && (
<strong
className={searchBarExpanded ? styles.hideLogoText : ''}>
{title}
</strong>
)}
</Link>
{links
.filter(linkItem => linkItem.position !== 'right')
@ -151,7 +161,7 @@ function Navbar() {
/>
{algolia && (
<div className="navbar__search" key="search-box">
<SearchBar />
<SearchBar handleSearchBarToggle={handleSearchBarToggle} />
</div>
)}
</div>

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

@ -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

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.
*/
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 ? (
<input
id="search_input_react"
type="search"
placeholder="Search"
aria-label="Search"
/>
<Fragment>
<span
role="button"
className={`search-icon ${isExpanded ? 'search-icon-hidden' : ''}`}
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;
}
}

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