@@ -4,29 +4,29 @@ import { Icon } from "astro-icon/components";
44import MyLink from " ../../components/MyLink.astro"
55---
66
7- <header class =" fixed top-0 left-0 z-50 bg-background w-full"
7+ <header class =" fixed top-0 left-0 z-50 w-full bg-background "
88 <nav
9- class =" flex justify-between items-center mx-auto max-w-7xl px-4 font-mono"
9+ class =" flex items-center justify-between max-w-7xl mx-auto px-4 font-mono"
1010 >
11- <a class =" text-xl font-bold py-4 " href =" /" a >
11+ <a class =" py-4 text-xl font-bold" href =" /" a >
1212
1313 <ul
14- class =" hidden md:flex m-0 p-0 fixed z-40 top-16 left-0 bg-background w-full md:w-auto md:static md:flex-row md:space-x-4 md:items-center md:justify-center "
14+ class =" hidden md:flex md:items-center md:space-x-4 fixed md:static z-40 top-16 left-0 w-full md:w-auto bg-background "
1515 >
1616 <li class =" p-4 text-center"
1717 <MyLink href =" #about" text =" About" className =" inline-block"
1818 </li >
1919 <li class =" p-4 text-center"
20- <MyLink href =" #experience" text =" Experience" className =" inline-block"
21- </ li >
22- < li class = " p-4 text-center "
23- <MyLink href = " #projects " text = " Projects " className = " inline-block " / >
24- </ li >
25- < li class = " p-4 text-center "
26- <MyLink href = " #contact " text = " Contact " className = " inline-block " / >
20+ <MyLink href =" #experience" text =" Experience" className =" inline-block" / >
21+ < li class = " p-4 text-center "
22+ < MyLink href = " #projects " text = " Projects " className = " inline-block " / >
23+ </ li >
24+ < li class = " p-4 text-center "
25+ < MyLink href = " #contact " text = " Contact " className = " inline-block " / >
26+ </ li >
2727 </li >
2828 </ul >
29-
29+
3030 <div class =" flex items-center space-x-4"
3131 <a
3232 href =" https://github.com/klpod221"
@@ -42,81 +42,81 @@ import MyLink from "../../components/MyLink.astro";
4242 </button >
4343 </div >
4444 </nav >
45- </header >
4645
47- <script >
48- const activeHeaderItem = (item) => {
49- // Get all navigation items
50- const navItems = document.querySelectorAll("nav ul li a");
46+ <script >
47+ const activeHeaderItem = (item) => {
48+ // Get all navigation items
49+ const navItems = document.querySelectorAll("nav ul li a");
5150
52- // Remove active class from all items
53- navItems.forEach((navItem) => {
54- navItem.classList.remove("text-primary");
55- navItem.querySelector("span")?.classList.remove("scale-x-100");
56- });
51+ // Remove active class from all items
52+ navItems.forEach((navItem) => {
53+ navItem.classList.remove("text-primary");
54+ navItem.querySelector("span")?.classList.remove("scale-x-100");
55+ });
5756
58- // Add active class to clicked item
59- item.classList.add("text-primary");
60- item.querySelector("span")?.classList.add("scale-x-100");
57+ // Add active class to clicked item
58+ item.classList.add("text-primary");
59+ item.querySelector("span")?.classList.add("scale-x-100");
6160
62- const target = item.getAttribute("href");
61+ const target = item.getAttribute("href");
6362
64- // Handle navigation properly
65- if (target === "#about") {
66- // Scroll to top since there's no explicit about section
67- window.scrollTo({
68- top: 0,
69- behavior: "smooth",
70- });
71- } else {
72- const targetElement = document.querySelector(target);
73- if (targetElement) {
74- // Add proper offset for header height
63+ // Handle navigation properly
64+ if (target === "#about") {
65+ // Scroll to top since there's no explicit about section
7566 window.scrollTo({
76- top: targetElement.offsetTop - 80 ,
67+ top: 0 ,
7768 behavior: "smooth",
7869 });
70+ } else {
71+ const targetElement = document.querySelector(target);
72+ if (targetElement) {
73+ // Add proper offset for header height
74+ window.scrollTo({
75+ top: targetElement.offsetTop - 80,
76+ behavior: "smooth",
77+ });
78+ }
79+ }
80+ };
81+
82+ const toggleMobileMenu = () => {
83+ document.querySelector("nav ul")?.classList.toggle("hidden");
84+ };
85+
86+ // When DOM is loaded
87+ document.addEventListener("DOMContentLoaded", () => {
88+ // Activate the first item by default
89+ const firstNavItem = document.querySelector("nav ul li a");
90+ if (firstNavItem) {
91+ activeHeaderItem(firstNavItem);
7992 }
80- }
81- };
82-
83- const toggleMobileMenu = () => {
84- document.querySelector("nav ul")?.classList.toggle("hidden");
85- };
86-
87- // When DOM is loaded
88- document.addEventListener("DOMContentLoaded", () => {
89- // Activate the first item by default
90- const firstNavItem = document.querySelector("nav ul li a");
91- if (firstNavItem) {
92- activeHeaderItem(firstNavItem);
93- }
9493
95- // Add event listener to all navigation items
96- document.querySelectorAll("nav ul li a").forEach((item) => {
97- item.addEventListener("click", function (e) {
98- e.preventDefault();
99- activeHeaderItem(this);
94+ // Add event listener to all navigation items
95+ document.querySelectorAll("nav ul li a").forEach((item) => {
96+ item.addEventListener("click", function (e) {
97+ e.preventDefault();
98+ activeHeaderItem(this);
10099
101- // Only hide on mobile devices
102- if (window.innerWidth < 768) {
103- document.querySelector("nav ul")?.classList.add("hidden");
104- }
100+ // Only hide on mobile devices
101+ if (window.innerWidth < 768) {
102+ document.querySelector("nav ul")?.classList.add("hidden");
103+ }
104+ });
105105 });
106- });
107106
108- // Add event listener to mobile menu button
109- document
110- .querySelector("header button")
111- ?.addEventListener("click", toggleMobileMenu);
112- });
113- </script >
107+ // Add event listener to mobile menu button
108+ document
109+ .querySelector("header button")
110+ ?.addEventListener("click", toggleMobileMenu);
111+ });
112+ </script >
114113
115- <style >
116- @media (max-width: 767px) {
117- nav ul {
118- transition: all 0.3s ease;
119- border-bottom: 1px solid #27272a;
114+ <style >
115+ @media (max-width: 767px) {
116+ nav ul {
117+ transition: all 0.3s ease;
118+ border-bottom: 1px solid #27272a;
119+ }
120120 }
121- }
122- </style >
121+ </ style >
122+ </header >
0 commit comments