-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.astro
137 lines (131 loc) · 5.66 KB
/
index.astro
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
---
import BaseLayout from "@/layouts/BaseLayout.astro";
---
<BaseLayout>
<section
class="bg-white relative overflow-hidden"
x-data="{ isOpen: false }">
<div
class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
<div
class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
<div>
<h1>Bottom drawer</h1>
<p class="text-balance">
Click on the button to open the bottom drawer.
</p>
</div>
</div>
<div class="mt-6 border-t pt-12 max-w-sm mx-auto w-full">
<!-- Starts component -->
<button
id="toggleButton"
aria-expanded="false"
class="rounded-full bg-orange-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 w-full">
Toggle Cookie Settings
</button>
<!-- Button to toggle the bottom drawer -->
<!-- Bottom drawer container with transition -->
<div
id="bottomDrawer"
class="fixed inset-x-0 bottom-0 flex flex-col justify-between gap-x-8 gap-y-4 bg-white p-8 ring-1 ring-gray-900/10 transform translate-y-full transition-transform duration-300 md:flex-row md:items-center lg:p-20">
<div class="flex flex-col lg:flex-row gap-12 justify-between w-full">
<!-- Drawer content -->
<p class="max-w-4xl text-sm leading-6 text-gray-500">
Our website employs cookies to enhance a well-rounded diet,
serving as a delightful treat for your senses following the intake
of wholesome yet unexciting meals. Opting in to enjoy our cookies
is not mandatory but is advised for a tasteful experience.
<span class="block mt-2">
See our <a
href="#"
class="font-semibold text-indigo-600"
>cookie policy</a
>.
</span>
</p>
<div class="flex flex-none items-center gap-x-5">
<button
type="button"
class="rounded-full bg-orange-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2">
Accept all
</button>
<button
type="button"
id="rejectButton"
class="text-sm font-semibold leading-6 text-gray-900">
Reject all
</button>
</div>
</div>
</div>
<!-- Ends component -->
</div>
<!-- Starts links to tutorial -->
<div
class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
<div
class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
<div class="flex w-0 flex-1 items-center p-4">
<div class="w-full">
<p class="text-sm font-medium text-neutral-900">Tutorial</p>
<p class="mt-1 text-sm text-neutral-500">
How to create a bottom drawer with Tailwind CSS and JavaScript
</p>
<p class="mt-2 text-xs text-orange-600 underline">
<a href="https://lexingtonthemes.com">
by © Lexington Themes</a
>
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col divide-y divide-neutral-200">
<div class="flex h-0 flex-1">
<a
href="https://lexingtonthemes.com/tutorials/how-to-create-a-bottom-drawer-tailwind-css-and-javascript/"
type="button"
class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600"
>Tutorial</a
>
</div>
<div class="flex h-0 flex-1">
<a
href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/js-drawer/index.astro"
class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-600"
>Get the code</a
>
</div>
</div>
</div>
</div>
</div>
<!-- Ends links to tutorial -->
</div>
</section>
</BaseLayout>
<script type="module">
document.addEventListener("DOMContentLoaded", () => {
const toggleButton = document.getElementById("toggleButton");
const bottomDrawer = document.getElementById("bottomDrawer");
const rejectButton = document.getElementById("rejectButton");
function toggleDrawer() {
bottomDrawer.classList.toggle("translate-y-full");
bottomDrawer.classList.toggle("translate-y-0");
}
function closeDrawer() {
bottomDrawer.classList.add("translate-y-full");
bottomDrawer.classList.remove("translate-y-0");
}
toggleButton.addEventListener("click", toggleDrawer);
rejectButton.addEventListener("click", closeDrawer);
document.addEventListener("click", (event) => {
if (
!bottomDrawer.contains(event.target) &&
!toggleButton.contains(event.target)
) {
closeDrawer();
}
});
});
</script>