asowneryt/computer-repair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ContactForm component and utility functions; update Navbar styles

Browse Source
This commit is contained in:
ASOwnerYT
2025-04-04 02:11:26 +00:00
parent 900a43fb0e
commit c5968f2876
12 changed files with 874 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/Navbar.js
+67 -12
View File
@@ -8,6 +8,7 @@ import logo from "../assets/logo.svg";
import menu from "../assets/menu.svg";
import close from "../assets/close.svg";
import { usePathname } from "next/navigation";
import { ChevronDownIcon } from "lucide-react";
// import { motion } from "motion/react"
export default function Navbar() {
@@ -82,33 +83,87 @@ export default function Navbar() {
${styles.dropdown}
${isDropdownActive && !isActive ? styles.dropdownActive : ""}
`}
onMouseEnter={() => setDropdownActive(true)}
onMouseLeave={() => setDropdownActive(false)}
>
<a
className={`${styles.dropdownTitle}
${pathname === "/services" ? styles.active : ""}`}
onClick={handleDropdownToggle}
<div
data-state={isDropdownActive ? "open" : "close"}
className="flex items-center justify-center gap-1 [&[data-state=open]>svg]:rotate-180"
>
Services
</a>
<a
className={`${styles.dropdownTitle}
${pathname === "/services" ? styles.active : ""}`}
onClick={handleDropdownToggle}
>
Services
</a>
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
</div>
<ul className={styles.dropdownMenu}>
<li>
<Link href="/services/computer-repair" className={`link ${pathname === "/services/computer-repair" ? styles.active : ""}`}>Computer & Laptop Repairs</Link>
<Link
href="/services/computer-repair"
className={`link ${
pathname === "/services/computer-repair"
? styles.active
: ""
}`}
>
Computer & Laptop Repairs
</Link>
</li>
<li>
<Link href="/services/computer-upgrades" className={`link ${pathname === "/services/computer-upgrades" ? styles.active : ""}`}>Computer Upgrades & Speedup</Link>
<Link
href="/services/computer-upgrades"
className={`link ${
pathname === "/services/computer-upgrades"
? styles.active
: ""
}`}
>
Computer Upgrades & Speedup
</Link>
</li>
<li>
<Link href="/services/it-support" className={`link ${pathname === "/services/it-support" ? styles.active : ""}`}>IT Support</Link>
<Link
href="/services/it-support"
className={`link ${
pathname === "/services/it-support" ? styles.active : ""
}`}
>
IT Support
</Link>
</li>
<li>
<Link href="/services/web-design" className={`link ${pathname === "/services/web-design" ? styles.active : ""}`}>Web Design</Link>
<Link
href="/services/web-design"
className={`link ${
pathname === "/services/web-design" ? styles.active : ""
}`}
>
Web Design
</Link>
</li>
<li>
<Link href="/services/virus-removal" className={`link ${pathname === "/services/virus-removal" ? styles.active : ""}`}>Virus Removal</Link>
<Link
href="/services/virus-removal"
className={`link ${
pathname === "/services/virus-removal" ? styles.active : ""
}`}
>
Virus Removal
</Link>
</li>
</ul>
</li>
<li className="bg-sky-900 text-white">
<li>
<Link
href="/#faq"
>
FAQ
</Link>
</li>
<li className="bg-sky-900 text-white lg:ml-4">
<Link
href="/contact"
className={`link ${pathname === "/contact" ? styles.active : ""}`}