Skip to content

Fix so we can close mobile search #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 5, 2020
Merged

Fix so we can close mobile search #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 51 additions & 52 deletions components/Header/Navbar.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,61 +12,60 @@ import Hamburger from './Hamburger.component';
const Navbar = () => {
return (
<header>
<nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white ">
<div
id="navbar-div"
className="container flex flex-wrap items-center justify-between px-6 py-3 mt-0 "

>
<Hamburger />
<nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white ">
<div
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
id="menu"
id="navbar-div"
className="container flex flex-wrap items-center justify-between px-6 py-3 mt-0 "
>
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
<li>
<Link href="/produkter">
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
Produkter
</a>
</Link>
</li>
<li>
<Link href="/kategorier">
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
Kategorier
</a>
</Link>
</li>
</ul>
<Hamburger />
<div
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
id="menu"
>
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
<li>
<Link href="/produkter">
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
Produkter
</a>
</Link>
</li>
<li>
<Link href="/kategorier">
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
Kategorier
</a>
</Link>
</li>
</ul>
</div>
<div className="order-1 md:order-2">
<Link href="/">
<a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
<svg
className="mr-2 text-gray-800 fill-current"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" />
</svg>
NETTBUTIKK
</a>
</Link>
</div>
<div
className="flex items-center order-2 md:order-3"
id="nav-content"
>
<Search />
<SVGMobileSearchIcon />
<Cart />
</div>
</div>
<div className="order-1 md:order-2">
<Link href="/">
<a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
<svg
className="mr-2 text-gray-800 fill-current"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" />
</svg>
NETTBUTIKK
</a>
</Link>
</div>
<div
className="flex items-center order-2 md:order-3"
id="nav-content"
>
<Search />
<SVGMobileSearchIcon />
<Cart />
</div>
</div>
</nav>
</header>
</nav>
</header>
);
};

Expand Down
5 changes: 4 additions & 1 deletion components/SVG/SVGCloseX.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
/**
* The SVG that we display to close the cart or the mobile search
*/
const SVGCloseX = () => {
const SVGCloseX = ({ setisExpanded }) => {
return (
<>
<svg
width="80px"
height="80px"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 234.6 45.47"
onClick={() => {
setisExpanded(false);
}}
>
<path
d="M202.83,209.89H181v-42H186v37.56h16.87Z"
Expand Down
8 changes: 2 additions & 6 deletions components/SVG/SVGMobileSearchIcon.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,8 @@ const SVGMobileSearchIcon = () => {
style={mobileSearchSlideDownAnimation}
className="absolute right-0 z-50 w-full p-4 text-black bg-white"
>
<div className="absolute right-0 mr-6 -mt-12 cursor-pointer">
<SVGCloseX
onClick={() => {
setisExpanded(!isExpanded);
}}
/>
<div className="cursor-pointer">
<SVGCloseX setisExpanded={setisExpanded} />
</div>
<br />
<MobileSearch />
Expand Down
6 changes: 4 additions & 2 deletions components/Search/MobileSearch.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ const MobileSearch = () => {
return (
<>
<div className="inline mt-4">
<InstantSearch indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME} searchClient={searchClient}>
<InstantSearch
indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
searchClient={searchClient}
>
<SearchBox
translations={{
submitTitle: 'Søk',
Expand All @@ -42,7 +45,6 @@ const MobileSearch = () => {
setSearch(text.target.value);
}}
/>

{search && <Hits className="absolute" hitComponent={SearchResults} />}
</InstantSearch>
</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nextjs-woocommerce",
"version": "0.9.0",
"version": "0.9.1",
"description": "",
"main": "index.js",
"scripts": {
Expand Down