Skip to content

Commit 36ea9a7

Browse files
w3bdesignw3bdesign
authored
Merge pull request #188 from w3bdesign/development
Fix so we can close mobile search
2 parents 6d9b636 + 27aee5c commit 36ea9a7

File tree

5 files changed

+62
-62
lines changed

5 files changed

+62
-62
lines changed

‎components/Header/Navbar.component.jsx

Lines changed: 51 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -12,61 +12,60 @@ import Hamburger from './Hamburger.component';
1212
const Navbar = () => {
1313
return (
1414
<header>
15-
<nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white ">
16-
<div
17-
id="navbar-div"
18-
className="container flex flex-wrap items-center justify-between px-6 py-3 mt-0 "
19-
20-
>
21-
<Hamburger />
15+
<nav id="header" className="fixed top-0 z-50 w-full py-1 bg-white ">
2216
<div
23-
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
24-
id="menu"
17+
id="navbar-div"
18+
className="container flex flex-wrap items-center justify-between px-6 py-3 mt-0 "
2519
>
26-
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
27-
<li>
28-
<Link href="/produkter">
29-
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
30-
Produkter
31-
</a>
32-
</Link>
33-
</li>
34-
<li>
35-
<Link href="/kategorier">
36-
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
37-
Kategorier
38-
</a>
39-
</Link>
40-
</li>
41-
</ul>
20+
<Hamburger />
21+
<div
22+
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
23+
id="menu"
24+
>
25+
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
26+
<li>
27+
<Link href="/produkter">
28+
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
29+
Produkter
30+
</a>
31+
</Link>
32+
</li>
33+
<li>
34+
<Link href="/kategorier">
35+
<a className="inline-block px-4 py-2 no-underline hover:text-black hover:underline">
36+
Kategorier
37+
</a>
38+
</Link>
39+
</li>
40+
</ul>
41+
</div>
42+
<div className="order-1 md:order-2">
43+
<Link href="/">
44+
<a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
45+
<svg
46+
className="mr-2 text-gray-800 fill-current"
47+
xmlns="http://www.w3.org/2000/svg"
48+
width="24"
49+
height="24"
50+
viewBox="0 0 24 24"
51+
>
52+
<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" />
53+
</svg>
54+
NETTBUTIKK
55+
</a>
56+
</Link>
57+
</div>
58+
<div
59+
className="flex items-center order-2 md:order-3"
60+
id="nav-content"
61+
>
62+
<Search />
63+
<SVGMobileSearchIcon />
64+
<Cart />
65+
</div>
4266
</div>
43-
<div className="order-1 md:order-2">
44-
<Link href="/">
45-
<a className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
46-
<svg
47-
className="mr-2 text-gray-800 fill-current"
48-
xmlns="http://www.w3.org/2000/svg"
49-
width="24"
50-
height="24"
51-
viewBox="0 0 24 24"
52-
>
53-
<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" />
54-
</svg>
55-
NETTBUTIKK
56-
</a>
57-
</Link>
58-
</div>
59-
<div
60-
className="flex items-center order-2 md:order-3"
61-
id="nav-content"
62-
>
63-
<Search />
64-
<SVGMobileSearchIcon />
65-
<Cart />
66-
</div>
67-
</div>
68-
</nav>
69-
</header>
67+
</nav>
68+
</header>
7069
);
7170
};
7271

‎components/SVG/SVGCloseX.component.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
/**
22
* The SVG that we display to close the cart or the mobile search
33
*/
4-
const SVGCloseX = () => {
4+
const SVGCloseX = ({ setisExpanded }) => {
55
return (
66
<>
77
<svg
88
width="80px"
99
height="80px"
1010
xmlns="http://www.w3.org/2000/svg"
1111
viewBox="0 0 234.6 45.47"
12+
onClick={() => {
13+
setisExpanded(false);
14+
}}
1215
>
1316
<path
1417
d="M202.83,209.89H181v-42H186v37.56h16.87Z"

‎components/SVG/SVGMobileSearchIcon.component.jsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,8 @@ const SVGMobileSearchIcon = () => {
4646
style={mobileSearchSlideDownAnimation}
4747
className="absolute right-0 z-50 w-full p-4 text-black bg-white"
4848
>
49-
<div className="absolute right-0 mr-6 -mt-12 cursor-pointer">
50-
<SVGCloseX
51-
onClick={() => {
52-
setisExpanded(!isExpanded);
53-
}}
54-
/>
49+
<div className="cursor-pointer">
50+
<SVGCloseX setisExpanded={setisExpanded} />
5551
</div>
5652
<br />
5753
<MobileSearch />

‎components/Search/MobileSearch.component.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ const MobileSearch = () => {
1919
return (
2020
<>
2121
<div className="inline mt-4">
22-
<InstantSearch indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME} searchClient={searchClient}>
22+
<InstantSearch
23+
indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
24+
searchClient={searchClient}
25+
>
2326
<SearchBox
2427
translations={{
2528
submitTitle: 'Søk',
@@ -42,7 +45,6 @@ const MobileSearch = () => {
4245
setSearch(text.target.value);
4346
}}
4447
/>
45-
4648
{search && <Hits className="absolute" hitComponent={SearchResults} />}
4749
</InstantSearch>
4850
</div>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nextjs-woocommerce",
3-
"version": "0.9.0",
3+
"version": "0.9.1",
44
"description": "",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)