Skip to content

Commit 360c0d3

Browse files
massacodesmassacodes
committed
Add nav menu
1 parent 4529898 commit 360c0d3

File tree

4 files changed

+243
-157
lines changed

4 files changed

+243
-157
lines changed

‎public/index.html‎

Lines changed: 109 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<header class="text-white">
1212
<nav
1313
class="flex w-full py-5 bg-black-200 xl:py-[1.18rem] lg:py-5 xl:px-20 lg:px-[3.8rem]"
14+
id="navbar"
1415
>
1516
<ul class="flex flex-row">
1617
<li class="flex items-center justify-center">
@@ -75,80 +76,102 @@
7576
<li class="flex items-center">
7677
<span class="text-[2rem] ml-[.47rem] mr-[.55rem] font-thin">|</span>
7778
<a
78-
class="mt-[.35rem] xl:mt-[.3rem] lg:mr-[27.45rem] text-[1.45rem] font-medium"
79+
class="mt-[.35rem] xl:mt-[.3rem] lg:mr-[26rem] text-[1.45rem] font-medium"
7980
href="./index.html"
8081
>Help Center</a
8182
>
8283
</li>
8384
</ul>
84-
<div
85-
class="mt-[.65rem] lg:mt-3 xl:hidden ml-[5.5rem] lg:mr-1 lg:ml-[6.25rem] mr-[.5rem] w-8 h-8"
86-
>
87-
<svg
88-
xmlns="http://www.w3.org/2000/svg"
89-
viewBox="0 0 30 30"
90-
fill="none"
91-
stroke="currentColor"
92-
stroke-width="2"
93-
stroke-linecap="round"
94-
stroke-linejoin="round"
95-
class="feather feather-search"
96-
>
97-
<circle
98-
cx="11"
99-
cy="11"
100-
r="8"
101-
id="id_101"
102-
style="stroke: rgb(255, 255, 255)"
103-
></circle>
104-
<line
105-
x1="21"
106-
y1="21"
107-
x2="16.65"
108-
y2="16.65"
109-
id="id_102"
110-
style="stroke: rgb(255, 255, 255)"
111-
></line>
112-
</svg>
113-
</div>
114-
<div class="w-7 h-7 lg:mt-[.15rem]">
115-
<svg
116-
xmlns="http://www.w3.org/2000/svg"
117-
class="mt-[.4rem] md:mt-2 xl:hidden"
118-
viewBox="0 0 23 23"
119-
fill="none"
120-
stroke="currentColor"
121-
stroke-width="2"
122-
stroke-linecap="round"
123-
stroke-linejoin="round"
124-
class="feather feather-menu"
85+
<button>
86+
<div
87+
class="mt-[.65rem] lg:mt-3 xl:hidden ml-[5.5rem] lg:mr-1 lg:ml-32 mr-[.5rem] w-8 h-8"
12588
>
126-
<line
127-
x1="3"
128-
y1="12"
129-
x2="21"
130-
y2="12"
131-
id="id_101"
132-
style="stroke: rgb(255, 255, 255)"
133-
></line>
134-
<line
135-
x1="3"
136-
y1="6"
137-
x2="21"
138-
y2="6"
139-
id="id_102"
140-
style="stroke: rgb(255, 255, 255)"
141-
></line>
142-
<line
143-
x1="3"
144-
y1="18"
145-
x2="21"
146-
y2="18"
147-
id="id_103"
148-
style="stroke: rgb(255, 255, 255)"
149-
></line>
150-
</svg>
151-
</div>
89+
<svg
90+
xmlns="http://www.w3.org/2000/svg"
91+
viewBox="0 0 30 30"
92+
fill="none"
93+
stroke="currentColor"
94+
stroke-width="2"
95+
stroke-linecap="round"
96+
stroke-linejoin="round"
97+
class="feather feather-search"
98+
>
99+
<circle
100+
cx="11"
101+
cy="11"
102+
r="8"
103+
id="id_101"
104+
style="stroke: rgb(255, 255, 255)"
105+
></circle>
106+
<line
107+
x1="21"
108+
y1="21"
109+
x2="16.65"
110+
y2="16.65"
111+
id="id_102"
112+
style="stroke: rgb(255, 255, 255)"
113+
></line>
114+
</svg>
115+
</div>
116+
</button>
117+
<button id="menu-btn" onclick="toggleMenu()">
118+
<div class="w-7 h-7">
119+
<svg
120+
id="menu-open"
121+
xmlns="http://www.w3.org/2000/svg"
122+
class="mt-[.4rem] lg:mt-[.1rem] xl:hidden"
123+
viewBox="0 0 23 23"
124+
fill="none"
125+
stroke="currentColor"
126+
stroke-width="2"
127+
stroke-linecap="round"
128+
stroke-linejoin="round"
129+
class="feather feather-menu"
130+
>
131+
<line
132+
x1="3"
133+
y1="12"
134+
x2="21"
135+
y2="12"
136+
id="id_101"
137+
style="stroke: rgb(255, 255, 255)"
138+
></line>
139+
<line
140+
x1="3"
141+
y1="6"
142+
x2="21"
143+
y2="6"
144+
id="id_102"
145+
style="stroke: rgb(255, 255, 255)"
146+
></line>
147+
<line
148+
x1="3"
149+
y1="18"
150+
x2="21"
151+
y2="18"
152+
id="id_103"
153+
style="stroke: rgb(255, 255, 255)"
154+
></line>
155+
</svg>
156+
</div>
157+
<div class="w-7 h-7 top-[2.1rem] absolute">
158+
<svg
159+
id="menu-exit"
160+
class="hidden"
161+
viewBox="0 0 590 590"
162+
fill="none"
163+
xmlns="http://www.w3.org/2000/svg"
164+
>
165+
<path
166+
fill-rule="evenodd"
167+
clip-rule="evenodd"
168+
d="M84.9407 448.942C78.6923 455.19 68.5616 455.19 62.3132 448.942C56.0649 442.693 56.0649 432.563 62.3132 426.314L233 255.628L62.3132 84.9417C56.0649 78.6933 56.0649 68.5626 62.3132 62.3142C68.5616 56.0658 78.6923 56.0658 84.9407 62.3142L255.627 233.001L426.313 62.3142C432.562 56.0658 442.692 56.0658 448.941 62.3142C455.189 68.5626 455.189 78.6933 448.941 84.9417L278.254 255.628L448.941 426.314C455.189 432.563 455.189 442.693 448.941 448.942C442.692 455.19 432.562 455.19 426.313 448.942L255.627 278.255L84.9407 448.942Z"
169+
fill="#ffffff"
170+
id="id_101"
171+
></path>
172+
</svg>
173+
</div>
174+
</button>
152175
<div
153176
class="hidden xl:mr-4 rounded-lg justify-center xl:flex items-center xl:h-[3.15rem] border-white border-[1px] bg-[#161616] xl:w-[14.5rem] xl:ml-[28.6rem]"
154177
>
@@ -160,6 +183,23 @@
160183
<a href="#">Sign In</a>
161184
</div>
162185
</nav>
186+
<div
187+
class="hidden bg-black border-t-[1px] border-gray w-full lg:h-[13.25rem]"
188+
id="nav-menu"
189+
>
190+
<div
191+
class="place-self-center lg:flex lg:flex-col lg:justify-center lg:items-center"
192+
>
193+
<a class="text-white text-2xl lg:pb-4 font-normal" href="#"
194+
>Submit a request</a
195+
>
196+
<a
197+
class="text-white text-center lg:pt-4 text-2xl border-t-[1px] lg:w-[31rem] font-thin border-gray"
198+
href="#"
199+
>Sign in</a
200+
>
201+
</div>
202+
</div>
163203
</header>
164204
<main>
165205
<section
@@ -481,5 +521,6 @@
481521
</p>
482522
</div>
483523
</footer>
524+
<script src="main.js"></script>
484525
</body>
485526
</html>

‎public/main.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const menuBtn = document.getElementById("menu-btn");
2+
const navMenu = document.getElementById("nav-menu");
3+
const navbar = document.getElementById("navbar");
4+
const menuOpen = document.getElementById("menu-open");
5+
const menuExit = document.getElementById("menu-exit");
6+
7+
function toggleMenu() {
8+
if (navMenu.classList.contains("hidden")) {
9+
navMenu.classList.remove("hidden");
10+
navMenu.classList.add("grid");
11+
navbar.classList.add("bg-black");
12+
navbar.classList.remove("bg-black-200");
13+
menuOpen.classList.add("hidden");
14+
menuExit.classList.remove("hidden");
15+
} else {
16+
navMenu.classList.add("hidden");
17+
navMenu.classList.remove("grid");
18+
navbar.classList.remove("bg-black");
19+
navbar.classList.add("bg-black-200");
20+
menuOpen.classList.remove("hidden");
21+
menuExit.classList.add("hidden");
22+
}
23+
}

0 commit comments

Comments
 (0)