/
Layout.jsx
101 lines (82 loc) · 4.25 KB
/
Layout.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import { useState, useEffect } from "react";
import { Outlet, useLocation } from "react-router-dom";
import DesktopNav from "./DesktopNav.jsx";
import MobileNav from "./MobileNav.jsx";
import ScrollToTopBtn from "./ScrollToTopBtn.jsx";
export default function Layout() {
// NAV FUNCTIONALITY
// NOTE: and 1236 is when the searchbar hits the rest of the nav
const [isDesktop, setDesktop] = useState(window.innerWidth > 1236);
const updateMedia = () => {
setDesktop(window.innerWidth > 1236);
};
useEffect(() => {
window.addEventListener("resize", updateMedia);
return () => window.removeEventListener("resize", updateMedia);
}, []);
// scrolls window to top when routes are switched
const location = useLocation();
useEffect(() => {
window.scrollTo(() => {
top: 0;
}, [location]);
});
return (
<div className="flex flex-col h-full min-h-[100vh]">
{/* NAV */}
<nav className="text-white w-full">
{!isDesktop ? <MobileNav /> : <DesktopNav />}
</nav>
{/* OUTLET */}
<Outlet />
{/* FOOTER */}
<footer className="bg-black text-white w-full border-t-2 mt-auto">
<div id="sign-up-form" className="flex flex-col justify-center items-center p-8 min-[1119px]:flex-row md:justify-center">
{/* SIGN UP */}
<div className="flex flex-col justify-center items-center w-full lg:flex-row md:justify-center min-[1131px]:border-r-2">
<div className="mb-8 md:mb-0">
<h3 className="text-4xl pb-4 underline decoration-hot-pink-50">Sign up for:</h3>
<ul className="list-disc list-inside text-xl relative left-4">
<li>Promotions</li>
<li>Sales</li>
<li>Offers</li>
</ul>
</div>
{/* EMAIL SECTION */}
<div className="flex justify-center items-end flex-wrap">
<input type="email" name="email" className="h-min w-3/4 mr-2 outline-none border-hot-pink-50 border-b-2 bg-transparent md:w-auto" placeholder="email" />
<button className="border-2 border-hot-pink-50 px-3 rounded mt-2 w-3/4 md:w-auto hover:bg-hot-pink-50 hover:text-white active:border-black active:bg-hot-pink-100">submit</button>
</div>
</div>
{/* CONTACT */}
<div id="contact-info" className="mt-6 w-full h-full flex flex-col justify-center items-center">
<h3 className="text-4xl text-center underline decoration-hot-pink-50 pb-2">Get in touch:</h3>
<div className="flex gap-2 text-white">
<a href="tel:2223351458" title="phone">
<i className="bi bi-headset text-2xl hover:text-yellow-400" />
</a>
<a href="#" title="live chat">
<i className="bi bi-chat-left-dots text-2xl hover:text-hot-pink-50" />
</a>
<a href="#" title="email">
<i className="bi bi-envelope text-2xl hover:text-yellow-400" />
</a>
</div>
<div className="flex gap-2">
<a href="#" title="facebook">
<i className="bi bi-facebook text-2xl hover:text-[#4267B2]" />
</a>
<a href="#" title="twitter">
<i className="bi bi-twitter text-2xl hover:text-[#1DA1F2]" />
</a>
<a href="#" title="instagram">
<i className="bi bi-instagram text-2xl hover:text-[#C13584]" />
</a>
</div>
</div>
</div>
<ScrollToTopBtn />
</footer>
</div>
);
}