|
1 |
| -import { useState } from 'react'; |
2 |
| -import { useSpring, animated } from 'react-spring'; |
3 |
| - |
4 |
| -import MobileSearch from '../AlgoliaSearch/MobileSearch.component'; |
5 |
| -import SVGCloseX from './SVGCloseX.component'; |
6 |
| - |
7 | 1 | /**
|
8 | 2 | * The SVG that we use for search in the navbar for mobile.
|
9 | 3 | * Also includes logic for closing and opening the search form.
|
10 | 4 | */
|
11 | 5 | const SVGMobileSearchIcon = () => {
|
12 |
| - const [isExpanded, setisExpanded] = useState(false); |
13 |
| - |
14 |
| - const mobileSearchSlideDownAnimation = useSpring({ |
15 |
| - to: [ |
16 |
| - { |
17 |
| - opacity: isExpanded ? 1 : 0, |
18 |
| - marginTop: isExpanded ? '50px' : '-180px', |
19 |
| - }, |
20 |
| - ], |
21 |
| - from: { |
22 |
| - opacity: isExpanded ? 1 : 0, |
23 |
| - marginTop: isExpanded ? '50px' : '-180px', |
24 |
| - }, |
25 |
| - }); |
| 6 | + const scrollToTop = () => { |
| 7 | + window.scrollTo({ |
| 8 | + top: 0, |
| 9 | + behavior: 'smooth', |
| 10 | + }); |
| 11 | + }; |
26 | 12 |
|
27 | 13 | return (
|
28 |
| - <> |
29 |
| - <div className="inline mr-2 md:hidden xl:hidden"> |
30 |
| - <svg |
31 |
| - className="cursor-pointer" |
32 |
| - |
33 |
| - |
34 |
| - onClick={() => { |
35 |
| - window.scrollTo({ |
36 |
| - top: 0, |
37 |
| - behavior: 'smooth', |
38 |
| - }); |
39 |
| - |
40 |
| - }} |
41 |
| - |
42 |
| - |
43 |
| - /*onClick={() => { |
44 |
| - setisExpanded(!isExpanded); |
45 |
| - }}*/ |
46 |
| - fill="#fff" |
47 |
| - xmlns="https://www.w3.org/2000/svg" |
48 |
| - viewBox="0 0 50 50" |
49 |
| - width="35px" |
50 |
| - height="35px" |
51 |
| - > |
52 |
| - <path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z" /> |
53 |
| - </svg> |
54 |
| - </div> |
55 |
| - {isExpanded && ( |
56 |
| - <animated.div |
57 |
| - style={mobileSearchSlideDownAnimation} |
58 |
| - className="right-0 z-50 w-full p-4 text-black bg-white" |
59 |
| - id="mobilesearchdiv" |
60 |
| - > |
61 |
| - <div id="closeXsearch" className="mt-2 cursor-pointer"> |
62 |
| - <SVGCloseX setisExpanded={setisExpanded} /> |
63 |
| - </div> |
64 |
| - |
65 |
| - <MobileSearch /> |
66 |
| - </animated.div> |
67 |
| - )} |
68 |
| - </> |
| 14 | + <div className="inline mr-2 md:hidden xl:hidden"> |
| 15 | + <svg |
| 16 | + className="cursor-pointer" |
| 17 | + onClick={scrollToTop} |
| 18 | + fill="#fff" |
| 19 | + xmlns="https://www.w3.org/2000/svg" |
| 20 | + viewBox="0 0 50 50" |
| 21 | + width="35px" |
| 22 | + height="35px" |
| 23 | + > |
| 24 | + <path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z" /> |
| 25 | + </svg> |
| 26 | + </div> |
69 | 27 | );
|
70 | 28 | };
|
71 | 29 |
|
|
0 commit comments