Skip to content

Commit 4d69241

Browse files
JenishMSJenishMS
committed
changes
1 parent ecf42a5 commit 4d69241

1 file changed

Lines changed: 82 additions & 60 deletions

File tree

‎src/components/Header.astro‎

Lines changed: 82 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,67 @@
11
---
22
---
33

4-
<nav class="flex max-sm:justify-between justify-end gap-4 py-4 max-sm:py-2 z-10 sticky top-0 bg-[#121519]">
4+
<nav
5+
class="flex max-sm:justify-between justify-end gap-4 py-4 max-sm:py-2 z-10 sticky top-0 bg-[#121519]"
6+
>
57
<h2 class="sm:hidden font-semibold text-xl">Jenish MS</h2>
68
<a class="about max-sm:hidden active" href="#about">About</a>
79
<a class="skills max-sm:hidden" href="#skills">Skills</a>
810
<a class="experience max-sm:hidden" href="#experience">Experience</a>
911
<a class="education max-sm:hidden" href="#education">Education</a>
10-
<a class="projects max-sm:hidden" href="#projects">Projects</a>
12+
<!-- <a class="projects max-sm:hidden" href="#projects">Projects</a> -->
1113
<a class="contact max-sm:hidden" href="#contact">Contact</a>
1214
<div class="sm:hidden">
13-
<button class="navbar-burger flex items-center text-primary p-3">
14-
<svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
15-
<title>Jenish MS Mobile menu</title>
16-
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
17-
</svg>
18-
</button>
19-
</div>
15+
<button class="navbar-burger flex items-center text-primary p-3">
16+
<svg
17+
class="block h-4 w-4 fill-current"
18+
viewBox="0 0 20 20"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<title>Jenish MS Mobile menu</title>
22+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
23+
</svg>
24+
</button>
25+
</div>
2026
</nav>
2127

2228
<!-- Mobile Menu bar -->
2329
<div class="navbar-menu relative z-50 hidden">
24-
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
25-
<nav class="fixed top-0 left-0 bottom-0 flex flex-col w-8/12 max-w-sm py-6 px-6 bg-secondary border-r overflow-y-auto">
26-
<div class="flex items-center justify-between mb-4">
27-
<h2>Jenish MS</h2>
28-
<button class="navbar-close">
29-
<svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
30-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
31-
</svg>
32-
</button>
33-
</div>
34-
<a class="about mt-4 py-2 block text-center active" href="#about">About</a>
35-
<a class="skills mt-4 py-2 block text-center" href="#skills">Skills</a>
36-
<a class="experience mt-4 py-2 block text-center" href="#experience">Experience</a>
37-
<a class="education mt-4 py-2 block text-center" href="#education">Education</a>
38-
<a class="projects mt-4 py-2 block text-center" href="#projects">Projects</a>
39-
<a class="contact mt-4 py-2 block text-center" href="#contact">Contact</a>
40-
</nav>
41-
</div>
30+
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-25"></div>
31+
<nav
32+
class="fixed top-0 left-0 bottom-0 flex flex-col w-8/12 max-w-sm py-6 px-6 bg-secondary border-r overflow-y-auto"
33+
>
34+
<div class="flex items-center justify-between mb-4">
35+
<h2>Jenish MS</h2>
36+
<button class="navbar-close">
37+
<svg
38+
class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500"
39+
xmlns="http://www.w3.org/2000/svg"
40+
fill="none"
41+
viewBox="0 0 24 24"
42+
stroke="currentColor"
43+
>
44+
<path
45+
stroke-linecap="round"
46+
stroke-linejoin="round"
47+
stroke-width="2"
48+
d="M6 18L18 6M6 6l12 12"></path>
49+
</svg>
50+
</button>
51+
</div>
52+
<a class="about mt-4 py-2 block text-center active" href="#about">About</a>
53+
<a class="skills mt-4 py-2 block text-center" href="#skills">Skills</a>
54+
<a class="experience mt-4 py-2 block text-center" href="#experience"
55+
>Experience</a
56+
>
57+
<a class="education mt-4 py-2 block text-center" href="#education"
58+
>Education</a
59+
>
60+
<a class="projects mt-4 py-2 block text-center" href="#projects">Projects</a
61+
>
62+
<a class="contact mt-4 py-2 block text-center" href="#contact">Contact</a>
63+
</nav>
64+
</div>
4265

4366
<style>
4467
.active {
@@ -47,44 +70,43 @@
4770
</style>
4871

4972
<script is:inline>
50-
document.addEventListener('DOMContentLoaded', function () {
51-
// open
52-
const burger = document.querySelectorAll('.navbar-burger');
53-
const menu = document.querySelectorAll('.navbar-menu');
73+
document.addEventListener("DOMContentLoaded", function () {
74+
// open
75+
const burger = document.querySelectorAll(".navbar-burger");
76+
const menu = document.querySelectorAll(".navbar-menu");
5477

55-
if (burger.length && menu.length) {
56-
for (var i = 0; i < burger.length; i++) {
57-
burger[i].addEventListener('click', function () {
58-
for (var j = 0; j < menu.length; j++) {
59-
menu[j].classList.toggle('hidden');
60-
}
61-
});
78+
if (burger.length && menu.length) {
79+
for (var i = 0; i < burger.length; i++) {
80+
burger[i].addEventListener("click", function () {
81+
for (var j = 0; j < menu.length; j++) {
82+
menu[j].classList.toggle("hidden");
83+
}
84+
});
85+
}
6286
}
63-
}
6487

65-
// close
66-
const close = document.querySelectorAll('.navbar-close');
67-
const backdrop = document.querySelectorAll('.navbar-backdrop');
88+
// close
89+
const close = document.querySelectorAll(".navbar-close");
90+
const backdrop = document.querySelectorAll(".navbar-backdrop");
6891

69-
if (close.length) {
70-
for (var i = 0; i < close.length; i++) {
71-
close[i].addEventListener('click', function () {
72-
for (var j = 0; j < menu.length; j++) {
73-
menu[j].classList.toggle('hidden');
74-
}
75-
});
92+
if (close.length) {
93+
for (var i = 0; i < close.length; i++) {
94+
close[i].addEventListener("click", function () {
95+
for (var j = 0; j < menu.length; j++) {
96+
menu[j].classList.toggle("hidden");
97+
}
98+
});
99+
}
76100
}
77-
}
78101

79-
if (backdrop.length) {
80-
for (var i = 0; i < backdrop.length; i++) {
81-
backdrop[i].addEventListener('click', function () {
82-
for (var j = 0; j < menu.length; j++) {
83-
menu[j].classList.toggle('hidden');
84-
}
85-
});
102+
if (backdrop.length) {
103+
for (var i = 0; i < backdrop.length; i++) {
104+
backdrop[i].addEventListener("click", function () {
105+
for (var j = 0; j < menu.length; j++) {
106+
menu[j].classList.toggle("hidden");
107+
}
108+
});
109+
}
86110
}
87-
}
88-
});
111+
});
89112
</script>
90-

0 commit comments

Comments
 (0)