2023-11-08
Creating New Responsive Navbar in React/Next.js with Material-UI that hide on scroll
hi how are you
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
<div>
<div
style={{
position: "relative",
width: "100%", // Adjust the width as needed
height: "300px", // Adjust the height as needed
overflow: "hidden", // Hide overflow to prevent the cover photo from overflowing
}}
>
<img
src="https://res.cloudinary.com/dtvtphhsc/image/upload/v1693428898/Blog-Cover_tw63ut.gif" // Replace with your cover photo URL
alt="Cover"
style={{
width: "100%",
height: "100%",
objectFit: "cover", // Ensure the cover photo fills the container
borderRadius: "10px",
}}
/>
<div
style={{
position: "absolute",
top: "10px", // Adjust the top positioning
right: "10px", // Adjust the right positioning
backgroundColor: "rgba(0, 0, 0, 0.5)",
color: "white",
padding: "5px 10px",
borderRadius: "4px",
}}
>
{/* {tour.date} */}
</div>
{/* Circular Profile Picture */}
<img
src="https://res.cloudinary.com/dtvtphhsc/image/upload/fl_immutable_cache.lossy.progressive/v1693673198/0948d54e-68a2-451c-ba15-ac683b0c0780_kclx5w.webp" // Replace with your profile picture URL
style={{
position: "absolute",
bottom: "0",
left: "50%",
transform: "translateX(-50%)", // Center horizontally
width: "200px", // Adjust the width as needed
height: "200px", // Maintain a square aspect ratio
borderRadius: "50%",
border: "2px solid rgba(250, 47, 210, 0.696)",
}}
alt="Profile"
/>
</div>
<br />
<div className="About3">
{" "}
<h1>{data.title}</h1>{" "}
<button onClick={copyToClipboard}>
{copied ? "Copied!" : "Copy Title"}
</button>
</div>
<div className="QuillDescription">
<div className="QuillDescription" style={{ width: "100%" }}>
<p>
<PortableText
value={data.content}
components={PortableTextComponent}
/>
</p>
<div className="code-block">
<pre>
<code>{data.title}</code>
<button onClick={copyToClipboard}>
{copied ? "Copied!" : "Copy Title"}
</button>
</pre>
</div>
<img src={urlFor(data.postimg).url()} alt="Img" />
</div>
</div>
<Divider />
<br></br>
<br></br>
</div>